Responsive Images

Gluetalk nr. 1, links:
http://filamentgroup.com/lab/rwd_img_compression/
http://www.webmonkey.com/2013/01/the-return-of-the-progressive-jpeg/
http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/
http://responsiveimages.org/
http://blog.chromium.org/2014/02/chrome-34-responsive-images-and_9316.html
http://instantclick.io/
http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/

Transcript

1. RESPONSIVE IMAGES GLUETALK NUMERO UNO
2. OVERZICHT Het probleem Verschillende voorstellen De oplossing Implementatie
3. PROBLEEM Afmetingen van galleries, banners, etc. verschilt enorm (zeker mobiel). Populaire toestellen met hun breedte: Samsung GT-I9505 Galaxy S IV: 1080px Samsung Galaxy S III: 720px iPhone 5s: 640px HTC Desire X: 480px iPhone 3gs: 320px
4. PROBLEEM 1080px: 329kb 640px: 170kb 480px: 114kb 320px: 61kb
5. ONROEREND ERFGOED 2.3MB vs 770kb (iPhone grootte)
6. KUNST IN HUIS 688kb vs. 303kb (iPhone grootte)
7. PROBLEEM Desktop schaalt niet of minder, je hebt er veel meer controle over. Wel rekening houden met retina schermen. Mobiel veel groter verschil (320px - 1080px) en nog eens rekening houden met portrait of landscape
8. VERSCHILLENDE VOORSTELLEN ZONDER JAVASCRIPT OF CSS COMPRESSIVE JPEG Bestandsgrootte verschilt veel meer qua compressie dan effectieve afbeeldingsgrootte. Afbeelding veel groter opslaan dan nodig, met hoogste compressie resulteert in een kleinere bestandsgrootte dan normale afbeeldingsgrootte met normale compressie. Retina blijft ok. Nadeel: altijd dezelfde afbeelding / crop
9. VERSCHILLENDE VOORSTELLEN ZONDER JAVASCRIPT OF CSS PROGRESSIVE JPEG Niet echt een oplossing voor responsive images, maar wel interessant Laadt in 1 keer (slechte kwaliteit, dan beter), perceived speed veel hoger Tekst verspringt niet zoals met baseline Kleinere bestandsgrootte Slechte Elke laag moet opnieuw ingeladen worden, hoog CPU (denk aan mobiel) browser ondersteuning
10. VERSCHILLENDE VOORSTELLEN MET JAVASCRIPT Er zijn enorm veel alternatieven om responsive images aan te pakken met JavaScript. Ze imiteren de officiëel voorgestelde oplossingen van de (Responsive Images Community Group) RICG
11. VOORSTELLEN srcset Picture (HTTP Client hints) (RespImg syntax src-n, uitgebreide srcset, tegen picture)
12. SCRSET Exra attribuut voor de i m g tag. Mogelijkheid om high res images te voorzien. User agent kiest zelf welke afbeelding hij het beste toont, gebaseerd op scherm, voorkeuren of huidige connectie Altijd zelfde crop, puur high res versie voorzien
13. SRCSET < i m g s r c = " f a l l b a c k . j p g " a l t = " " s r c s e t = " p h o t o . j p g 1 x , p h o t o - h d . j p g 2 x " > Dit werkt in Chrome 34 en webkit nightly (Safari). Nog geen idee of IE dit gaat implementeren.
14. PICTURE Een uitbreiding op srcset om meerdere bronnen mee te geven als afbeelding, vergelijkbaar met v i d e o tag. srcset helpt enkel bij high-density schermen. Picture werkt via media queries, veel meer mogelijkheden (scherm breedte, oriëntatie, retina).
15. PICTURE < p i c t u r e > < s o u r c e m e d i a = " ( m i n - w i d t h : 4 0 e m ) " s r c s e t = " b i g . j p g 1 x , b i g - h d . j p g 2 x " > < s o u r c e s r c s e t = " s m a l l . j p g 1 x , s m a l l - h d . j p g 2 x " > < i m g s r c = " f a l l b a c k . j p g " a l t = " " > < / p i c t u r e > door Chrome. Aangekondigd
16. WAT NU? Alternatief tot picture voldoende geïntegreerd is om een polyfill te kunnen gebruiken. We kunnen geen src in een img aanpassen omwille van browser optimalisaties of zelfs plugios als . Zelfs een lege img tag InstantClick triggert een request
17. PICTUREFILL Klein script dat imiteert wat p i c t u r e zal worden. Werkt met spans en vervangt deze door de correcte img tag. Wat nodig: picturefill.js matchMedia.js
18. PICTUREFILL In de h e a d sectie: < s c r i p t s r c = " / a s s e t s - m o b i l e - a p p / j s / l i b s / m a t c h m e d i a - p i c t u r e f i l l . j s " > < / s c r i p t > De image: < s p a n d a t a - p i c t u r e = " " d a t a - a l t = " A g i a n t s t o n e f a c e a t T h e B a y o n t e m p l e i n A n g k o r T h o m , C a < s p a n d a t a - s r c = " s m a l l . j p g " > < / s p a n > < s p a n d a t a - s r c = " m e d i u m . j p g " d a t a - m e d i a = " ( m i n - w i d t h : 4 0 0 p x ) " > < / s p a n > < s p a n d a t a - s r c = " l a r g e . j p g " d a t a - m e d i a = " ( m i n - w i d t h : 8 0 0 p x ) " > < / s p a n > < s p a n d a t a - s r c = " e x t r a l a r g e . j p g " d a t a - m e d i a = " ( m i n - w i d t h : 1 0 0 0 p x ) " > < / s p a n > < ! - - F a l l b a c k c o n t e n t f o r n o n - J S b r o w s e r s . S a m e i m g s r c a s t h e i n i t i a l , u n q u a l i f i < n o s c r i p t > < i m g s r c = " s m a l l . j p g " a l t = " A g i a n t s t o n e f a c e a t T h e B a y o n t e m p l e i n A n g k o r T h < / n o s c r i p t > < / s p a n >
19. WANNEER GEBRUIKEN? Galleries, banners, ... full width afbeeldingen. Niet voor inline images, fixed width images (srcset)
20. WORKFLOW AANPASSINGEN Frontend, templating: nieuwe syntax Design: rekening houden met verschillende crop CMS: altijd grote afbeeldingen vragen, eventueel verschillende crop
21. 'T IS GEDAAN