Image resolution and WordPress

A brief presentation on options for using WordPress to produce images suitable for different screen sizes and resolutions, delivered at the Edinburgh WordPress Meetup on Wednesday 17 September.

1. image resolution and wordpress Justin Reynolds, 17 September 2014
2. about me ! Web designer, copywriter and blogger. ! analogue76.com metropolis2520.com j@justinreynolds.co.uk @justinlucent
3. synopsys ! The web is a communications medium designed for the presentation of text and resolution independent images. ! Since the advent of the mobile web, and hi-res devices, the use of bitmap images has become problematic.
 
 There are workarounds. This presentation will discuss a couple of them, and how WordPress can be configured to make the task of serving bitmap images easier.
4. problem 1: multiple screen sizes
5. <img src = ‘mars_surface.jpg’ width=‘700’ height=‘350’ alt=‘Martian surface’>
8. img {max-width: 100%};
9. problem 2: multiple resolutions
11. Display resolution refers to the total number of pixels available on a screen. A device pixel (or physical pixel) is the tiniest physical unit in a display. ! Pixel density refers to the number of pixels that fit into a fixed amount of space. It is most often given as pixels per inch (ppi) or dots per inch (dpi). ! A CSS pixel is an abstract unit used by browsers to precisely and consistently draw web content on devices with different display resolutions and pixel densities. On standard-density displays, one CSS pixel corresponds to one device pixel. But...
12. Source: ‘Retinafy your websites & apps’, Thomas Fuchs device pixels per inch iMac 27” 100 to 110 Original iPad 130 HTC Wildfire 160 ‘Retina’ iPad 264 ‘Retina’ iPhone 326 HTC One 468
13. one device pixel no longer equals one css pixel ! When a bitmap image is displayed at full size on a standard- density display, one bitmap pixel corresponds to one device pixel, resulting in a full-fidelity representation. ! But because a bitmap pixel can’t be further divided, it gets multiplied by four on Retina displays to preserve the same physical size of the image, losing detail along the way.
14. Source: ‘Towards a Retina Web’, Reda Lemeden, http://bit.ly/MH1bjq
15. Source: ‘Towards a Retina Web’, Reda Lemeden, http://bit.ly/MH1bjq
19. this is only an issue for bitmap images that appear in the body of a page. it does not apply to these: ! Background images: different resolutions can be served through CSS media queries. ! Vector images: logos and other vectors should be served as SVG files, for which there is now sufficient browser support.
20. solution 1: compressive images
24. solution 2: picturefill
25. <picture> <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)"> <source srcset="examples/images/large.jpg" media="(min- width: 800px)"> <img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </picture>
27. picturefill can be added manually...
29. Original (2000 x 1000): mars_surface.jpg
30. Large x2: mars_surface-1400x700.jpg
31. Large x1: mars_surface-700x350.jpg
32. Medium x2: mars_surface-600x300.jpg
33. Medium x1: mars_surface-300x150.jpg
34. Thumbnail x2 mars_surface-300x300.jpg
35. Thumbnail x1 mars_surface-150x150.jpg
37. resources
38. ‘Compressive images’, Justin Reynolds, http://www.analogue76.com/blog/entry/ compressive_images ! ‘Hassle free responsive images for WordPress’, http://css-tricks.com/hassle-free-responsive- images-for-wordpress/ ! ‘Retinafy your web sites & apps’, Thomas Fuchs, http://retinafy.me/ ! ‘Towards a Retina Web’, Reda Lemeden, http://bit.ly/MH1bjq ! Picturefill HTML element, http://www.smashingmagazine.com/2014/05/12/picturefill-2-0- responsive-images-and-the-perfect-polyfill/ ! Picturefill.js polyfill, http://scottjehl.github.io/picturefill/ ! PicturefillWP plugin, https://wordpress.org/plugins/picturefillwp/ ! WP Retina plugin, https://wordpress.org/plugins/wp-retina-2x/ !