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

Transcript

1. Optimalizace
   obrázků
   @alesroubicek
   #TopMonksCaffe
   

   View Slide

2. View Slide

3. Problémy
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

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
   

   View Slide

9. Řešení
   1. Responsivní obrázky
   2. Moderní formáty obrázků
   

   View Slide

10. HTML 5
    • 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
    

    View Slide

11. width="200" height="200" alt="…">
    

    View Slide

12. Moderní formáty
    • WebP - Google
    • JPEG 2000 - Apple
    • JPEG XR - Microsoft
    

    View Slide

13. HTML 5
    • Umožňuje mnohem granulárnější práci se zdroji
    za pomoci atributů media a type.
    • https://www.vzhurudolu.cz/prirucka/picture
    

    View Slide

14. 
    srcset="phone.jpg,
    phone@2x.jpg 2x">
    srcset="tablet.jpg,
    tablet@2x.jpg 2x">
    srcset="desktop.jpg,
    desktop@2x.jpg 2x">
    
    
    

    View Slide

15. 
    srcset="original.webp,
    original-2x.webp 2x">
    srcset="original.jxr,
    original-2x.jxr 2x">
    srcset="original.jp2,
    original-2x.jp2 2x">
    srcset="original.jpg,
    original-2x.jpg 2x">
    <"#$ Fallback ... —>
    
    

    View Slide

16. View Slide

17. View Slide

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
    

    View Slide

19. 
    srcset="original.webp,
    original-2x.webp 2x">
    srcset="original.jxr,
    original-2x.jxr 2x">
    srcset="original.jp2,
    original-2x.jp2 2x">
    srcset="original.jpg,
    original-2x.jpg 2x">
    <"#$ Fallback ... —>
    
    

    View Slide

20. 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
    

    View Slide

21. Client Hints
    

    View Slide

22. Client Hints
    • 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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide