Generating Simple Responsive Images

Images are becoming more and more complex on the web. We want to have great looking images but keep file sizes to a minimum especially on mobile devices. Take a look at one simple and effective way to server up images that automatically are the right size for the device you're using.

Transcript

1. Generating Simple Responsive Images By Tom Hickey
2. About me • Coding PHP since the turn of the century • Work for danetti.com as the developer and everything else • Unapologetic Apple fanboy • Disney enthusiast
3. The internet has changed • The good old days websites used to be designed to work at 1024x768 • Now devices can be as small as a watch or as large as a building. • The solution is responsive web design!
4. Responsive websites A website is responsive when the the same information and and functionality works on every device
5. Bitmaps baby! • Vectors are easy to scale, look good and small file size • Bitmaps (jpg/png/etc) don’t scale down well and scale upwards terribly. Original Scaled Up
6. And it gets better/worse
7. 250px wide: 7.7KB 500px wide: 21.3KB 1000px wide: 64.4KB
8. Responsive images • Having a different image served to the user depending on the width of the element that it’s contained in • Having a different image served to the user depending on the screen resolution (DPI not HxW) • Having a different image served to the user depending on the connectivity speed of the device
9. Demo
10. Problems I had in the past • Didn’t keep original source images handy • Generating new image for different sizes was a real pain • Re-compress images or trying out new image formats would mean re-uploading the entire library by hand.
11. Which direction • Crop image to the size you want AKA art direction - hard • Scale the image to the size you want AKA scaling - easy
12. How it works
13. PHP Code
14. Demo
15. So that was fun, now what • <picture> tag • http://caniuse.com/#search=picture • Javascript solutions • http://etiennetalbot.github.io/responsImg/
16. responsImg
17. Demo
18. Notes • More on art direction images -https://css-tricks.com/ which-responsive-images-solution-should-you-use/ • Commercial example of this - https://www.resrc.it/ • Better image formats than jpg/png - WebP and BGP
19. Yay it’s over! • @thickey on twitter • thickey@thickey.com on email • Github - https://github.com/thickey256/php-smart-image • Feedback on joind.in https://joind.in/14624 • www.danetti.com - use code TomTalk get 15% off any orders until 2015-07-17