html - 网络开发中的 Retina 设备 : Do I still need to have 2x images?

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');

});

这完全取决于您在做什么 - 目前还没有 Elixir 。每个图像的上下文都是如此独特。我的目标是让每个尺寸都达到标准——在导出时在 Photoshop 中将图像压缩到 40……将它们的尺寸加倍，然后 parent 将它们压扁以用于视网膜。在大多数情况下，尺寸实际上更小。

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