Optimalizace obrázků

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/fopvogyv4uabukiyafjd

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

428a9c6e5b151e618d4db288105bc5f3?s=128

Aleš Roubíček

August 01, 2019
Tweet

Transcript

  1. Optimalizace obrázků @alesroubicek #TopMonksCaffe

  2. None
  3. Problémy

  4. None
  5. None
  6. None
  7. None
  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>
  16. None
  17. None
  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