Screencast #133: Figuring Out Responsive Images. Picturefill 2.0: Responsive Images And The Perfect Polyfill. Advertisement Not since the early days of web standards have I seen our community rally around a seemingly small issue: responsive images. Over the last four years (yeah, it’s been about four years), we’ve seen many permutations of images in responsive design. From the lazier days of setting max-width: 100% (the absolute minimum you should be doing) to more full-featured JavaScript implementations, such as Picturefill and Zurb’s data-interchange method, we’ve spent a lot of time spinning our wheels, banging our heads and screaming at the wall.
I’m happy to say that our tireless journey is coming to a close. The State Of Responsive Images In our search for the holy grail of serving the right image to the user, our attitude towards browser makers until now has largely been, “Forget you — we’ll do it ourselves.” The difference between a CSS transition and a responsive image is, of course, how they degrade.
That really isn’t the case with images. Resource Problems The Introduction of srcset <! Responsive Images: Experimenting with Context-Aware Image Sizing. 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. Application developers need to support a range of pixel densities, which can be quite challenging. On the mobile web, the challenges are compounded by several factors: 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). Pixels on the web Heavily compressed HiDPI image. 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).
Agreement to then consider srcset + viewport size after some implementation experience (possibly drop height syntax from srcset spec). If not implemented, Width/Height syntax to possibly be marked at risk in srcset spec. What the meeting was about Responsive Images can be broken down into three main use-cases: For the last couple of years, various folks have been working towards finding a way to bring responsive images to the Web. 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. Determining viewport-appropriate sources is handled through media attributes as expected, while serving that viewport-appropriate source at the correct resolution is done with srcset. A native implementation would allow us to apply the original intrinsic dimensions of the 1x source to the higher-resolution sources rather than simply delivering an image twice the size. Does not perform any resolution switching. 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. 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? Responsive images are a small part of the responsive design methodology, which aims to adapt a website so it works optimally within known environmental constraints.
Display dimensions Display quality (pixel density, colour capability) Connectivity (network conditions) Input types (touch, mouse, keyboard) The problem with responsive images A designers methodology The limits of our tools. Adaptive Images in HTML. Joshje/Responsive-Enhance ? GitHub. 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. Designing for the Retina display. 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.