Web 开发中的 Retina 设备：我还需要 2x 图像吗？

Question

很多关于 Retina 设备的信息都来自 2013 年左右，但最近并不多。

似乎，例如在retina.js 中，它包括任何设备像素比> 1.5 的“视网膜”，但现在不是所有智能手机都超过1.5 吗？我的台式电脑也可以。

那么我的问题，为什么不总是提供您可以访问的最高分辨率图像，而不是为“非视网膜”设备创建半尺寸版本，据我所知并不真正存在，也不会因获得更高分辨率的图像而受到太大影响。

谢谢！！！

Answer 1

使用 2x 图像非常痛苦。

谁能知道什么是“最佳”，但我目前正在使用这样的组合图像：

我使用父元素以便图像填充它 - 并且父/或其祖先将确定任何限制。您可以使用图片元素。 （通常，src 由 CMS 或 {{image.small.url}} 等提供。

对您的问题的官方回答是，人们不会为所有内容提供更高分辨率的文件 - 因为文件更大，他们希望网站尽可能快地加载。 / 但是如果您将图像大小加倍（是显示时的两倍，并压缩到 ~40 左右）然后使用父元素来调整它的大小 - 它实际上是一个更小的文件大小。对此有非常具体的研究。不过，我不知道它是如何用于绘画和浏览器渲染的。

标记

<figure class='poster'>
    <img src='' alt=''
        data-small='http://placehold.it/600'
        data-medium='http://placehold.it/1000'
        data-large='http://placehold.it/2000'
    />
</figure>

样式（手写笔）

figure // just imagine the brackets if you want
    margin: 0
    img
        display: block
        width: 100%
        height: auto

.poster
    max-width: 400px

脚本

$(document).on('ready', function() {

    // $global
    var $window = $(window);
    var windowWidth;
    var windowHeight;

    function getWindowDimentions() {
        windowWidth = $window.width();
        windowHeight = $window.height();
    }

    function setResponsibleImageSrc(imageAncestorElement, container) {
        var large = false; // innocent until proven guilty
        var medium = false; // "
        var context;
        if ( !container ) {
            context = windowWidth;  
        } else {
            context = $(container).outerWidth();
        }
        var large = context > 900;
        var medium = context > 550;

        $(imageAncestorElement).each( function() {
            var $this = $(this).find('img');
            var src = {};
            src.small = $this.data('small');
            src.medium = $this.data('medium');
            src.large = $this.data('large');
            if ( large ) {
                $this.attr('src', src.large);
            } else if ( medium ) {
                $this.attr('src', src.medium);
            } else {
                $this.attr('src', src.small);
            }
        });
    };

    $window.on('resize', function() { // this should jog a bit
        getWindowDimentions();
        setResponsibleImageSrc('.poster', 'body');
    }).trigger('resize');

});

这一切都取决于您在做什么 - 目前还没有灵丹妙药。每张图片的背景都非常独特。我的目标是在每种尺寸下都达到标准——在导出时将图像在 Photoshop 中压缩为 40……它们应该是尺寸的两倍，然后父母将它们挤压成视网膜。在大多数情况下，尺寸实际上更小。

CodePen 示例：http://codepen.io/sheriffderek/pen/bqpPra