diff --git a/front/src/css/rule.css b/front/src/css/rule.css index 40f0546..ed5794a 100644 --- a/front/src/css/rule.css +++ b/front/src/css/rule.css @@ -164,16 +164,18 @@ font-style: italic; font-weight: normal; } -.colorPalette { - width: 30em; - border: 2px solid #000; - text-align: left; +.checker { /* Checkerboard background */ background-color: #ddd; background-image: linear-gradient(45deg, #aaaaaa 25%, transparent 25%, transparent 75%, #aaaaaa 75%, #aaaaaa), linear-gradient(45deg, #aaaaaa 25%, transparent 25%, transparent 75%, #aaaaaa 75%, #aaaaaa); background-size: 1em 1em; background-position: 0 0, 0.5em 0.5em; } +.colorPalette { + width: 30em; + border: 2px solid #000; + text-align: left; +} .colorPalette > div { display: inline-block; height: 2em; @@ -216,3 +218,21 @@ font-weight: bold; color: #e74c3c; } +.imageOffenders { + display: table; + border-spacing: 3em; + width: 90%; +} +.imageOffenders > div { + display: table-row; +} +.imageOffenders > div > div { + display: table-cell; + vertical-align: middle; +} +.imageOffenders img { + max-height: 10em; + max-width: 40em; + border: 1px solid #000; + margin-top: 0.5em; +} diff --git a/front/src/js/directives/offendersDirectives.js b/front/src/js/directives/offendersDirectives.js index 974e70f..52d9db0 100644 --- a/front/src/js/directives/offendersDirectives.js +++ b/front/src/js/directives/offendersDirectives.js @@ -864,6 +864,10 @@ var kilo = bytes / 1024; + if (kilo < 1) { + return bytes + ' Bytes'; + } + if (kilo < 100) { return kilo.toFixed(1) + ' KB'; } diff --git a/front/src/less/rule.less b/front/src/less/rule.less index db20709..ce3bd5c 100644 --- a/front/src/less/rule.less +++ b/front/src/less/rule.less @@ -176,16 +176,18 @@ } } -.colorPalette { - width: 30em; - border: 2px solid #000; - text-align: left; - +.checker { /* Checkerboard background */ background-color: #ddd; background-image: linear-gradient(45deg, #AAA 25%, transparent 25%, transparent 75%, #AAA 75%, #AAA), linear-gradient(45deg, #AAA 25%, transparent 25%, transparent 75%, #AAA 75%, #AAA); background-size:1em 1em; background-position:0 0, 0.5em 0.5em; +} + +.colorPalette { + width: 30em; + border: 2px solid #000; + text-align: left; > div { display: inline-block; @@ -235,4 +237,26 @@ .hugeFile { font-weight: bold; color: #e74c3c; +} + +.imageOffenders { + display: table; + border-spacing: 3em; + width: 90%; + + > div { + display: table-row; + + > div { + display: table-cell; + vertical-align: middle; + } + } + + img { + max-height: 10em; + max-width: 40em; + border: 1px solid #000; + margin-top: 0.5em; + } } \ No newline at end of file diff --git a/front/src/views/rule.html b/front/src/views/rule.html index c2a8c03..d9f1a7f 100644 --- a/front/src/views/rule.html +++ b/front/src/views/rule.html @@ -190,7 +190,7 @@

This is the colors palette, sized by total occurrences:

-
+
{{offender.color}} ({{offender.occurrences}} times)
@@ -213,6 +213,23 @@
+
+

{{rule.value | bytes}} could be saved on

+
+
+
+ Current file: +
+
+
+

Current weight: {{image.original | bytes}}

+

With a lossless optimization:
{{image.lossless | bytes}} (-{{image.original - image.lossless | bytes}})

+

With a lossy optimization:
{{image.lossy | bytes}} (-{{image.original - image.lossy | bytes}})

+
+
+
+
+

{{rule.value}} offenders

Please open the JS timeline diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js index 0701acb..32979ce 100644 --- a/lib/metadata/policies.js +++ b/lib/metadata/policies.js @@ -865,7 +865,7 @@ var policies = { "imageOptimization": { "tool": "weightChecker", "label": "Image optimization", - "message": "

This metric mesures the number of bytes that could be saved by optimizing images.

Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they lie to you because they're generally not very good for optimization. Use specialized tools such as Kraken.io or the excellent ImageOption on Mac.

The tools in use in YellowLabTools are not set to their maximum optimization power, so you might be able to compress even more (the max JPEG quality is set to 85, which should be sufficient for any website).

", + "message": "

This metric mesures the number of bytes that could be saved by optimizing images.

Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as Kraken.io or the excellent ImageOption on Mac. For SVG images, you can use SVGOMG

The tools in use in YellowLabTools are not set to their maximum optimization power, so you might be able to compress even more.

", "isOkThreshold": 30720, "isBadThreshold": 122880, "isAbnormalThreshold": 204800, diff --git a/lib/tools/weightChecker/imageOptimizer.js b/lib/tools/weightChecker/imageOptimizer.js index be0944c..93838f8 100644 --- a/lib/tools/weightChecker/imageOptimizer.js +++ b/lib/tools/weightChecker/imageOptimizer.js @@ -149,10 +149,12 @@ var ImageOptimizer = function() { return deferred.promise; } + // 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); + return (gain > 2048 || (ratio > 0.2 && gain > 100)); } function isJpeg(entry) { diff --git a/lib/tools/weightChecker/weightChecker.js b/lib/tools/weightChecker/weightChecker.js index 8c2fe5a..f718355 100644 --- a/lib/tools/weightChecker/weightChecker.js +++ b/lib/tools/weightChecker/weightChecker.js @@ -140,45 +140,16 @@ var WeightChecker = function() { function listImageNotOptimized(requests) { var results = { totalGain: 0, - byType: { - jpeg: { - totalGain: 0, - requests: [] - }, - png: { - totalGain: 0, - requests: [] - }, - svg: { - totalGain: 0, - requests: [] - } - } + images: [] }; requests.forEach(function(req) { - var type = null; - - switch(req.contentType) { - case 'image/jpeg': - type = 'jpeg'; - break; - case 'image/png': - type = 'png'; - break; - case 'image/svg+xml': - type = 'svg'; - break; - } - - if (type && req.weightCheck.bodySize && req.weightCheck.isOptimized === false) { + if (req.weightCheck.bodySize && req.weightCheck.isOptimized === false) { var gain = req.weightCheck.bodySize - req.weightCheck.optimized; results.totalGain += gain; - results.byType[type].totalGain += gain; - - results.byType[type].requests.push({ + results.images.push({ url: req.url, original: req.weightCheck.bodySize, optimized: req.weightCheck.optimized, diff --git a/test/core/imageOptimizerTest.js b/test/core/imageOptimizerTest.js index 07df3c5..59f5bbf 100644 --- a/test/core/imageOptimizerTest.js +++ b/test/core/imageOptimizerTest.js @@ -309,7 +309,8 @@ describe('imageOptimizer', function() { imageOptimizer.gainIsEnough(20000, 21000).should.equal(false); imageOptimizer.gainIsEnough(20000, 40000).should.equal(false); imageOptimizer.gainIsEnough(20000, 19500).should.equal(false); - imageOptimizer.gainIsEnough(200, 100).should.equal(true); + imageOptimizer.gainIsEnough(250, 120).should.equal(true); + imageOptimizer.gainIsEnough(200, 120).should.equal(false); imageOptimizer.gainIsEnough(2000, 1900).should.equal(false); imageOptimizer.gainIsEnough(200000, 197000).should.equal(true); }); diff --git a/test/core/weightCheckerTest.js b/test/core/weightCheckerTest.js index eb04860..babde1f 100644 --- a/test/core/weightCheckerTest.js +++ b/test/core/weightCheckerTest.js @@ -87,8 +87,7 @@ describe('weightChecker', function() { data.toolsResults.weightChecker.offenders.should.have.a.property('imageOptimization'); data.toolsResults.weightChecker.offenders.imageOptimization.totalGain.should.be.above(0); - data.toolsResults.weightChecker.offenders.imageOptimization.byType.jpeg.requests.length.should.equal(1); - data.toolsResults.weightChecker.offenders.imageOptimization.byType.svg.requests.length.should.equal(1); + data.toolsResults.weightChecker.offenders.imageOptimization.images.length.should.equal(2); done(); })