个人中心
gpt4 book ai didi

image - 为什么 Google PageSpeed 提示 Retina 图像？

转载 作者：行者123 更新时间：2023-12-04 16:14:15 26 4
gpt4 key购买 nike

我正在开发响应式网站。我有为屏幕尺寸加载正确图像尺寸的代码。

我面临的问题是我在某些移动设备上使用 Retina 图像。这意味着客户端下载的图像具有更大的尺寸。现在谷歌页面速度现在提示说我应该优化我的图像。但问题是，如果我减小图像的大小，我会降低视网膜显示的质量。

Google Pagespeed 不支持 Retina 图像吗？有没有办法告诉 Google Pagespeed 那些是视网膜图像？

或者 Google 是否有针对 Retina 图像的最佳实践？

最佳答案

我发现 Google PageSpeed 在最好的时候有点不稳定。我将测试结果为 88/100 的结果，然后 5 分钟后结果为 95/100，并且没有任何变化。

我认为 Google PageSpeed 的最佳做法是确保您:

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 对任何静态图像进行编码，您可以直接将它们编码到它们的 img 标签中，这样您仍然可以在它们上使用缩放 CSS 代码，而不必处理诸如丢失或错误设置过期 header 之类的问题。 (当您还在 Apache 服务器上运行 Google mod_pagespeed 时，这是一个问题。)

3) 在上传之前压缩所有其他图像，无论它们的类型如何。

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");
};

除了使用雅虎的 Yslow 进行测试之外，不要担心。你会为了达到 100/100 的效果而拔出几天的头发，而这些工具并不完美。尽你最大的努力，把你学到的东西带到下一个项目中。

关于image - 为什么 Google PageSpeed 提示 Retina 图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25388655/

26 4 0
文章推荐： xcode - 键盘无响应
文章推荐： jenkins - 让 jenkins 通过 sendmail 发送电子邮件
文章推荐： django - Django rest-framework DjangoModelPermissions允许任何经过身份验证的用户的问题
文章推荐： laravel - Vagrant 失败与Laravel : 'The SSH command responded with a non-zero exit status'
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com