Responsive Images in Wordpress

Learn the reason behind responsive images. What is high density pixilation? How do I deliver a high-res image based on screen resolution? How does Wordpress help and what can I do to make my blog ready for next generation screens.

Transcript

1. @acodesmith IMAGES without a plugin in Wordpress Responsive
2. @acodesmith OVERVIEW What is Retina or High Density Pixilation? Why Is It Important? WC3 and the Two Adopted Methods. Polyfill and Javascript Requirements. Wordpress Media Library Image Settings. Updating <img> Tags in Post. Fin.
3. @acodesmith WHY NO PLUGIN? Plugins! Get your Plugins! 10 for $1!
4. @acodesmith REALLY UNDERSTAND THE PROBLEM. REALLY UNDERSTAND THE SOLUTION. “if you know Thy enemies, You know Thy self” -Sun Tzu
5. @acodesmith SMALLER BOOTSTRAP FEWER SECURITY ISSUES “WordPress.org can be a blessing or a curse — it is without doubt a tool that should be used with caution” -woothemes YOU ARE NOT RELYING ON ANOTHER PROGRAMMERS RELEASES CYCLE.
6. @acodesmith WHAT IS RETINA?
 HIGH DENSITY PIXILATION? QHD? 4K? 5K? The Hardware of Pixels Per Inch (PPI) The software of resolution and zoom
7. @acodesmith HIGH PIXEL DENSITY hardware
8. @acodesmith SEEING IS BELIEVING A developer can mimic a browser setting to test responsive functionality.
 To see the real benefits a device must be tested in person. @acodesmith
9. @acodesmith The word ‘retina’ is copyrighted by Apple. Let’s stop calling it retina and start calling it high pixel density HPD, QHD, or 4k Apple is not the only HPD game in town, but they have pushed technology forward. HIGH PIXEL DENSITY FOR THE MASSES FROM THE HORSE’S MOUTH - APPLE.COM
10. @acodesmith IT’S PHYSICS YA’LL The number of pixels needed for clarity is calculated by the distance of the device and angle at which the device is being held. CELL PHONES REQUIRE THE HIGHEST DENSITY.
11. @acodesmith IT’S ONLY GETTING BETTER Newer phones companies have touted 500+ ppi! w3c.org stats show the growing trend of high resolution devices. @acodesmith
12. @acodesmith ZOOM IN! Software
13. @acodesmith If the iPhone6 did not zoom into cat-bounce.com the cats would render very small. The zoom ratio is relative to the pixel density. 1x is stanard. 2x is high density. (nth)x is the future. @acodesmith In order to utilize their full resolution, high ppi screens render the program at a ratio to standard definition. 1X 2X AND BEYOND
14. @acodesmith WHY IS IT IMPORTANT? Speed, Weight, Performance == UX
15. @acodesmith Avoid using images for icons, fonts, gradients or anything else graphical like charts. The fewer images the fewer http request. When you must use an image server the correct resolution the first time! User Experience Loading the largest image for all devices penalizes the older, usually slower, device. LOAD TIME Mobile devices are tied directly to usage. Memory can be limited on non high-res older devices. PAYLOAD
16. @acodesmith WC3 AND THE TWO ADOPTED METHODS <picture> element and the srcset=“” attribute
17. @acodesmith The Picture element “The HTML <picture> element is a container used to specified multiple <source> for a specific <img> contained in it. The browser will choose the most suitable source according to the current layout (constraints of the box the image will appear in) of the page and the device it will be displayed on (like a normal or hiDPI device).” -developer.mozilla.org www.html5rocks.com
18. @acodesmith The Picture element - Better for art direction - Easier to read - Easier to understand PROS CONS - More coding involved - Stange IE fallback hack - Minimal support
19. @acodesmith The Picture element Browser Support caniuse.com
20. @acodesmith The srcseT and sizes Attributes SRCSET A list of one or more strings separated by commas indicating a set of image sources for the user agent to use. Each string is composed of: 1. a URL to an image, 2. optionally, whitespace followed by one of: - a width descriptor, that is a positive integer directly followed by 'w'. The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density. - a pixel density descriptor, that is a positive floating point number directly followed by ‘x'. -developer.mozilla.org SIZES A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of: 1. a media condition. This must be omitted for the last item. 2. a source size value. Source size values specify the intended display size of the image. User agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width ('w') descriptors. The selected source size affects the intrinsic size of the image (the image’s display size if no CSS styling is applied). If the srcset attribute is absent, or contains no values with a width descriptor, then the sizes attribute has no effect.
21. @acodesmith The srcseT and sizes Attributes - Browser handles which image to choose. - Less coding - Native fallback because of the src image. - No polyfill and no new tag. PROS CONS - Harder to understand - Harder to mix sizes and css layouts together
22. @acodesmith The srcseT and sizes Attributes Browser Support caniuse.com
23. @acodesmith POLYFILLS AND JAVASCRIPT REQUIREMENTS. Regressive Enhancements
24. @acodesmith A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.” - Remy Sharp WITHOUT THE USE OF THE <IMG SRC=””> TAG JAVASCRIPT IS REQUIRED TO FILL IN THE MISSING INFORMATION. - Picturefill - Supports srcset and <picture> element - Built in fallbacks for older browsers - RetinaJS - Uses javascript to detect pixel density on page load. - Checks each image for high resolution version based on a naming convention. - Adaptive Images - Using Apache2 / nginx, PHP 5.x and GD library. - Redirects image request through custom PHP script using .htaccess or httpd-conf rewrite rules. - PHP generates and caches different image sizes based on the browser User Agent.
25. @acodesmith Polyfill Pros and cons! - RetinaJS - PRO: Super easy to use, no extra work except having high resolution images naming convention. 
 Example: myimage2x.jpg - CON: Does a $_HEAD request for each image to check for 2x suffix! - Adaptive Images - PRO: Only need to manage the large high resolution image. Everything else is done automatically. - CON: Requires updating to .htaccess and image library. Generates images on server, increasing server resources. - Picturefill - PRO: Well support and tested by Filament Group. - CON: Lot more markup and manual image management.
26. @acodesmith WORDPRESS MEDIA 
 LIBRARY IMAGE SETTINGS Let the system do the work
27. @acodesmith Image resize Settings NO UPSCALE If the image is smaller than the large size the large size will not be created. UPLOAD THE BIG GUY In order to generate the sizes needed for high density screens the author of the post must upload the high resolution image.
28. @acodesmith AutoMatic Resizes ORIGINAL DIMENSIONS: 580 × 427 RESIZED - coding.jpg - coding-300x221.jpg - coding-160x160.jpg ORIGINAL DIMENSIONS: 2400 × 1800 RESIZED - redpanda.jpg - redpanda-1024x768.jpg - redpanda-300x225.jpg - redpanda-160x160.jpg
29. @acodesmith BUT I need more sizes! WORDPRESS GOT DA HOOK UP! Using Wordpress hooks a user can define a new image size by calling ‘add_image_size’. The new image size will be generated like the native sizes set in the media settings. HOW DO I FIND A CERTAIN SIZE? ‘get_intermediate_image_sizes’ will return an array of all the sizes. Using a Wordpress filter called ‘image_size_names_choose’ will set the custom name for your custom sizes. Use the hd-screen image by call the ‘get_the_post_thumbnail(‘hd-screen’);‘ function with the named size.
30. @acodesmith Updating <img> Tags in Post. hardwork; Shortcodes; featured image;
31. @acodesmith Hardwork! Anyone writing a post can manually add all the image sizes to the <img> tag. 
 
 The process takes time and is hard work for a post with a lot of images, but it requires zero coding. 
 Adding the secretes attribute will not break old browsers! IE 8 will still render the src attribute. :)
32. @acodesmith Shortcodes! Adding a custom shortcode takes on a few lines of code in your theme’s function.php file. The shortcode will generate the secretes attribute based on the attachment id. The attachment id is found on the image single view in the media.
33. @acodesmith Shortcodes!
34. @acodesmith Featured Image! The featured image can use the same code, but usually the featured image has a stronger artistic value. Due to the nature of the featured image we can use the <picture> element when needed.
35. @acodesmith Picture Element and Ads The picture element also works really well for ads. Depending on the device a user will see a different ad size or a completely different image!
36. @acodesmith IN CLOSING High density marketshare will continue to increase. We as developers and designers need to deliver the best experience to ALL our users, not just a certain subset. WC3 will continue to refine the solution but we know secretes is here to stay and it works today! Javascript will be a requirement for older browsers for certain techniques but it’s not a requirement for just using the secretes with the <img src=“”> information. Wordpress media settings are very powerful and extending the sizes is easy. Start uploading the largest image and making Wordpress do the rest. Updating <img> tag in the post can be a struggle but shortcodes will help ease the pain. The picture element will be your friend when dealing with passionate designers and marketing advertisements. Finally, there are many plugins work great. Take the knowledge learned today to choose the right plugin.