Sprites(国内称之为雪碧图)，平常很多时候都是依赖于手工在制作软件中完成，或者依赖于第三方插件自动生成Sprites图。这样虽能实现雪碧图，但在来很多工作量。如果你开始使用Sass或者Compass，你可以发现他们有一个强大的功能，可能使用Sass的mixins自动生成雪碧图。特别是在Retina显屏的时代，使用Sass的mixins生成雪碧更让我们前端人员变得轻松。这篇Evanshajed的《Sass Mixins Icons Sprite with Retina Support》所译，在文章中详细介绍了如何使用Sass的Mixins自动生成普通显屏和Retina显屏的雪碧图。希望这篇文章对大家有所帮助。

Sprites熟悉的人较多，在国内有有称之为精灵，也有人称之为雪碧，我个人更喜欢称之为Sprites图像。在一张图上集成了很多个图，然后通过background-position定位，达到背景图显示正确的效果，减少Http的请求个数，从而优化性能。而background-size来说，如果你没有接触过CSS3方面的相关知识，那可能会比较陌生，不知道如何使用，其实很简单，就是通过这个属性来改变背景图片的大小。很神奇吧。那么，为什么 这两个东东就跟Retina屏幕设备扯上了关系呢？要是你有了解过Retina，你就知道是为什么了，要是你从未了解过，也无需担心，继续阅读这篇博文，你就知道为什么了。

Retina相关的教程在W3cplus上也可以找到一些了，这些教程大部分都是根据国外介绍Retina优秀的博文所译，虽然有些地方译得并不恰当，但对于帮助初学者了解Retina是什么，我想还是有所帮助的。特意把Jeremy Worboys的Retina Images推荐给大家。从名称上就知道，这个Retina Images就是为Retina技术而生，是的，在官网中详细介绍了如何让你的站点图像能在Retina屏幕设备下得到支持，让你的图像在Retina屏幕设备下显示的清晰细腻。提高用户的视觉效果。今天把Retina Images官网上的内容译成中文放在W3cplus上与大家分享。

最近一直在学习Retina屏幕下图片的处理方法，从《走向视网膜（Retina）的Web时代》一文中知道了Retina这个新名词，同时知道了他是什么东东，同时也继续在探讨Retina方面的知识点，随后在《移动Web——CSS为Retian屏幕替换图片》和《使用css sprites来优化你的网站在Retina屏幕下显示》中学习了Retina屏幕下图片的设置方法，或者说技巧吧，接下来《Web设计师如何制作Retina图像》学习了Retina屏幕下的图片制作技巧。其实可以说，这几篇文章可以让我知道如何在Retina屏幕下处理图片的技巧和细节了。因为这几篇文章从概念到制作Retina屏蔽下的图片，以及Coding实现，可以说是一条龙了。这些都是自以为事，为什么呢？除了这些方法，其实还有更先进的方法，这也就是我接下来要说的事情了。

CSS Sprites技术在Web页面上的运用是相当的广泛，早在八年前就已开始流行，他不但让可以减少http的请求数量，还可以减少你的代码量，易于维护。但是今天并不是来说CSS Sprites如何使用，因为如何制作CSS Sprites图，怎么运用到Web页面中，做为前端人员来说并不陌生。这篇文章想和大家借助Maykel的《Using CSS Sprites to optimize your website for Retina Displays》文章来学习Retina下如何使用CSS Sprites图片，或者说使用CSS Sprites能给Retina屏幕设备下的Web页面带来什么好处？如果你对这个话题也感兴趣的话，不仿花几分钟时间看看，因为这篇 文章就是用了一个简单的实例，阐述了如何在Retina屏幕下使用CSS Sprites图片，希望对您有所帮助。

最近一直在想法设法的了解和学习有关于Retina方面的知识，几天下来，稍有些许的了解，知道了他是一个什么东东，当我译完《走向视网膜（Retina）的Web时代》后，让我知道了前端有这么一个新概念的知识，也让我感觉到自己了解行内新知识太慢，不得不感到鸭梨山大，同时译完《移动Web——CSS为Retian屏幕替换图片》后，我知道了怎么在移动端（iPhone/iPod/IPad等苹果移动终端）上控制Retina图像。但问题也同时延伸出来了，做为一名\Web前端从业者来说，仅知道怎么使用还不行呀，如果需要适合于Retina设备的图像怎么处理呢？还好，在网上看到了Chris Spooner写的《How to Create Retina Graphics for your Web Designs》，这篇文章虽然介绍的简单，但对我们Web前端人员很实用，简单的告诉了我们要如何制作图片，同时还告诉我们如何处理Retina设备下所需的图片。有兴趣的同学可以花几分钟过一回。

移动端的Web开发是一个热门的话题，由于移动端的普及，以后互联网上她将是会是主流，取代PC端的霸主之位。做为前端开发人员，很有必要的去了解并掌握移动Web的开发与制作。今天这篇教程主要是介绍Retina设备下的图片处理技术，正如《走向视网膜（Retina）的Web时代》一文所言，普通图片在Retina设备下显示将会变得模糊（图片在Retina设备下像素放大了两倍），所以为了能让用户在Retina设备（如iPhone 5, New iPad,Galaxy Nexus等设备）浏览的图片能清晰，满足用户的体验，Web前端人员需要学习并掌握如何处理这些问题，这对于Web前端人员来说是一个新的课题，也是一个新的挑战。今天跟着Stéphanie Walter的《The Mobile Web: CSS Image Replacement for Retina Display Devices》一文学习了几种在移动端的Retina屏幕下处理图片的方法，觉得蛮好的，特意花了一个晚上时间将其转译为中文，希望对有着同样爱好与兴趣的同学有所帮助，如果有译的不对之处，烦请指正，或者大家可以阅读原文，你会有更深的体会（因为本人的EN是三脚毛功夫，莫怪（^_^））。

Retina对我来说是一个全新的概念。初次接触还不知道是什么意，后来翻译后才知道“视网膜”，在互联网上海量搜索一翻，这是我们前端的一个新知识点——视网膜Web。的确是个NB的新事物，我一开始看简直不知道是什么东西，后来慢慢的看了一些专业术语，结合业务的高人写的博客，总算是对其有一点点的了解。同时把这几天看的东西做了一下学习笔记，希望对一些新接触 Retina的同学有许些的帮助。（因为自己对这一块知道的不多，有可能有写错的地方，希望这些地方不会误人子弟，罪过罪过），更希望有错的地方能得到同行朋友的指正。