WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert the image reformater (moved to Phantomas)

Browse Source
This commit is contained in:
Gaël Métais
2023-08-12 04:29:43 +02:00
parent 675316c9b7
commit 8e941233a0
4 changed files with 2 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/metadata/policies.js
+1 -1
View File
@@ -747,7 +747,7 @@ var policies = {
"unit": 'bytes'
},
"oldImageFormats": {
"tool": "redownload",
"tool": "phantomas",
"label": "Old image formats",
"message": "<p>Measures the number of bytes that could be saved by converting images to newer and more efficient formats. The best image format is generally AVIF and the second best is WebP.</p><p>Be careful, you need to provide fallback images for old browsers and search engine bots.</p>",
"isOkThreshold": 30720,
lib/tools/redownload/imageReformater.js
-138
View File
@@ -1,138 +0,0 @@
var debug = require('debug')('ylt:imageReformater');
var sharp = require('sharp');
// Disable sharp cache to reduce the "disk is full" error on Amazon Lambda
sharp.cache(false);
var ImageOptimizer = function() {
// https://www.industrialempathy.com/posts/avif-webp-quality-settings
const WEBP_QUALITY = 82;
const AVIF_QUALITY = 64;
async function reformatImage(entry) {
if (!entry.weightCheck || !entry.weightCheck.bodyBuffer) {
// No valid file available
return entry;
}
var fileSize = entry.weightCheck.uncompressedSize;
debug('Let\'s try to convert %s to other image formats', entry.url);
debug('Current file size is %d', fileSize);
var animated = await isAnimated(entry);
debug('Check if the file is animated: %s', animated);
if (isJPEG(entry) || isPNG(entry)) {
debug('File is %s, let\'s try to convert it to WebP', entry.contentType);
try {
const webpFile = await convertToWebp(entry.weightCheck.bodyBuffer, animated);
if (webpFile) {
var webpFileSize = webpFile.length;
debug('WebP transformation complete for %s', entry.url);
debug('WebP size is %d bytes', webpFileSize);
if (webpFile.length > 0 && gainIsEnough(fileSize, webpFileSize)) {
entry.weightCheck.webpSize = webpFileSize;
debug('WebP size is %d bytes smaller (-%d%)', fileSize - webpFileSize, Math.round((fileSize - webpFileSize) * 100 / fileSize));
}
} else {
debug('Convertion to WebP didn\'t work');
}
} catch(err) {
debug('Error while converting to WebP, ignoring');
}
}
if (!animated && (isJPEG(entry) || isPNG(entry) || isWebP(entry))) {
debug('File is %s and is not animated, let\'s try to convert it to AVIF', entry.contentType);
try {
const avifFile = await convertToAvif(entry.weightCheck.bodyBuffer);
if (avifFile) {
var avifFileSize = avifFile.length;
debug('AVIF transformation complete for %s', entry.url);
debug('AVIF size is %d bytes', avifFileSize);
if (avifFile.length > 0 && gainIsEnough(fileSize, avifFileSize)) {
entry.weightCheck.avifSize = avifFileSize;
debug('AVIF size is %d bytes smaller (-%d%)', fileSize - avifFileSize, Math.round((fileSize - avifFileSize) * 100 / fileSize));
}
} else {
debug('Convertion to AVIF didn\'t work');
}
} catch(err) {
debug('Error while converting to AVIF, ignoring');
}
}
return entry;
}
async function convertToWebp(bodyBuffer, isAnimated) {
return sharp(bodyBuffer, {animated: isAnimated})
.webp({quality: WEBP_QUALITY, alphaQuality: WEBP_QUALITY})
.toBuffer();
}
async function convertToAvif(bodyBuffer) {
return sharp(bodyBuffer)
.webp({quality: AVIF_QUALITY})
.toBuffer();
}
// The gain is estimated of enough value if it's over 2KB or over 20%,
// but it's ignored if is below 100 bytes
function gainIsEnough(oldWeight, newWeight) {
var gain = oldWeight - newWeight;
var ratio = gain / oldWeight;
return (gain > 2048 || (ratio > 0.2 && gain > 100));
}
function isJPEG(entry) {
return entry.isImage && entry.contentType === 'image/jpeg';
}
function isPNG(entry) {
return entry.isImage && entry.contentType === 'image/png';
}
function isWebP(entry) {
return entry.isImage && entry.contentType === 'image/webp';
}
function entryTypeCanBeReformated(entry) {
return isJPEG(entry) || isPNG(entry) || isWebP(entry);
}
async function isAnimated(entry) {
if (isWebP(entry)) {
const metadata = await sharp(entry.weightCheck.bodyBuffer).metadata();
return metadata.pages > 1;
}
return false;
}
return {
reformatImage: reformatImage,
convertToWebp: convertToWebp,
convertToAvif: convertToAvif,
gainIsEnough: gainIsEnough,
entryTypeCanBeReformated: entryTypeCanBeReformated,
isAnimated: isAnimated
};
};
module.exports = new ImageOptimizer();
lib/tools/redownload/redownload.js
+1 -71
View File
@@ -15,7 +15,6 @@ var request = require('request');
var md5 = require('md5');
var imageOptimizer = require('./imageOptimizer');
var imageReformater = require('./imageReformater');
var fileMinifier = require('./fileMinifier');
var gzipCompressor = require('./gzipCompressor');
var brotliCompressor = require('./brotliCompressor');
@@ -79,10 +78,6 @@ var Redownload = function() {
.then(imageOptimizer.optimizeImage)
.then(function(entry) {
return Q(imageReformater.reformatImage(entry));
})
.then(imageDimensions.getDimensions)
.then(fileMinifier.minifyFile)
@@ -96,7 +91,7 @@ var Redownload = function() {
})
.then(function(newEntry) {
debug('File %s - Redownloaded, optimized, reformated, minified, compressed, analyzed: done', entry.url);
debug('File %s - Redownloaded, optimized, minified, compressed, analyzed: done', entry.url);
// For the progress bar
doneCount ++;
@@ -159,10 +154,6 @@ var Redownload = function() {
offenders.imageOptimization = listImagesNotOptimized(results);
metrics.imageOptimization = offenders.imageOptimization.totalGain;
// Old image formats
offenders.oldImageFormats = listImagesWithOldFormats(results);
metrics.oldImageFormats = offenders.oldImageFormats.totalGain;
// Image width
offenders.imagesTooLarge = listImagesTooLarge(results, data.params.options.device);
metrics.imagesTooLarge = offenders.imagesTooLarge.length;
@@ -407,67 +398,6 @@ var Redownload = function() {
return results;
}
function listImagesWithOldFormats(requests) {
var results = {
totalGain: 0,
images: []
};
requests.forEach(function(req) {
if (req.weightCheck.bodySize > 0 &&
imageReformater.entryTypeCanBeReformated(req) &&
(req.weightCheck.webpSize > 0 || req.weightCheck.avifSize > 0)) {
var image = {
url: req.url,
originalWeigth: req.weightCheck.bodySize,
};
switch (req.contentType) {
case 'image/jpeg':
image.originalFormat = 'JPEG';
break;
case 'image/png':
image.originalFormat = 'PNG';
break;
case 'image/gif':
image.originalFormat = 'GIF';
break;
case 'image/webp':
image.originalFormat = 'WebP';
break;
case 'image/avif':
image.originalFormat = 'AVIF';
break;
}
if (req.weightCheck.webpSize) {
image.webpSize = req.weightCheck.webpSize;
image.webpGain = req.weightCheck.bodySize - req.weightCheck.webpSize;
image.bestFormat = 'WebP';
image.maxGain = image.webpGain;
}
if (req.weightCheck.avifSize) {
image.avifSize = req.weightCheck.avifSize;
image.avifGain = req.weightCheck.bodySize - req.weightCheck.avifSize;
if (!req.weightCheck.webpSize || req.weightCheck.webpSize > req.weightCheck.avifSize) {
image.bestFormat = 'AVIF';
image.maxGain = image.avifGain;
}
}
results.totalGain += image.maxGain;
results.images.push(image);
}
});
return results;
}
function listImagesTooLarge(requests, device) {
var results = [];
test/core/imageReformaterTest.js
-122
View File
@@ -1,122 +0,0 @@
var should = require('chai').should();
var imageReformater = require('../../lib/tools/redownload/imageReformater');
var fs = require('fs');
var path = require('path');
describe('imageReformater', function() {
it('should convert a JPEG image to WebP and AVIF', async function() {
var fileContent = fs.readFileSync(path.resolve(__dirname, '../www/jpeg-image.jpg'));
let entry = {
isImage: true,
type: 'image',
contentType: 'image/jpeg',
weightCheck: {
bodyBuffer: fileContent,
uncompressedSize: fileContent.length
}
};
var newEntry = await imageReformater.reformatImage(entry);
newEntry.weightCheck.should.have.a.property('webpSize');
newEntry.weightCheck.webpSize.should.be.below(fileContent.length);
newEntry.weightCheck.should.have.a.property('avifSize');
newEntry.weightCheck.avifSize.should.be.below(fileContent.length);
});
it('should convert a PNG image to WebP and AVIF', async function() {
var fileContent = fs.readFileSync(path.resolve(__dirname, '../www/jpeg-image.jpg'));
let entry = {
isImage: true,
type: 'image',
contentType: 'image/png',
weightCheck: {
bodyBuffer: fileContent,
uncompressedSize: fileContent.length
}
};
var newEntry = await imageReformater.reformatImage(entry);
newEntry.weightCheck.should.have.a.property('webpSize');
newEntry.weightCheck.webpSize.should.be.below(fileContent.length);
newEntry.weightCheck.should.have.a.property('avifSize');
newEntry.weightCheck.avifSize.should.be.below(fileContent.length);
});
it('should convert a WebP image to AVIF', async function() {
var fileContent = fs.readFileSync(path.resolve(__dirname, '../www/jpeg-image.jpg'));
let entry = {
isImage: true,
type: 'image',
contentType: 'image/webp',
weightCheck: {
bodyBuffer: fileContent,
uncompressedSize: fileContent.length
}
};
var newEntry = await imageReformater.reformatImage(entry);
newEntry.weightCheck.should.not.have.a.property('webpSize');
newEntry.weightCheck.should.have.a.property('avifSize');
newEntry.weightCheck.avifSize.should.be.below(fileContent.length);
});
it('should recognize an animated WebP', async function() {
// Test on an animated image
let fileContent = fs.readFileSync(path.resolve(__dirname, '../www/animated.webp'));
let entry = {
isImage: true,
type: 'image',
contentType: 'image/webp',
weightCheck: {
bodyBuffer: fileContent,
uncompressedSize: fileContent.length
}
};
(await imageReformater.isAnimated(entry)).should.equal(true);
// Test on a not animated image
fileContent = fs.readFileSync(path.resolve(__dirname, '../www/monster.webp'));
entry.weightCheck.bodyBuffer = fileContent;
(await imageReformater.isAnimated(entry)).should.equal(false);
});
it('should not convert an animated WebP', async function() {
// Test on an animated image
let fileContent = fs.readFileSync(path.resolve(__dirname, '../www/animated.webp'));
let entry = {
isImage: true,
type: 'image',
contentType: 'image/webp',
weightCheck: {
bodyBuffer: fileContent,
uncompressedSize: fileContent.length
}
};
var newEntry = await imageReformater.reformatImage(entry);
// Test on a not animated image
newEntry.weightCheck.should.not.have.a.property('avifSize');
});
it('should determine if gain is enough', function() {
imageReformater.gainIsEnough(20000, 10000).should.equal(true);
imageReformater.gainIsEnough(2000, 1000).should.equal(true);
imageReformater.gainIsEnough(20000, 21000).should.equal(false);
imageReformater.gainIsEnough(20000, 40000).should.equal(false);
imageReformater.gainIsEnough(20000, 19500).should.equal(false);
imageReformater.gainIsEnough(250, 120).should.equal(true);
imageReformater.gainIsEnough(200, 120).should.equal(false);
imageReformater.gainIsEnough(2000, 1900).should.equal(false);
imageReformater.gainIsEnough(200000, 197000).should.equal(true);
});
});