New rule: oversized images (#276)

New rule: oversized images

lib/metadata/policies.js

@@ -914,6 +914,15 @@ var policies = {
         "hasOffenders": true,
         "unit": 'bytes'
     },
+    "imagesTooLarge": {
+        "tool": "redownload",
+        "label": "Oversized images",
+        "message": "<p>This is the number of images with a width >800px on mobile or >1500px on desktop. Try </p><p>Please ignore if the file is used as a sprite.</p><p>Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset (unless you use a polyfill). This can lead to incorrect detection.</p>",
+        "isOkThreshold": 0,
+        "isBadThreshold": 5,
+        "isAbnormalThreshold": 10,
+        "hasOffenders": true
+    },
     "gzipCompression": {
         "tool": "redownload",
         "label": "Gzip compression",

lib/metadata/scoreProfileGeneric.json

@@ -5,6 +5,7 @@
             "policies": {
                 "totalWeight": 5,
                 "imageOptimization": 2,
+                "imagesTooLarge": 2,
                 "gzipCompression": 2,
                 "fileMinification": 1
             }

lib/tools/redownload/imageDimensions.js

@@ -0,0 +1,51 @@
+var debug               = require('debug')('ylt:imageDimensions');
+var Q                   = require('q');
+var sizeOf              = require('image-size');
+
+var ImageDimensions = function() {
+
+    function getDimensions(entry) {
+        var deferred = Q.defer();
+
+        if (!entry.weightCheck || !entry.weightCheck.bodyBuffer) {
+            // No valid file available
+            deferred.resolve(entry);
+            return deferred.promise;
+        }
+
+        var fileSize = entry.weightCheck.uncompressedSize;
+
+        if (isJPEG(entry) || isPNG(entry)) {
+            try {
+                var dimensions = sizeOf(entry.weightCheck.bodyBuffer);
+                debug('Image dimensions of %s: %sx%s', entry.url, dimensions.width, dimensions.height);
+
+                entry.imageDimensions = {
+                    width: dimensions.width,
+                    height: dimensions.height
+                };
+            } catch(err) {
+                debug('Error while checking image dimensions:');
+                debug(err);
+            }
+        }
+        
+        deferred.resolve(entry);
+
+        return deferred.promise;
+    }
+
+    function isJPEG(entry) {
+        return entry.isImage && entry.contentType === 'image/jpeg';
+    }
+
+    function isPNG(entry) {
+        return entry.isImage && entry.contentType === 'image/png';
+    }
+
+    return {
+        getDimensions: getDimensions
+    };
+};
+
+module.exports = new ImageDimensions();

lib/tools/redownload/redownload.js

@@ -19,6 +19,7 @@ var fileMinifier        = require('./fileMinifier');
 var gzipCompressor      = require('./gzipCompressor');
 var contentTypeChecker  = require('./contentTypeChecker');
 var fontAnalyzer        = require('./fontAnalyzer');
+var imageDimensions     = require('./imageDimensions');
 
 
 var Redownload = function() {
@@ -69,6 +70,8 @@ var Redownload = function() {
 
                 .then(imageOptimizer.optimizeImage)
 
+                .then(imageDimensions.getDimensions)
+
                 .then(fileMinifier.minifyFile)
 
                 .then(gzipCompressor.compressFile)
@@ -142,9 +145,14 @@ var Redownload = function() {
 
 
                 // Image compression
-                offenders.imageOptimization = listImageNotOptimized(results);
+                offenders.imageOptimization = listImagesNotOptimized(results);
                 metrics.imageOptimization = offenders.imageOptimization.totalGain;
 
+                // Image width
+                var isMobile = data.params.options.device === 'phone';
+                offenders.imagesTooLarge = listImagesTooLarge(results, isMobile);
+                metrics.imagesTooLarge = offenders.imagesTooLarge.length;
+
                 // File minification
                 offenders.fileMinification = listFilesNotMinified(results);
                 metrics.fileMinification = offenders.fileMinification.totalGain;
@@ -273,7 +281,7 @@ var Redownload = function() {
     }
 
 
-    function listImageNotOptimized(requests) {
+    function listImagesNotOptimized(requests) {
         var results = {
             totalGain: 0,
             images: []
@@ -305,6 +313,26 @@ var Redownload = function() {
         return results;
     }
 
+    function listImagesTooLarge(requests, isMobile) {
+        var results = [];
+
+        requests.forEach(function(req) {
+            if (req.weightCheck.bodySize > 0 && 
+                req.imageDimensions &&
+                ((isMobile && req.imageDimensions.width > 800) || req.imageDimensions.width > 1500)) {
+
+                results.push({
+                    url: req.url,
+                    weight: req.weightCheck.bodySize,
+                    width: req.imageDimensions.width,
+                    height: req.imageDimensions.height
+                });
+            }
+        });
+
+        return results;
+    }
+
 
     function listFilesNotMinified(requests) {
         var results = {