Adapt Oversized Images detection to our new screen resolutions

lib/metadata/policies.js

@@ -803,7 +803,7 @@ var policies = {
     "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 reducing their size.</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>",
+        "message": "<p>This is the number of images with a width >1200px on mobile, >1800px on tablet, >2400 on desktop, >3200px on HD desktop. Try reducing their size.</p><p>Please ignore if the file is used as a sprite.</p>",
         "isOkThreshold": 0,
         "isBadThreshold": 5,
         "isAbnormalThreshold": 10,

lib/tools/phantomas/phantomasWrapper.js

@@ -18,6 +18,8 @@ var PhantomasWrapper = function() {
         var task = data.params;
 
         var viewportOption = null;
+        // Setting screen dimensions for desktop devices only.
+        // Phone and tablet dimensions are dealt by Phantomas.
         if (task.options.device === 'desktop') {
             // Similar to an old non-retina Macbook Air 13"
             viewportOption = '1280x800x1';
@@ -46,26 +48,7 @@ var PhantomasWrapper = function() {
 
             // Mandatory
             'analyze-css': true,
-            'ignore-ssl-errors': true,
-            /*'skip-modules': [
-                'ajaxRequests', // overridden
-                'domHiddenContent', // overridden
-                'domMutations', // not compatible with webkit
-                'domQueries', // overridden
-                'events', // overridden
-                'filmStrip', // not needed
-                'har', // not needed for the moment
-                'javaScriptBottlenecks', // needs to be launched after custom module scopeYLT
-                'jQuery', // overridden
-                'jserrors', // overridden
-                'lazyLoadableImages', //overridden
-                'pageSource', // not needed
-                'windowPerformance' // overridden
-            ].join(','),*/
-            /*'include-dirs': [
-                path.join(__dirname, 'custom_modules/core'),
-                path.join(__dirname, 'custom_modules/modules')
-            ].join(',')*/
+            'ignore-ssl-errors': true
         };
 
 

lib/tools/redownload/redownload.js

@@ -144,8 +144,7 @@ var Redownload = function() {
                 metrics.imageOptimization = offenders.imageOptimization.totalGain;
 
                 // Image width
-                var isMobile = data.params.options.device === 'phone';
-                offenders.imagesTooLarge = listImagesTooLarge(results, isMobile);
+                offenders.imagesTooLarge = listImagesTooLarge(results, data.params.options.device);
                 metrics.imagesTooLarge = offenders.imagesTooLarge.length;
 
                 // File minification
@@ -359,13 +358,20 @@ var Redownload = function() {
         return results;
     }
 
-    function listImagesTooLarge(requests, isMobile) {
+    function listImagesTooLarge(requests, device) {
         var results = [];
 
         requests.forEach(function(req) {
+            const thresholds = {
+                'phone': 1200,
+                'tablet': 1800,
+                'desktop': 2400,
+                'desktop-hd': 3200
+            };
+
             if (req.weightCheck.bodySize > 0 && 
                 req.imageDimensions &&
-                ((isMobile && req.imageDimensions.width > 800) || req.imageDimensions.width > 1500)) {
+                req.imageDimensions.width > thresholds[device]) {
 
                 results.push({
                     url: req.url,