堆栈内存溢出
  简体   繁体   English

为什么Google PageSpeed抱怨Retina图片？

[英]Why is Google PageSpeed complaining about Retina images?

 原文  2014-08-19 16:36:45  4   2    image/ performance/ pagespeed

问题描述

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. 我面临的问题是我正在为一些移动设备使用Retina图像。 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? Google Pagespeed不支持Retina图像吗？ Is there a way to tell Google Pagespeed that those are retina images? 有没有办法告诉Google Pagespeed这些是视网膜图像？

Or is there a best practice from Google for Retina images? 或者Google是否有针对Retina图像的最佳做法？

2 个解决方案

解决方案1
 0  2018-08-29 01:28:26

PageSpeed now supports retina images if you use the srcset attribute : 如果您使用srcset属性， PageSpeed现在支持视网膜图像： 

<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. 在上面的示例中，rex_1x.png将是100 x 100px图像，rex_2x.png将是200 x 200px图像。

Using this code, PageSpeed won't complain about the image. 使用此代码，PageSpeed不会抱怨图像。

解决方案2
 -1 已采纳  2014-08-19 17:13:10

I to have found Google PageSpeed to be a little flaky at the best of times. 我发现Google PageSpeed在最好的时候有点不稳定。 I'll test something that comes out 88/100 and then 5 minutes later it's 95/100 and nothing changed. 我将测试88/100出来的东西，然后5分钟后出现95/100并且没有任何变化。

I think the best practice when it comes to Google PageSpeed is make sure you: 我认为Google PageSpeed的最佳做法是确保您：

1) Have a perfectly engineered header which touches on all the little things Google likes to see. 1）有一个完美设计的标题，触及谷歌喜欢看到的所有小东西。 

<!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. 2）Base64可以将任何静态图像直接编码到他们的img标签中，这样你仍然可以在它们上使用缩放CSS代码，而不必处理丢失或错误设置过期标题等问题。 (Which is an issues when your also running Google mod_pagespeed on your Apache server.) （当您在Apache服务器上运行Google mod_pagespeed时，这是一个问题。）

3) Compress the heck out of all your other images regardless of their type before uploading. 3）在上传之前压缩所有其他图像，无论其类型如何。

4) Use an onload JavaScript function at the bottom of your page to load all CSS and JS files like this. 4）使用页面底部的onload JavaScript函数加载所有这样的CSS和JS文件。 

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. 除了使用来自雅虎的Yslow进行测试之外，不要冒汗。 You will pull your hair out for days trying to get 100/100 and these tools are not perfect. 你会拔掉头发试图获得100/100并且这些工具并不完美。 Just do your best and take what you learn with you onto the next project. 尽你所能，把你学到的东西带到下一个项目。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Google PageSpeed Insights优化了图像的压缩和调整大小 - Google PageSpeed Insights Optimize Images Compressing and Resizing Google PageSpeed Insights-图像压缩过多 - Google PageSpeed Insights - Too much compressing on images iPad视网膜图像 - 为什么使用两种不同的图像尺寸？ - iPad retina images - Why use two different image sizes? iPhone 5中Retina图像的后缀 - Suffix for Retina Images in iPhone 5 Google PageSpeed 对 Imagify 不满意 - Google PageSpeed not happy with Imagify 下载图像和视网膜显示 - Downloading images and retina display iPad Retina图片没有显示？ - iPad Retina Images not showing? 视网膜图像的延迟加载？ - Lazy loading with retina Images? 在Retina设备上升级图像 - Upscaling images on Retina devices 视网膜iPad上的非视网膜图像 - Non-Retina images on a retina iPad
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM