Jak ušetřit místo a zrychlit e-shop pomocí optimalizace obrázků

Optimalizace obrázků (zmenšení jejich rozměrů i datové velikosti) je klíčová pro zlepšení rychlosti načítání stránek, zlepšení pozic ve vyhledávačích (zkuste si schválně spočítat své „skóre rychlosti“ v GooglePageSpeed Insights) a zajištění lepšího uživatelského zážitku. Také ale VÝRAZNĚ ušetří místo na hostingu, čímž můžete předejít nutnému dokupování prostoru na disku, které jinak vyžadují limity v našich tarifech. Přinášíme vám návod, který ukáže, jak efektivně optimalizovat obrázky pro váš e-shop a také přinese informace pro pochopení celé problematiky:

I. Nejčastěji používané formáty a jejich výhody a nevýhody

II. Rozměr vs. datová velikost obrázku a proč na nich záleží

III. Co je to komprese obrázků?

IV. Doporučené velikosti obrázků a jak na ně

V. Nástroje pro optimalizaci obrázků

VI. Jak dostat obrázky z e-shopu a upravené zase zpět

VII. Hromadná komprese obrázků ze strany Eshop-rychle

Formáty obrázků, které (pravděpodobně) používáte

JPEG (JPG): Nejlepší pro fotografie a detailní obrázky s mnoha barvami. JPEG formát umožňuje kompresi s variabilní úrovní kvality.
PNG: Ideální pro obrázky s průhledností a loga. PNG nabízí lepší kvalitu, ale soubory mohou být větší než u JPEG.
WebP: Moderní formát podporovaný většinou prohlížečů, který poskytuje výrazně lepší kompresi než JPEG nebo PNG bez ztráty kvality. Věděli jste, že Eshop-rychle podporuje obrázky ve formátu WebP? Zdaleka nejvíce místa ušetříte právě s ním.

Rozměr obrázku vs. datová velikost polopatě

Pro pochopení, co vlastně velikost obrázku „nafukuje“, si klidně představte malovaný obraz na stěně.

Rozměr obrázku se týká samotné velikosti obrazu, tedy jak velkou plochu zabírá. Ve fyzickém světě bychom tyto rozměry měřili například v cm, na digitálních zařízeních je uvádíme v pixelech, kde každý pixel je obrazový bod (čtvercový či obdélníkový) tvořící část obrázku a obsahující informace o intenzitě a barvě světla. Když tedy máte obrázek o rozměru 800×600 pixelů, znamená to, že je široký 800 bodů a vysoký 600 bodů (px).

Datová velikost obrázku, na druhou stranu, je jako množství barvy a materiálu potřebného k vytvoření obrazu na plátně. V digitálním světě to odpovídá množství místa na pevném disku nebo paměti, které obrázek zabírá, a měří se v bytech (například kilobytech (KB) nebo megabytech (MB)). Tato velikost závisí na mnoha faktorech, včetně toho, jak komplexní (kolik detailů nebo barev obrázek obsahuje) obrázek je nebo jak efektivně je komprimován (zmenšen, aby zabral méně prostoru bez významné ztráty kvality).

Z výše uvedeného vyplývá, že i když může mít obrázek velké rozměry (zabírá velkou „plochu“), jeho datová velikost může být relativně malá, pokud je obrázek dobře komprimován. Naopak malý obrázek (malé rozměry) může mít velkou datovou velikost, pokud obsahuje spoustu detailů nebo není efektivně komprimován.

Co je to komprese obrázků?

Komprese obrázků je proces snižování velikosti souboru obrázku, aniž by došlo k významné ztrátě jeho kvality. Tento proces umožňuje obrázky rychleji nahrávat na internet, následně je načítat a také šetřit místo na disku tím, že odstraní nepotřebné informace z obrázků. Existují dva typy komprese:

Bez ztráty, kde kvalita obrázku zůstává nezměněna (vhodné zejména pro tisk).

Se ztrátou, kde je pro dosažení menší velikosti souboru přijata určitá ztráta kvality. Komprese se ztrátou je vhodná pro většinu obrázků používaných online.

Jak tedy ušetřit místo na disku a získat všechny výhody rychlejšího e-shopu s pomocí optimalizace obrázků?

Doporučené rozměry obrázků na e-shopu

Pro většinu produktových či ilustračních obrázků na e-shopu není zapotřebí používat obrázky, jejichž rozměr by v originále stačil na polepení autobusu. Pro příklad se podívejte, jaké rozměry jsou vhodné pro šablonu New York:

Ikona v rozcestníku: 60 x 60px.
Obrázek do kategorie menu: 30 x 30px.
Oddělovač: 50 x 50px.
Náhledový obrázek produktu: 300 x 300px.
Detail produktu: 800 x 800px.

Představte si, že e-shopař vezme fotoaparát, cvakne produkt a výsledný obrázek nahraje v originální velikosti například 1488 x 2102px. Pak ke každému produktu takových obrázků připojí dalších 5, navíc nekomprimovaných (tedy v plných detailech), kdy každá taková fotografie má třeba 8 MB i více. Už vidíte, kde může být problém?

Nástroje pro zmenšení rozměru obrázků a datovou kompresi

Abyste se dostali na správný rozměr, můžete velikost obrázků dnes snadno změnit s pomocí mnoha různých nástrojů, ať už online nebo offline. Z online nástrojů vyzkoušejte třeba Imageresizer.com v režimu Bulk Resize. Ten vám umožní nahrát hromadně až 50 obrázků a upravit jejich rozměr, a dokonce ve stejném kroku i nastavit jejich maximální datovou velikost (tedy provést kompresi):

Pro představu – původní obrázek bonboniéry v příkladu měl při rozměru 1920 x 1280 px datovou velikost 506 kb. Komprimací a zmenšením rozměrů jsme se dostali na 97,42 kb a snadno by šlo jít i mnohem níže, aniž by tím výrazně viditelně trpěla kvalita výsledného souboru.

Datová optimalizace a zmenšení velkého množství souborů

Online nástroje, tím spíše ty, které jsou k dispozici zdarma, umožní většinou upravovat menší dávky obrázků současně. Pro pokročilé úpravy a větší dávky je zapotřebí sofistikovanějších a robustnějších nástrojů, nám se osvědčil například Light Image Resizer (do 100 obrázků zdarma, pro více souborů za cca 24 €), který umí pojmout celé složky včetně podsložek, obrázkům upravit jejich rozměr i datovou velikost a zároveň zachovat řazení do složek pro další použití.

Další možností, a to zcela zdarma, je starý dobrý IrfanView, který umožňuje taktéž poměrně pokročilé možnosti zmenšení i komprimace, a to přes možnosti Files > Batch Conversion/Rename… (Soubor > Dávková konverze/přejmenování…):

Jak dostat obrázky z e-shopu a nahrát upravené zpět?

S obrázky můžete pohodlně manipulovat pomocí přístupu k FTP, kde je lze jak stáhnout, tak i nahrávat. FTP je zdarma v rámci tarifu Business, k nižším tarifům je možné jej přikoupit, byť třeba na jeden měsíc jen za účelem „velkého úklidu“.

Pokud se ale do takové akce raději sami pouštět nechcete, můžeme vám na požádání přes autorizovaný dotaz obrázky stáhnout a zaslat. Poté, co je zmenšíte, nahrajeme je zpět. Je ale nutné při tomto postupu zachovat jejich názvy a koncovky, tedy neměnit formát ani je v procesu nepřejmenovávat.

Jak může Eshop-rychle pomoci s hromadnou kompresí?

Nabízíme vám také službu hromadné komprese obrázků a jejich převedení do formátu .webp, díky kterému je možné ušetřit v průměru až 80 % jimi využívaného prostoru. Cena za tuto službu je individuální a odvíjí se od objemu zpracovávaných dat. V případě zájmu se obraťte na naši technickou podporu, která vám poskytne veškeré informace.

Jsme rádi, že se staráte o své obrázky, prostor na disku a v neposlední řadě hlavně o pohodlí uživatelů i vyhledávacích robotů. Komprese je totiž opravdový win-win pro všechny strany.😊