Nejlepší komprese obrázků

lockeheed

14. 6. 2017 00:20:16

Kdo řešil toto téma - minimalizace datového objemu obrázků?

Zajímá mě vysoká kvalita při nejnižším možném datovém objemu.

Enkodéry:

mozjpeg
guetzli
jiný?

Nové formáty:

WebP
jiný?

Responzivní obrázky

ve smyslu srcset

Co používáte a proč; jaký to má vliv na rychlost vykreslování?

Díky :-)

14. 6. 2017 00:20:16

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284708

Jan Kuthan

(48 hodnocení)

14. 6. 2017 09:32:56

Na webech kde nepotřebuji dynamicky přidávat obrázky využívám čistě testu rychlosti na google https://developers.google.com/speed/pagespeed/insights/ kde ti nabídne ke stažení obrázky už po jeho kompresi.

Na wp weby dávám plugin, který nahrávané obrázky protahuje přes api na tinypng.org.

Na své straně jsem kompresi nikdy zatím nepotřeboval řešit, čistě vytvořím více verzí obrázku....

14. 6. 2017 09:32:56

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284707

lockeheed

14. 6. 2017 10:21:38

Potřebuji jít trochu dál.

Google nefunguje vhodně. Nepozná, kde se dají použít křivky, existující obrázky komprimuje do nevhodné kvality; ignoruje webP atd. Prostě je to nějaký basic nástroj

14. 6. 2017 10:21:38

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284706

jano92

14. 6. 2017 10:42:03

Mne Insight tiež nejak dobre nefunguje, obrázky mi komprimuje do rozmeru aj kvality asi len pre smartfóny, aj ak ich stiahnem zo záložky pre desktop ... sú hrozne malé, nekvalitné, nepoužiteľné

14. 6. 2017 10:42:03

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284705

beraniste

(29 hodnocení)

14. 6. 2017 11:35:42

Přidám se, musíme to též vyřešit. Jde to nějak zautomatizovat? Mám na eshopu na vlastním řešení příliš velké obrázky a potřeboval bych to nějak automaticky zmenšovat.

14. 6. 2017 11:35:42

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284704

Oleg

(53 hodnocení)

14. 6. 2017 14:57:00

Pro rucni doplnovani obrazku na nejaky staticky web a podobne doporucuji pouzit: https://tinypng.com/

Pokud jde o automatizaci pro WP tak existuje plugin na 100 obrazku mesicne: https://wordpress.org/plugins/tiny-compress-images/

Nebo maji API, prvnich 500 obrazku mesicne zdarma: https://tinypng.com/developers - dole jsou tez ceny.

Existuji i jine sluzby pro optimalizaci obrazku (maji i zdarma nebo placene verze nebo pluginy pro WP / API)

ShortPixel Image Optimization and Compression Plans and Pricing

Plans and Pricing · Kraken.io

Plans & Pricing - EWWW Image Optimizer

Imagify Pricing | Online Image Compression Tool

Cloudinary - Pricing

Smart Image Compression API and WordPress Plugin

Samozrejme je lepsi pouzivat neco sveho, ale zrovna guetzli jen tak nema kazdy hosting :) WebP zatim je nesmysl pouzivat, protoze: https://caniuse.com/#search=webp

Navic pokud se pouziva casto JPG format obrazku doporucoval bych JPEG2000 ma nejlepsi pomer komprese/kvalita

14. 6. 2017 14:57:00

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284703

lockeheed

14. 6. 2017 16:36:56

WebP smysl teoreticky má, přeci jen Firefox umírá, Chrome má 55 % a servírovat dvě verze obrázků není největší problém.

Hodily by se nějaké case study a experimenty.. Nějaké tipy?

14. 6. 2017 16:36:56

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284702

Jiří Šubr

(23 hodnocení)

14. 6. 2017 16:55:02

...

14. 6. 2017 16:55:02

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284701

Oleg

(53 hodnocení)

14. 6. 2017 17:06:11

Napsal lockeheed;1392752
WebP smysl teoreticky má, přeci jen Firefox umírá, Chrome má 55 % a servírovat dvě verze obrázků není největší problém.

Samozrejme, ze neni problem servirovat dve verze, ale prijde mi to nevyhodne pokud se pouziva tisice obrazku a ve vetsine pripadu nahledove + originalni, takze se to nasobi potom 2x minimalne. Jendou jsem to zkousel a misto 6GB obrazku razem bylo 9. Problem take pokud se pouziva CDN a tam je prenos drahy i misto na disku. Jednoduse zatim je to komplikovane a da se vyuzit nastroje, ktere redukuji velikost vychozich obrazku, je to mene narocne )

Dokud WebP nepodpori Edge a Safari tak o tom osobne ani neuvazuji.

14. 6. 2017 17:06:11

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284700

Jiří Šubr

(23 hodnocení)

14. 6. 2017 17:35:39

...

14. 6. 2017 17:35:39

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284699

lockeheed

14. 6. 2017 21:43:20

Napsal Oleg;1392760
Samozrejme, ze neni problem servirovat dve verze, ale prijde mi to nevyhodne pokud se pouziva tisice obrazku a ve vetsine pripadu nahledove + originalni, takze se to nasobi potom 2x minimalne. Jendou jsem to zkousel a misto 6GB obrazku razem bylo 9. Problem take pokud se pouziva CDN a tam je prenos drahy i misto na disku. Jednoduse zatim je to komplikovane a da se vyuzit nastroje, ktere redukuji velikost vychozich obrazku, je to mene narocne )
Dokud WebP nepodpori Edge a Safari tak o tom osobne ani neuvazuji.

To je spíš ještě sranda v porovnání s tím, že implementuješ responzivní obrázky a generuješ třeba 7 variant, jenže jde taky o business a rychlost načtení (vykreslení) prostě hraje roli.

Jiří Šubrt:

Třeba Respekt má WebP a tady to má dost smysl - velké obrázky na HP atd.

14. 6. 2017 21:43:20

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284698

Oleg

(53 hodnocení)

15. 6. 2017 13:21:12

Napsal lockeheed;1392811
To je spíš ještě sranda v porovnání s tím, že implementuješ responzivní obrázky a generuješ třeba 7 variant, jenže jde taky o business a rychlost načtení (vykreslení) prostě hraje roli.

Proto pouzivame u nekterych narocnejsich webu CDN v kombinaci HTTP/2, ktery ma navic k dispozici Brotli, ale stoji to penize. Na jeden novy projekt CDNko pro tento ucel planuji take.

P.S. ono responsivni obrazky jsou fajn, ale pokud jich mas fakt hodne tak opravdu se to muze vysplhat k x -xx variant, u mensich projektu to nevadi nicemu u tech narocnejsich je dobre pouzivat bud Cloudinary.com nebo podobne vlastni reseni nebo nejaky scr, ktery je uz hotovy neco jako https://github.com/Intervention/imagecache a tak podobne.

15. 6. 2017 13:21:12

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284697

lockeheed

15. 6. 2017 19:36:25

Napsal Oleg;1392733
Samozrejme je lepsi pouzivat neco sveho, ale zrovna guetzli jen tak nema kazdy hosting :) WebP zatim je nesmysl pouzivat, protoze: https://caniuse.com/#search=webp
Navic pokud se pouziva casto JPG format obrazku doporucoval bych JPEG2000 ma nejlepsi pomer komprese/kvalita

Jako tohle? https://caniuse.com/#search=jpeg%202000

Napsal Oleg;1392921
Proto pouzivame u nekterych narocnejsich webu CDN v kombinaci HTTP/2, ktery ma navic k dispozici Brotli, ale stoji to penize. Na jeden novy projekt CDNko pro tento ucel planuji take.
P.S. ono responsivni obrazky jsou fajn, ale pokud jich mas fakt hodne tak opravdu se to muze vysplhat k x -xx variant, u mensich projektu to nevadi nicemu u tech narocnejsich je dobre pouzivat bud Cloudinary.com nebo podobne vlastni reseni nebo nejaky scr, ktery je uz hotovy neco jako https://github.com/Intervention/imagecache a tak podobne.

Ale tak CDN a HTTP/2 nic zásadně neřeší.

Zásadně to řeší komplexní přístup, ale v tuto chvíli jsem z toho vysekal jen ty obrázky.

---------- Příspěvek doplněn 15.06.2017 v 20:05 ----------

Téma považuji za skoro vyřešené, nejlepší, co jsem na toto téma četl, je tento Google checklist:

Prefer vector formats: vector images are resolution and scale independent, which makes them a perfect fit for the multi-device and high-resolution world.
Minify and compress SVG assets: XML markup produced by most drawing applications often contains unnecessary metadata which can be removed; ensure that your servers are configured to apply GZIP compression for SVG assets.
Pick best raster image format: determine your functional requirements and select the one that suits each particular asset.
Experiment with optimal quality settings for raster formats: don't be afraid to dial down the "quality" settings, the results are often very good and byte savings are significant.
Remove unnecessary image metadata: many raster images contain unnecessary metadata about the asset: geo information, camera information, and so on. Use appropriate tools to strip this data.
Serve scaled images: resize images on the server and ensure that the "display" size is as close as possible to the "natural" size of the image. Pay close to attention to large images in particular, as they account for largest overhead when resized!
Automate, automate, automate: invest into automated tools and infrastructure that will ensure that all of your image assets are always optimized.

Co se týče experimentů, porovnám mozjpeg, guetzli a WebP a uvidí se, jak na tom ten nový formát je.

15. 6. 2017 19:36:25

https://webtrh.cz/diskuse/nejlepsi-komprese-obrazku/#reply1284696

Pro odpověď se přihlašte.

Přihlásit