Generating Simple Responsive Images

Slide 1

Slide 1 text

Generating Simple Responsive Images By Tom Hickey

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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!

Slide 4

Slide 4 text

Responsive websites A website is responsive when the the same information and and functionality works on every device

Slide 5

Slide 5 text

Bitmaps baby! • Vectors are easy to scale, look good and small ﬁle size • Bitmaps (jpg/png/etc) don’t scale down well and scale upwards terribly. Original Scaled Up

Slide 6

Slide 6 text

And it gets better/worse

Slide 7

Slide 7 text

250px wide: 7.7KB 500px wide: 21.3KB 1000px wide: 64.4KB

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Demo

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

Which direction • Crop image to the size you want AKA art direction - hard • Scale the image to the size you want AKA scaling - easy

Slide 12

Slide 12 text

How it works

Slide 13

Slide 13 text

PHP Code

Slide 14

Slide 14 text

Demo

Slide 15

Slide 15 text

So that was fun, now what • tag • http://caniuse.com/#search=picture • Javascript solutions • http://etiennetalbot.github.io/responsImg/

Slide 16

Slide 16 text

responsImg

Slide 17

Slide 17 text

Demo

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Yay it’s over! • @thickey on twitter • [email protected] 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