Question

我正在为摄影师创建一个网站。遗憾的是，为了保持质量，服务的图片应该至少等于用户的视口。因此，在新的Macbook Pro等Retina设备上，应该有大约1800x2880px的图像。太糟糕了，这些负载非常缓慢。

我目前有一个动态脚本，只需在点击时加载拇指和完整图片。

HTML代码，用于拇指（当点击时，立即显示完整尺寸）：

<a  href="#"
    data-flare-title="All-my-Loving"
    data-flare-width="375"
    class="multiple color"></a>

自动链接拇指src和A href以及更多标签的Javascript：

$(function(){

$('#container #portfolioOverview a').each(function(){

var $link = $(this),
    title = $link.data('flare-title') + '.jpg';
    imgTooltip = $link.data('flare-title');
    imgTip = imgTooltip.replace(/-/g, ' ');
    imgWidth = $link.data('flare-width') + 'px';

$link.attr('href', 'images/portfolio/full/' + title);
$link.attr('data-flare-bw', 'images/portfolio/blackwhite/' + title);
$link.attr('data-flare-thumb', 'images/portfolio/thumbs/' + title);
$link.attr('data-flare-scale', 'fitmax');
$link.attr('data-target', 'flare');
$link.attr('data-flare-gallery', 'portfolio');
$link.addClass('tip');

$link.attr('data-tip', imgTip);

$link.append($('<img>', {
  src     : 'images/portfolio/thumbs/' + title,
  height  : '250px',
  width   : imgWidth
}));

});

});

此行：$link.attr('href', 'images/portfolio/full/' + title);将正确的完整图片链接到拇指。但是，所有这些完整图像的分辨率约为2800x1800px。这些也将加载分辨率为1024x768的屏幕，这会导致较小屏幕的可怕，不必要的慢加载时间

想要解决方案：
据我所知，这可能只是一个 Retina JS脚本或一个 Else声明。

由于Retina JS脚本将自动选择/ images / portfolio / full /文件夹中的“*@2x.jpg”图像，并忽略它们用于非视网膜设备，而ELSE语句将检查视口是否更大比1920x1080。如果确认：提供文件夹'images / portfolio / 2x'中的图像而不是'full'，而'else'将从默认的完整文件夹中提供。

如果我不清楚，请发表评论。提前谢谢！

注意：这应该适用于运行屏幕分辨率高于1920x1080的所有设备，而不仅仅是Apple的设备

Answer 1

您可以在此处找到问题的解决方案。我不会复制和粘贴解决方案。基本思想是使用自定义属性在高分辨率显示器（如视网膜）上提供高分辨率图像。

http://drew.roon.io/retina-images-that-respond

Answer 2

为什么不使用任何响应式图像技术？您可以在http://responsiveimages.org/上找到更多信息。如果您使用https://github.com/JimBobSquarePants/srcset-polyfill之类的polyfill，您已准备好迎接未来。

另一种方法是通过增加图像的尺寸来最小化图像质量。听起来很奇怪，但它确实有效：http://www.netvlies.nl/blog/design-interactie/retina-revolution我有时会使用这种技术，结果即使在视网膜显示屏上，图像也很清晰。

基于媒体查询/视口或“视网膜”修复的JavaScript中的其他声明

2 个答案: