{"id":16932,"date":"2012-05-11T07:39:32","date_gmt":"2012-05-11T14:39:32","guid":{"rendered":"http:\/\/css-tricks.com\/?p=16932"},"modified":"2023-02-10T14:07:33","modified_gmt":"2023-02-10T22:07:33","slug":"which-responsive-images-solution-should-you-use","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/which-responsive-images-solution-should-you-use\/","title":{"rendered":"Which responsive images solution should you use?"},"content":{"rendered":"

There are a bunch of techniques going around for dealing with responsive images<\/strong> lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques<\/a>.<\/p>\n

The spreadsheet has the data, but let’s digest it through thinking about it through the lens of practical questions.<\/p>\n

<\/p>\n

To choose which technique is right for you and your project these questions may help as a guide. Many of the questions may apply to your project, so you’ll have to sort out which techniques fit what scenarios and find the overlap.<\/p>\n

Do I have legacy content?<\/h3>\n

Which really means… do I have legacy content that is impractical to update?<\/strong> For instance, I have thousands of pages of content on CSS-Tricks and a writing staff of one.<\/p>\n

\"\"
Yeahhhh… I’m not going to go back and update every <img \/><\/code> on the site, so I need a technique that will allow me to leave those alone.<\/figcaption><\/figure>\n

The only technique I know of that works with absolutely no markup changes is Adaptive Images<\/a>. It works by routing requests for images through a PHP file which intelligently serves (and creates if need be) images of the appropriate size for the screen width.<\/p>\n

Another question to ask yourself is if you care about legacy content. Perhaps the vast majority of traffic to your site is for newer content in which you can<\/strong> make markup changes and thus take advantage of other techniques. If that’s the case, read on to discover those other techniques.<\/p>\n

If you have a small project, a brand new project, or a project with legacy content that you are able go back and update, you are also able to choose a technique which does require special markup, so also read on.<\/p>\n

Do I care about special markup?<\/h4>\n

This is really a sub-question of the above. Many of the techniques require you to use special HTML. For example, HiSRC<\/a> has you put higher resolution images as data-attributes:<\/p>\n

<img src=\"200x100.png\" data-1x=\"400x200.png\" data-2x=\"800x400.png\" \/><\/code><\/pre>\n
I’d say this is a clean, valid, semantic technique, but it also means that you need these attributes on every <img \/><\/code> on your site, which may not be possible on sites with loads of legacy content.<\/p>\n
If you know that special markup (or specialized CSS) is not an option for you, really the only option is Adaptive Images<\/a>. Even Sencha.IO<\/a> requires prefixing the src attribute which may not be possible with legacy content.<\/p>\n
Do I care about semantics?<\/h3>\n
Some responsive images techniques involve markup which isn’t strictly semantic. Ultimately, there is only one way an image can be semantic. That is if the src<\/code> of it points to a real image and it has alt<\/code> text describing that image. Brad Frost sums it up nicely:<\/p>\n
@stowball<\/a> Unfortunately its not that simple. A picture of a horse needs to be a picture of a horse or else its not a picture of a horse. :)<\/p>\n
\u2014 Brad Frost (@brad_frost) April 5, 2012<\/a><\/p><\/blockquote>\n