Images: svg, responsive images, lazy loading

[zrothauser]

Image handling is a subject that has become more complex recently, as responsive images are now more widely supported and are encouraged to support newer retina devices and to save bandwidth for mobile users. I think it would be worthwhile to have a section under Markup that deals with how we should implement images on sites.

I have a very rough draft here on what this section could include, and I'd like to get some more input on this before creating a pull request:

Responsive Images

10up recommends the use of SVG (with an icon font fallback as needed) to serve high-resolution assets at the smallest file size possible. When using SVG you should always provide a fallback such as a PNG image for browsers that do not support vector graphics. [this sentence was moved from Progressive Enhancement section]

For user-uploaded content images, responsive images should be used in order to serve both high-resolution images to high-density devices and to avoid sending unneeded data to mobile devices. To follow the latest standards, responsive images should be served with srcset rather than <picture>, as long as the same image is being served at multiple sizes. If different images are being served at different resolutions, then <picture> should be used.

At this time, not even all current browsers don't support the complete srcset syntax, so the Picturefill polyfill is recommended to support the standard syntax. This is an exception to our guideline of using only the polyfills for features that are functionally critical to the site.

An example is shown below:
https://gist.github.com/zrothauser/a8e27f68d4ccdfb9881c

which would result in a syntax of:
https://gist.github.com/zrothauser/a58d1d3cf4cc3f285a85

Lazy Loading

In order to save on bandwidth, lazy loading images is recommended for archive pages or any page with a series of images.
[elaborate on this? or do we need this section?]

Image Sizes

The fewest image sizes needed should be defined with add_image_size to avoid adding too much time to the upload process and to avoid using too much server space. However, most images should include a doubled size (e.g., 'home-thumbnail-double' to go with 'home-thumbnail') to supply a high-density image for srcset images.

[do we want to recommend Photon from Jetpack on non-VIP sites? It's included on VIP]

[are there any other subsections we could add to this?]

[TheLastCicada]

I've found lazy loading to be fraught with peril. It can be implemented well and give a performance boost, but it can also be a performance drag if the site is already very javascript heavy. There are situations where it can be tricky to get the desired effect. If we're going to recommend lazy loading, I'd like to see a more in depth coverage of the topic and methods to achieve this.

[dana-ross]

Is a PNG fallback really necessary anymore? SVG is pretty widely supported outside of IE8.

[jonathantneal]

Zack, great work getting this conversation started.

IE8 hits EOL from Microsoft on Jan. 12, 2016. However, I’m working on a new reskin of a site that must support IE8, and I’ll be working on a new site whose audience has more IE usage than Chrome, and more IE8 usage than any other version. I hope we draw a hard line on this soon. In the meantime, as long as it is our policy to support this relic, we could at least mention any tools or markup patterns that will decrease development time.

Use SVG images whenever possible. They are resolution independent, easily styleable with CSS, and often smaller and clearer than other image formats.

When using SVGs as an icon system, combine them into a single sprite sheet that allows individual images be displayed with an ID.

When using SVGs and supporting Internet Explorer 8, provide a fallback, such as a PNG image.

I’ve avoided mentioning icon fonts, since they were a hack resolved by SVGs.

[zrothauser]

Splitting this into #102, #103, and #104 to keep the discussions more focused.

[tlovett1]

I don't want to recommend Jetpack Photon since I think we should remain agnostic there.

Would love to get @tddewey's feedback on all of this.

@zrothauser this is a great start!