Optimalizace obrázků - Speaker Deck

Optimalizace obrázků

by Aleš Roubíček

Slide 1

Slide 1 text

Optimalizace obrázků @alesroubicek #TopMonksCaffe

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Problémy

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

<"#$ Fallback ... —>

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

<"#$ Fallback ... —>

Slide 20

Slide 20 text

Cloudinary f_auto

Slide 21

Slide 21 text

Client Hints

Slide 22

Slide 22 text

Client Hints • • 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 ﬁngerprintingu)

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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