Retina.js | Retina graphics for your website How it works When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server. For example, if you have an image on your page that looks like this: <img src="/images/my_image.png" /> The script will check your server to see if an alternative image exists at this path: "/images/my_image@2x.png" How to use JavaScript The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). Place the retina.js file on your server Include the script on your page <script type="text/javascript" src="/scripts/retina.js"></script> (put it at the bottom of your template, before your closing </body> tag) That's it! Steps: Download Download zip Download source Contribute
Website-Bilder für das Retina Display optimieren | HTML5 Mobile Erstellt man Websites und betrachtet sie zum ersten Mal z.B. auf einem iPhone 4/4s, stellt eventuell man fest: Manche Bilder sind irgendwie nicht richtig scharf! Die Ursache ist einfach erklärt: Im Falle der Apple-Geräte (ab iPhone 4) haben diese das sogenannte Retina-Display mit sehr hoher Pixeldichte, die „normale” Bilder vergleichweise unscharf aussehen lässt, wenn man diese mit „optimierten” Bildern vergleicht. Im Folgenden deshalb zwei Möglichkeiten, wie man recht einfach Bilder mit höherer Auflösung integrieren kann, die dann deutlich besser aussehen. Retina-Optimierung für das HTML-Element (img) Das Prinzip, um ein Bild mithilfe des img-Elements für das hochauflösende Display zu verbessern, ist einfach: Man erstellt die Bilddatei mit den doppelten Maßen (z.B. 248×220 statt 124×110), zeigt sie jedoch in der einfachen Größe (124×110) an. Der Faktor 2 ergibt sich übrigens aus den Vorgaben des Herstellers und ist somit (eigentlich) speziell für Apple iPhone und iPad.
Adaptive Images in HTML Responsive images: what's the problem, and how do we fix it? By Matt Wilcox Introduction Responsive images is a surprisingly complicated topic, and one that's been steadily gaining attention over the last year as more developers discover they need them and then discover there's no good solution yet. This article aims to give an overview of the problem itself, and show the different proposals in the works to address it. So, grab a brew, buckle up, and set your brain to concentrate — there's only so much condensing of a year's effort and thought an author can do... Responsive image context First of all we need to establish some context: what is it we want to do, and why? Display dimensions Display quality (pixel density, colour capability) Connectivity (network conditions) Input types (touch, mouse, keyboard) By adapting a design to these conditions we aim to provide the best clarity of content, ease of use, load times, and device performance for any given user. How this is done is managed differently in the three different languages of the web. srcset
Brett Jankord – Cross Browser Retina/High Resolution Media Queries fantasai, Ben Frain, and Peter Gasston have all written about this topic before, though I still see a lot developers using verbose media queries for retina/high resolution displays so I figured I would write up my own post. Most developers are currently writing retina/high resolution media queries similar to the examples below: This media query example is from 37signals article on retina images and scss. It is based on the one in Thomas Fuchs’ Retinafy book but, it has been modified to define the Google Nexus 7 with it’s 1.3 pixel ratio as a retina-capable device. @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { /* Retina-specific stuff here */ } Chris Coyier has a retina display media query example that looks like this: What’s wrong with the above solutions Nothing really, though they could be a lot cleaner. IE is using standards, this is new Update Opera Mini
Wilto/picturefill-proposal scottjehl/picturefill Picturefill For more info: see project home. This markup pattern is further detailed in the original proposal by Florian Rivoal. This syntax combines the resolution switching of srcset with picture’s ability to tailor sources to the viewport. This has a couple of major benefits over the originally-propsed picture element: Less verbose and more readable syntax, especially considering the vendor prefixing that comes along with min-device-pixel-ratio. Does not perform any resolution switching.
Responsive Images Community Group Meeting report On Tuesday, the 10th September, 2013 various W3C members and folks from the developer community got together at Mozilla’s Paris offices to try to agree on a way forward for responsive images. As no official minutes were taken during the meetup, this meeting summary is based on the following unofficial notes and blog posts from attendees: Many thanks to the authors above for allowing their text to be reused here. Meeting outcomes Browser vendors agree that srcset + DPR-switching is the right initial step forward (i.e., the 2x, 3x, etc. syntax). What the meeting was about Responsive Images can be broken down into three main use-cases: DPR Switching: Serving higher res images only to devices with higher device pixel ratio (aka Retina devices).Viewport Switching: Serving smaller images to smaller or lower-resolution screens.Art Direction: Serving a different (often cropped) version of an image to a smaller screen, highlighting the important parts given the smaller space.
High DPI Images for Variable Pixel Densities Introduction One of the features of today's complex device landscape is that there's a very wide range of screen pixel densities available. Some devices feature very high resolution displays, while others straggle behind. Large variety of devices with different form factors.Constrained network bandwidth and battery life. In terms of images, the goal of web app developers is to serve the best quality images as efficiently as possible. Avoid images if possible Before opening this can of worms, remember that the web has many powerful technologies that are largely resolution- and DPI-independent. That said, you can't always avoid raster images. Background A very short history of display density In the early days, computer displays had a pixel density of 72 or 96dpi (dots per inch). Displays gradually improved in pixel density, largely driven by the mobile use case, in which users generally hold their phones closer to their faces, making pixels more visible. Pixels on the web Use CSS media queries