Optimalizace obrázků

Pokud vás služba Cloudinary z mé prezentace zaujala, zaregistrujte se, prosím, přes náš referal https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/lbkvpambwo114uoe81jw?t=default

Ukázky různých optimalizací stránky našeho teamu najdete na této adrese:
https://github.com/topmonks/caffe/tree/master/image-optimization

Výsledky porovnání na 4k monitoru najdete v grafu a tabulce na předposledním slide.

Tento článek o responzivních obrázcích jsem psal ještě před uvedením Client Hints a automatických vylepšení v Cloudinary:
https://www.rarous.net/weblog/2016/03/27/responzivni-bitmapove-obrazky.html

Popis aktuálního stavu Client Hints v desktopovém a mobilním Chrome
https://cloudinary.com/blog/client_hints_and_responsive_images_what_changed_in_chrome_67

Client Hints má určitě smysl používat, zásah mají i přes svůj experimentální statut obrovský. Nejen že vám ušetří spoustu práce a z exponenciálního problému dělají opět lineární, ale fungují na všech Android zařízeních, co používají Chrome. A tam jsou tyto optimalizace nejvíce potřeba.

Příručka HTML5 věnující se responzivním obrázkům:
https://www.vzhurudolu.cz/prirucka/srcset-sizes
https://www.vzhurudolu.cz/prirucka/picture

Transcript

1. Optimalizace obrázků @alesroubicek #TopMonksCaffe
3. Problémy
8. Problémy • Dlouhá doba načítání stránek ➡ Snížená angažovanost návštěvníků ➡ Brzdění analytických kódů • Nadměrné čerpání dat uživatelům z FUP • Snížování výdrže baterií mobilních zařízení • Uhlíková stopa
9. Řešení 1. Responsivní obrázky 2. Moderní formáty obrázků
10. HTML 5 <img> • Základní možnosti práce s responsivitou • atribut srcset slouží buď k nastavení hustoty pixelů nebo velikostí ve spojení s atributem sizes • https://www.vzhurudolu.cz/prirucka/srcset-sizes
11. <img srcset=" image.png, image@2x.png 2x” src="image.png" width="200" height="200" alt="…">
12. Moderní formáty • WebP - Google • JPEG 2000 - Apple • JPEG XR - Microsoft
13. HTML 5 <picture> • Umožňuje mnohem granulárnější práci se zdroji za pomoci atributů media a type. • https://www.vzhurudolu.cz/prirucka/picture
14. <picture> <source media="(max-width: 479px)" srcset="phone.jpg, phone@2x.jpg 2x"> <source media="(min-width: 480px) and (max-width: 839px)" srcset="tablet.jpg, tablet@2x.jpg 2x"> <source media="(min-width: 840px)" srcset="desktop.jpg, desktop@2x.jpg 2x"> <img alt="Ukázka" src="fallback.jpg" width="100%"> </picture>
15. <picture> <source type="image/webp" srcset="original.webp, original-2x.webp 2x"> <source type="image/vnd.ms-photo" srcset="original.jxr, original-2x.jxr 2x"> <source type="image/jp2" srcset="original.jp2, original-2x.jp2 2x"> <source type="image/jpeg" srcset="original.jpg, original-2x.jpg 2x"> <"#$ Fallback ... —> </picture>
18. Cloudinary • Služba na práci s obrázky • Dva režimy: ๏ Fetch - original hostujete na svém serveru ๏ Upload - original hostujete v Cloudinary • API pro automatizaci • Napojení na CDN
19. <picture> <source type="image/webp" srcset="original.webp, original-2x.webp 2x"> <source type="image/vnd.ms-photo" srcset="original.jxr, original-2x.jxr 2x"> <source type="image/jp2" srcset="original.jp2, original-2x.jp2 2x"> <source type="image/jpeg" srcset="original.jpg, original-2x.jpg 2x"> <"#$ Fallback ... —> </picture>
20. <img alt="…" srcset=" https://res.cloudinary.com/my-account/image/upload/w_640,f_auto/v1449739319/original.png, https://res.cloudinary.com/my-account/image/upload/w_640,dpr_2.0,f_auto/v1449739319/… 2x"> Cloudinary f_auto
21. Client Hints
22. Client Hints • <meta http-equiv="Accept-CH" 
 content="DPR,Viewport-Width,Width"> • Browser přidá do požadavku na obrázek hlavičky DPR: 2.0, Viewport-Width: 320 a Width: 320 • Server může na základě těchto informací poslat správnou velikost obrázku • Aktuálně fungují jen v Chrome přes TLS, na stejné doméně nebo v mobilu všude (kvůli fingerprintingu)
23. Cloudinary parametry • f_auto - volba formátu podle browseru • q_auto - volba kvality podle hlavičky Save-Data • w_auto - volba velikosti podle hlavičky Width • dpr_auto - volba hustoty pixelů podle hlavičky DPR
24. Shrnutí 0 4 000 8 000 12 000 16 000 Neoptimalizované Formát Velikost Responsivní Neoptimalizované 15.6 MB Formát 2.5 MB Velikost 317 KB Responzivní 300 KB
25. Odkazy • https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/ fopvogyv4uabukiyafjd • https://github.com/topmonks/caffe/tree/master/image- optimization • https://www.rarous.net/weblog/2016/03/27/ responzivni-bitmapove-obrazky.html • https://cloudinary.com/blog/ client_hints_and_responsive_images_what_changed_in_ch rome_67