Why is Google PageSpeed complaining about Retina images?

Asked 19/8, 2014 at 16:36 Answered 29/8, 2018 at 1:28

I am working on responsive website. I have code that loads the right image size for the screen size.

The problem I am facing is that I am using Retina images for some of the mobile devices. Meaning that the images downloaded by the client have a bigger size. Now Google pagespeed is now complaining saying that I should optimize my images. But the problem is if I reduce the size of the images I will loose the quality for the retina display.

Doesn't Google Pagespeed support Retina images? Is there a way to tell Google Pagespeed that those are retina images?

Or is there a best practice from Google for Retina images?

Intercourse answered 19/8, 2014 at 16:36 Comment(0)

-1

I to have found Google PageSpeed to be a little flaky at the best of times. I'll test something that comes out 88/100 and then 5 minutes later it's 95/100 and nothing changed.

I think the best practice when it comes to Google PageSpeed is make sure you:

1) Have a perfectly engineered header which touches on all the little things Google likes to see.

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Favicons -->
    <link rel="shortcut icon" href="/img/icons/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/img/icons/favicon.ico" type="image/x-icon">

    <!-- App Screen / Icons -->
    <!-- Specifying a Webpage Icon for Web Clip
        Ref: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
    <link rel="apple-touch-icon" href="/img/icons/sptouch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/img/icons/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/img/icons/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/img/icons/touch-icon-ipad-retina.png">

    <!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Startup image for web apps -->
    <link rel="apple-touch-startup-image" href="/img/icons/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    <link rel="apple-touch-startup-image" href="/img/icons/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="/img/icons/iphone.png" media="screen and (max-device-width: 320px)">

    <!--
    HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries.
    WARNING: Respond.js doesn't work if you view the page via file://
    -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

2) Base64 encode any static images you can directly into their img tags so you can still use scaling CSS code on them and never have to deal with issues like missing or incorrectly set expires headers. (Which is an issues when your also running Google mod_pagespeed on your Apache server.)

3) Compress the heck out of all your other images regardless of their type before uploading.

4) Use an onload JavaScript function at the bottom of your page to load all CSS and JS files like this.

window.onload = function(){
    function loadjscssfile(filename, filetype) {
        if(filetype == "js") {
            var cssNode = document.createElement('script');
            cssNode.setAttribute("type", "text/javascript");
            cssNode.setAttribute("src", filename);
        } else if(filetype == "css") {
            var cssNode = document.createElement("link");
            cssNode.setAttribute("rel", "stylesheet");
            cssNode.setAttribute("type", "text/css");
            cssNode.setAttribute("href", filename);
        }
        if(typeof cssNode != "undefined") {
            var h = document.getElementsByTagName("head")[0];
            h.parentNode.insertBefore(cssNode, h);
        }
    }
    loadjscssfile("//fonts.googleapis.com/css?family=Open+Sans:300&amp;subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese", "css");
    loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css", "css");
    loadjscssfile("/css/style.css", "css");
    loadjscssfile("//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", "js");
    loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js", "js");
};

Beyond that test using Yslow from Yahoo and don't sweat it. You will pull your hair out for days trying to get 100/100 and these tools are not perfect. Just do your best and take what you learn with you onto the next project.

Devious answered 19/8, 2014 at 17:13 Comment(1)

This is useful information but it does not answer the question regarding retina images and the penalty Google PageSpeed assesses for serving them. – Upend 10/9, 2014 at 20:6

PageSpeed now supports retina images if you use the srcset attribute:

<img style="height: 100px" 
    src="rex_1x.png"
    srcset="rex_1x.png 1x, rex_2x.png 2x"
    alt="My dog Rex"/>

In the above example, rex_1x.png would be a 100 x 100px image and rex_2x.png a 200 x 200px image.

Using this code, PageSpeed won't complain about the image.

Mullane answered 29/8, 2018 at 1:28 Comment(0)

-1