热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

为网站自动视网膜图像-AutomaticRetinaimagesforwebsites

WiththenewAppleMacBookProwithretinadisplay,ifyouprovideastandardimageonyourwebsit

With the new Apple MacBook Pro with retina display, if you provide a "standard" image on your website, it'll be a little fuzzy. So you have to provide a retina image.

如果你在你的网站上提供了一个“标准”的图片,那么你的网站上就会有一些模糊的东西。所以你需要提供视网膜图像。

Is there a way to automatically switch to @2x images, like iOS (with Objective-C) does? What I've found is: CSS for high-resolution images on mobile and retina displays, but I wish I could find an automatic process for all my images, without CSS or Javascript.

有没有一种方法可以自动切换到@2x图像,就像iOS(使用Objective-C)那样?我发现的是:在移动设备和视网膜上显示高分辨率图像的CSS,但是我希望我能找到一个自动处理所有图像的过程,不需要CSS或Javascript。

Is it possible?

是可能的吗?

UPDATE
I would emphasize this interesting article suggested by @Paul D. Waite and an interesting discussion about it linked by Sebastian.

更新我要强调这篇@Paul D. Waite建议的有趣文章和Sebastian链接的关于它的有趣讨论。

10 个解决方案

#1


112  

There is a new attribute for the img tag that allows you to add a retina src attribute, namely srcset. No Javascript or CSS needed, no double loading of images.

img标签有一个新属性,允许您添加retina src属性,即srcset。不需要Javascript或CSS,不需要重复加载图像。

Browser Support: http://caniuse.com/#search=srcset

浏览器支持:http://caniuse.com/搜索= srcset

Other Resources:

其他资源:

  • WebKit release post
  • WebKit版本发布
  • W3C documentation for srcset
  • W3C文档srcset
  • good explanation about why and how to use srcset
  • 关于为什么和如何使用srcset的很好的解释。
  • Chris Coyer's post for more good info
  • Chris Coyer的文章提供了更多的信息

#2


14  

There are different solutions, each with its own pros and cons. Which one is best for you depends on various factors, such as how your website is designed, what kind of technology your typical visitors are using etc. Note that retina displays are not limited to the Macbook Pro Retina and the coming iMacs, but also include mobile devices, which may have their own needs.

有不同的解决方案,每个都有自己的优点和缺点。哪一个最适合你取决于各种各样的因素,比如你的网站设计,典型的游客正在使用什么样的技术等等。注意,视网膜显示视网膜并不仅限于Macbook Pro和未来的imac,但也包括移动设备,这可能有他们自己的需求。

The problem is also closely related to images in responsive designs in general. In fact, it is probably best to utilize generic responsive design techniques, instead of designing for specific devices. After all, technology will keep changing all the time in the future, too.

这个问题也与一般的反应性设计中的图像密切相关。事实上,最好是利用通用的响应性设计技术,而不是为特定的设备设计。毕竟,技术在未来也会不断变化。

Some of the solutions/discussions I noted:

我注意到的一些解决办法/讨论:

  • Vectors wherever possible including CSS techniques (gradients, rounded corners etc.), SVG and icon fonts.
  • 向量尽可能包括CSS技术(渐变、圆角等)、SVG和图标字体。
  • Serving high resolution ("retina") images, but compress them more (JPEG quality), as suggested by Yoav Weiss, or let the mobile networks compress them when really needed (i.e. when mobile), as suggested by Paul Boag.
  • 提供高分辨率(“视网膜”)图像,但是像Yoav Weiss建议的那样压缩它们(JPEG质量),或者让移动网络在真正需要时(比如移动时)压缩它们,正如Paul Boag所建议的那样。
  • Adaptive Images, a (mostly) server side solution. It is based on a COOKIE storing the screen resolution, a web server configured to serve images from a PHP script, and named script to read the COOKIE and serve the appropriate image.
  • 自适应图像,一个(主要)服务器端解决方案。它基于一个存储屏幕分辨率的COOKIE,一个配置为从PHP脚本中提供图像的web服务器,以及读取COOKIE并提供适当图像的命名脚本。
  • A bunch of possibilities well described and discussed on Smashing Magazine.
  • 《Smashing》杂志很好地描述和讨论了一系列可能性。
  • Serving just slightly higher resolutions to smooth retina portrayal a little, as suggested in a video by Paul Boag.
  • 就像Paul Boag在一段视频中建议的那样,用稍微高一些的分辨率来描绘视网膜的图像。
  • The @1.5x technique on A List Apart is basically the same idea.
  • 清单上的@1.5x技术基本上是相同的。
  • In the near future, the tag may become a solution supported by a W3C working group and even Apple.
  • 在不久的将来, 标记可能成为W3C工作组甚至苹果支持的解决方案。
  • A Javascript technique proposed by Jake Archebald.
  • Jake Archebald提出的一种Javascript技术。
  • An extensive discussion of different techniques on Smashing Magazine and the problem in general.
  • 对粉碎杂志的不同技术和一般问题进行了广泛的讨论。

As the other answers show, there are even more techniques - but probably no best practice, yet.

正如其他答案显示的那样,还有更多的技术——但可能还没有最佳实践。

One thing I wonder is how to test and debug some of these techniques, without having the respective device(s) available...

我想知道的是,如何在没有相应设备可用的情况下测试和调试这些技术。

#3


10  

Here is the less mixin I use to achieve this for background images. retina.js doesn't work for background images if you are using dotLess, since it requires its own mixin which itself uses script evaluation which isn't supported in dotLess.

这里是我用于实现背景图像的较少的混合。视网膜。如果您正在使用dotLess,那么js不支持背景图像,因为它需要自己的mixin来使用dotLess不支持的脚本求值。

The trick with all of this is to get IE8 support. It can't easily do background-size so the base case (non mobile media query) has to be a simple, non-scaled icon. The media query then handles the case of retina and is free to use the background-size class since retina will never be used on IE8.

所有这些的诀窍在于获得IE8的支持。它不容易实现后台大小,所以基本情况(非移动媒体查询)必须是一个简单的、非缩放的图标。然后,媒体查询处理视网膜的情况,并且可以自由地使用背景尺寸类,因为视网膜永远不会在IE8上使用。

.retina-background-image( @path, @filename,@extension, @size )
{
     .background-size( cover );
     background-image: url( "@{path}@{filename}@{extension}" );
         @media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
                only screen and ( -moz-min-device-pixel-ratio: 2 ),
                only screen and ( -o-min-device-pixel-ratio: 2/1 ),
                only screen and ( min-device-pixel-ratio: 2 )
         {
             background-image:url( "@{path}@{filename}@x2@{extension}" );
             background-size:@size @size;
         }
}

Usage sample:

使用示例:

.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );

Ths requires you to have two files:

Ths要求你有两个文件:

  • start_grey-97_12.png
  • start_grey - 97 _12.png
  • start_grey-97_12@2x.png
  • start_grey - 97 _12@2x.png

Where the 2x file is double resolution for retina.

这里的2x文件是视网膜的双分辨率。

#4


9  

Since no one's mentioned the obvious yet, I'll float it out there: where possible, just use SVG. They appear at beautiful retina resolutions with no effort whatsoever.

由于还没有人提到这一点,所以我将它放在那里:尽可能使用SVG。它们出现在漂亮的视网膜分辨率上,毫不费力。

Support for it is good with IE8 being the main dinosaur to worry about. Gzipped file sizes are often better than bitmapped (png/jpg) formats and the images are more flexible; you can reuse them at different resolutions and restyle them if necessary, which saves both development time and download bandwidth.

对它的支持很好,IE8是主要的恐龙。压缩文件大小通常比位图(png/jpg)格式好,图像更灵活;您可以在不同的分辨率下重用它们,并在必要时重新设计它们的样式,这既节省了开发时间,也节省了下载带宽。

#5


6  

Just provide retina images to everyone, and squeeze the image to half its native size inside the image element. Like let's say your image is 400px wide and tall - just specify the image width as 200px to make it look sharp like this:

只需向每个人提供视网膜图像,并将图像压缩到图像元素内原有大小的一半。假设你的图片宽400px,高400px——只要将图片宽度指定为200px,让它看起来像这样:


If your image is photographic, you can probably increase the JPG compression on it without making it look worse, because the JPG compression artifacts probably won't be visible when the image is displayed at 2x: see http://blog.netvlies.nl/design-interactie/retina-revolution/

如果您的图像是照相的,那么您可以增加对它的JPG压缩,而不会使它看起来更糟,因为当图像显示为2x时,JPG压缩构件很可能是不可见的:请参见http://blog.netvlies.nl/design- revolution -interactie/retina- /

#6


1  

if its background images a simple way to do this is:

如果它的背景图像有一个简单的方法,那就是:

    #image { background: url(image.png); }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
           #image { background: url(image@2x.png); background-size: 50%; }
}

another simple way is to use this method:

另一种简单的方法是使用这种方法:

Just replace:

只是替换:


with


#7


1  

I've found this interesting way for providing multiple resolution images.
It actually uses CSS, something I wanted to avoid, and works in Safari and Chrome only.
I'm talking about image-set.

我发现了提供多分辨率图像的有趣方式。它实际上使用了CSS,这是我想避免的,并且只在Safari和Chrome中使用。我说的是图像集。

Here's an example, provided by Apple (here):

苹果(Apple)提供了一个例子:

header {
    background: -webkit-image-set( url(images/header.jpg)    1x,
                                   url(images/header_2x.jpg) 2x);
    height: 150px; /* height in CSS pixels */
    width: 800px; /* width in CSS pixels */
}

I wanna share also these two links:

我也想分享这两个链接:

  • Safari 6 and Chrome 21 add image-set to support retina images
  • Safari 6和Chrome 21增加了支持视网膜图像的图像集
  • The image-set() notation @W3C
  • 图像集()符号@W3C

#8


1  

If you are not frustrated by fear of using java-script then here is a good article http://www.highrobotics.com/articles/web/ready-for-retina.aspx. It has very simple solution.

如果你没有因为害怕使用java脚本而感到沮丧,那么这里有一篇很好的文章:http://www.highrobotics.com/articles/web/press/a.aspx。它有很简单的解。

And the example in JSFiddle is worth a thousand words.

而JSFiddle的例子价值千言万语。

Using:

使用:


JS:

JS:

/* RETINA READY IMG SRC */
function getImgSrc(img, src) {
    var srcResult = src;
    // if high-res screen then change _x1 on _x2
    if (window.devicePixelRatio > 1 && 
        src.indexOf("_x1.")>=0) {
          srcResult = src.replace("_x1.", "_x2.");
    }
    img.Onload= null; //protect from second rasing
    img.src = srcResult;    
}

$(document).ready(function(){
  // fire onload trigger on IMG tags that have empty SRC attribute
  var images = $('img:not([src=""])');
    images.each(function(i) {
        $(this).trigger('onload');            
    });
});

#9


1  

My code snippet does just this. No jQuery required, just use the data-hdimg attribute.

我的代码片段就是这样做的。不需要jQuery,只需使用data-hdimg属性。

https://github.com/ajkochanowicz/High-Res-Images

https://github.com/ajkochanowicz/High-Res-Images

document.addEventListener 'DOMContentLoaded', ->
  HDimgs = document.querySelectorAll '[data-hdimg]'
  (
    image = new Image()
    image.Onload= ->
      console.info 'Image loaded'
      img.src = image.src
      img.style.width = "#{image.width / 2}px"
      img.removeAttribute 'data-hdimg'
    image.Onerror= ->
      console.error 'Could not load image'
    image.src = img.dataset.hdimg
  ) for img in HDimgs

#10


0  

This problem is especially tricky with responsive sites where and image can be of varying width dependant on browser size. Also when dealing with a CMS where multiple editors are potentially uploading 1000s of images it to me seemed unrealistic for me to ask people to upload specially compressed images.

对于响应性网站来说,这个问题尤其棘手,因为这些网站和图片的宽度取决于浏览器的大小。同时,当处理一个可能有多个编辑器上传上千张图片的CMS时,我觉得让人们上传特别压缩的图片是不现实的。

So I wrote a script that takes this into account, it fires at the bottom of the page and on resize finish. Each time taking into account pixel density and the size the image is occupying.

因此,我编写了一个脚本,考虑到这一点,它在页面底部触发并在resize finish上启动。每次考虑像素密度和图像占用的大小。

http://caracaldigital.com/retina-handling-code/

http://caracaldigital.com/retina-handling-code/


推荐阅读
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • 本文介绍了Python语言程序设计中文件和数据格式化的操作,包括使用np.savetext保存文本文件,对文本文件和二进制文件进行统一的操作步骤,以及使用Numpy模块进行数据可视化编程的指南。同时还提供了一些关于Python的测试题。 ... [详细]
  • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
  • {moduleinfo:{card_count:[{count_phone:1,count:1}],search_count:[{count_phone:4 ... [详细]
  • TiDB | TiDB在5A级物流企业核心系统的应用与实践
    TiDB在5A级物流企业核心系统的应用与实践前言一、业务背景科捷物流概况神州金库简介二、现状与挑战神州金库现有技术体系业务挑战应对方案三、TiDB解决方案测试迁移收益问题四、说在最 ... [详细]
  • 1.webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用(1) ... [详细]
  • 本文介绍了如何使用PHP向系统日历中添加事件的方法,通过使用PHP技术可以实现自动添加事件的功能,从而实现全局通知系统和迅速记录工具的自动化。同时还提到了系统exchange自带的日历具有同步感的特点,以及使用web技术实现自动添加事件的优势。 ... [详细]
  • Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ... [详细]
  • 1.RoIPoolingRoIPooling顾名思义对Roi进行Pooling操作,主要用于目标检测任务。RoI(Regionofinterest&# ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • Python爬虫中使用正则表达式的方法和注意事项
    本文介绍了在Python爬虫中使用正则表达式的方法和注意事项。首先解释了爬虫的四个主要步骤,并强调了正则表达式在数据处理中的重要性。然后详细介绍了正则表达式的概念和用法,包括检索、替换和过滤文本的功能。同时提到了re模块是Python内置的用于处理正则表达式的模块,并给出了使用正则表达式时需要注意的特殊字符转义和原始字符串的用法。通过本文的学习,读者可以掌握在Python爬虫中使用正则表达式的技巧和方法。 ... [详细]
  • 本文介绍了如何在使用emacs时去掉ubuntu的alt键默认功能,并提供了相应的操作步骤和注意事项。 ... [详细]
  • python3 nmap函数简介及使用方法
    本文介绍了python3 nmap函数的简介及使用方法,python-nmap是一个使用nmap进行端口扫描的python库,它可以生成nmap扫描报告,并帮助系统管理员进行自动化扫描任务和生成报告。同时,它也支持nmap脚本输出。文章详细介绍了python-nmap的几个py文件的功能和用途,包括__init__.py、nmap.py和test.py。__init__.py主要导入基本信息,nmap.py用于调用nmap的功能进行扫描,test.py用于测试是否可以利用nmap的扫描功能。 ... [详细]
author-avatar
杰仔
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有