Obrázky produktov pomáhajú uzavrieť obchod, keď zákazníci navštívia váš web. Ak chcete zachovať ich záujem, musíte mať atraktívne fotografie, ktoré sa rýchlo načítavajú. Inými slovami, musíte optimalizovať obrázky svojich produktov.
Možno sa pýtate, ako nájsť optimálnu veľkosť obrázka, ako komprimovať obrázky a ako optimalizovať obrázky bez straty kvality.
Pokryli sme vás. V tomto článku sa dostaneme do
Prečo potrebujete optimalizovať obrázky?
Obrázky sú dôležitou súčasťou každého webu. To platí najmä pre stránky elektronického obchodu. Obrázky ovplyvňujú zákazníkov, keď zvažujú nákup. Pridávajú k celkovému dizajnu webovej stránky, pomáhajú zákazníkom vybrať si produkt a zlepšujú SEO vašej stránky.
Napríklad sa chcete vyhnúť nahrávaniu veľkých súborov. Môžu spomaliť vašu stránku, čo ovplyvňuje hodnotenie vášho vyhľadávača a odvádza potenciálnych zákazníkov. Nikto nechce pri nakupovaní online čakať, kým sa stránka načíta. Preto musíte optimalizovať obrázky svojich produktov.
Pochopenie rozmerov a proporcií obrázka
Poďme zistiť, na čo si treba dať pozor pri optimalizácii obrázkov.
Veľkosť a rozmery obrázka sú naozaj dôležité. Tieto parametre ovplyvňujú veľkosť súboru a vzhľad obrázka na rôznych zariadeniach.
Veľkosť
Teraz je éra
Keď sú však obrázky príliš veľké, nie sú vhodné na internet. Spomaľujú rýchlosť načítania, najmä na telefóne. Ak nechcete, aby vaši návštevníci boli netrpezliví a opustili váš obchod, mali by ste zmenšiť veľkosť obrázkov.
Obrázok má dve veľkosti:
- Veľkosť obrázka je priestor, ktorý grafika zaberá na obrazovke. Táto veľkosť sa meria v pixeloch (px), čo sú jednotlivé body, ktoré tvoria obrazovku. Do obchodu Ecwid môžete nahrať obrázky ľubovoľnej veľkosti. Potom sa optimalizujú tak, aby zodpovedali šírke okna prehliadača. Aj tak je najlepšie zmenšiť obrázky produktov na približne 1000 x 1000 px. Táto veľkosť je dostatočne veľká na zobrazenie produktu a dostatočne malá na rýchle načítanie.
- Veľkosť súboru je pamäťový priestor, ktorý obrázok zaberá. Táto veľkosť sa zvyčajne meria v bajtoch
kilo- (kb),mega- (Mb) a gigabajty (Gb). Čím väčšia je veľkosť súboru obrázka, tým viac úložného priestoru vyžaduje.
Veľkosť obrázka tohto produktu je 1920×1920 a veľkosť súboru je 272 kB
Načítanie väčších súborov trvá dlhšie. Na boj proti tomuto problému bol vyvinutý softvér na kompresiu súborov. Obrázok sa zvyčajne komprimuje optimalizáciou farebných údajov.
Silná kompresia však zhoršuje „kvalitu“ obrázkov. Spôsobuje šum alebo náhly prechod farieb.
Pri veľkosti súboru okolo 1000 px zaberie dobrá kompresia okolo 200 kB.
Teraz sa poďme dozvedieť viac o tom, ako zvoliť správne proporcie pre obrázky.
Rozmery
Pomery obrázka naznačujú
Niektoré pomery lahodia oku viac ako iné. Štandardná sada proporcií vždy vyzerá pekne. Sú to 1:1, 4:3, 3:2 a 16:9.
Proporcie sú dôležité, pretože pomáhajú definovať vzhľad vášho webu. Usilujte sa o rovnaké proporcie pre všetky obrázky produktov, aby vaša predajňa získala štruktúrovaný a profesionálny vzhľad.
Ako vybrať formát obrázka
Ďalšia vec, ktorú treba mať na pamäti pre optimálne zobrazovanie, je formát obrázka. Je to typ súboru, v ktorom je uložený obrázok.
Existuje mnoho typov obrazových formátov. Každý má svoje výhody a nevýhody, pokiaľ ide o kvalitu, kompresiu a podporu. Mali by ste zvoliť formát, ktorý poskytuje najvyššiu kvalitu s najmenšou veľkosťou.
Tri najbežnejšie formáty na webe sú JPEG, PNG a GIF. Každý by sa mal používať špecifickým spôsobom.
Rozoberme si formáty:
- Gif (Graphics Interchange Format) je schopný ukladať komprimované dáta bez straty kvality s použitím maximálne 256 farieb. Formát zvyčajne podporuje animácie. Po dlhú dobu boli GIF najbežnejším formátom na internete... až kým neprišiel PNG.
- PNG (Portable Network Graphics) využíva bezstratovú kompresiu a ukladá neobmedzený počet farieb.
- JPEG (Joint Photographic Experts Group, názov vývojára) je najtypickejší formát na ukladanie fotografií a iných obrázkov. Algoritmus JPEG môže používať stratovú aj bezstratovú kompresiu (o tom neskôr.) Čím väčšia je veľkosť súboru, tým menšia je strata.
Aký formát by ste si mali vybrať? Ak máte animovaný obrázok, je to tak
Súbory JPEG a PNG sú podobné, ale majú aj zásadné rozdiely. Súbory JPEG majú menšiu veľkosť, pretože používajú proces kompresie, ktorý odstraňuje niektoré údaje. PNG na druhej strane podporujú priehľadné pozadie a sú lepšie pre grafický dizajn.
Všeobecným pravidlom je používať JPG pre fotografie a obrázky, ktoré nemajú priehľadné pozadie. Pokiaľ ide o PNG, je lepšie ich použiť pre grafiku, súbory s priehľadným pozadím a iné obrázky, kde je dôležitá čistota a živosť farieb. Pri produktových fotografiách má teda zmysel uprednostniť JPEG pred PNG.
Táto fotografia produktu je vo formáte JPEG
Ako komprimovať obrázky bez straty kvality
Kompresia pomáha zmenšiť veľkosť obrázka. Čím nižšia kvalita, tým vyššia kompresia a menšia veľkosť súboru.
Existujú dva typy kompresie:
- Stratová kompresia znižuje veľkosť súboru odstránením nadbytočných údajov. Keď však komprimujete súbor týmto spôsobom, môže to výrazne znížiť kvalitu obrazu.
- Bezstratová kompresia je technika, ktorá zachováva vysokú kvalitu súboru. Nezníži však veľkosť súboru tak ako stratová kompresia. Ak potrebujete zmenšiť veľkosť súboru bez výrazného ovplyvnenia kvality, je lepšie zvoliť bezstratovú kompresiu.
Čítajte ďalej a dozviete sa o online nástrojoch, ktoré môžete použiť na kompresiu obrázka bez straty kvality.
Ako optimalizovať obrázky pre web: Prehľad nástrojov
Chcete zistiť, ako optimalizovať obrázky pre webovú stránku? Našťastie pre vás používate online nástroje na automatickú optimalizáciu obrázkov bez toho, aby ste trávili hodiny pozeraním výukových programov Photoshopu.
Nasledujúce stránky môžu automatizovať optimalizáciu za vás:
Ako optimalizovať veľkosť obrázka: 4 jednoduché nástroje
Ak hľadáte zmenšenie veľkosti súboru, vyskúšajte jednu z nasledujúcich služieb. Sú buď zadarmo, alebo majú bezplatné skúšobné verzie:
- TinyJPG: Zmenší veľkosť súboru obrázkov JPEG. Podľa ich stránky ho dokáže znížiť o viac ako 70 %!
- TinyPNG: rovnaký kompresor obrázkov, ale pre súbory PNG.
- Squoosh: webová aplikácia na kompresiu obrázkov, ktorá zmenšuje veľkosť obrázkov prostredníctvom mnohých formátov.
- jpegmini: kompresor fotografií pre súbory JPEG. Má pokročilejšie funkcie, ktoré sú užitočné pre fotografov, vrátane exportu fotografií priamo z Lightroom a Photoshop.
- ImageOptim: optimalizátor obrazu pre zariadenia Mac. Ak ju chcete používať, musíte si ju stiahnuť.
Optimalizácia obrázkov pomocou JPEGmini
Ak prevádzkujete obchod Ecwid, môžete použiť SEO rýchlosť a optimalizácia obrázkov aplikáciu zo služby Ecwid App Market. Aplikácia umožňuje
Ako optimalizovať obrázky pre WordPress
Ak máte webovú stránku WordPress, môžete použiť doplnok na optimalizáciu obrázkov a kompresiu. Pomáhajú vám automaticky optimalizovať obrázky na stránkach WordPress, čo umožňuje vyššiu rýchlosť a výkon.
Mimochodom, ak hľadáte doplnok elektronického obchodu pre svoj web WordPress, pozrite si toto Doplnok Ecwid by Lightspeed. Umožňuje vám jednoducho pridať internetový obchod na vašu stránku WordPress. Po nainštalovaní doplnok automaticky vytvorí stránku obchodu, kde môžu vaši zákazníci nakupovať na vašom webe.
EWWW Image Optimizer
EWWW Image Optimizer je jedným z najlepších doplnkov WordPress na kompresiu fotografií a optimalizáciu obrázkov na vašom webe. Celý proces optimalizácie obrázkov je automatizovaný. To zahŕňa kompresiu obrázkov a úpravu veľkosti tak, aby sa zmestili na stránku a zariadenie správnej veľkosti. Plugin je
Komprimujte JPEG a PNG
Komprimujte JPEG a PNG je doplnok vytvorený tímom za službami, ktoré už máme
reSmush.it
reSmush.it je bezplatný doplnok na kompresiu obrázkov WordPress pre súbory do 5 MB. Môžete automaticky optimalizovať obrázky pri nahrávaní, hromadne optimalizovať staršie obrázky a vylúčiť niektoré obrázky z optimalizátora.
Viac nástrojov na automatickú optimalizáciu obrazu
Ale čo ak nemáte webovú stránku WordPress? Manuálna optimalizácia veľkého množstva fotografií určite je
ImageRecycle
ImageRecycle podporuje rôzne obrazové formáty, ako sú JPEG, PNG, GIF a dokonca aj súbory PDF.
Nástroj dokáže určiť, ktoré obrázky na vašom webe je potrebné optimalizovať na základe veľkosti a rozmeru obrázka. Stačí zadať adresu vašej webovej stránky a ImageRecycle vám bezplatne pošle správu e-mailom. Majú tiež bezplatnú skúšobnú verziu, takže môžete vidieť ich optimalizačný nástroj v akcii.
ImageKit.io
ImageKit.io nie je bežným kompresorom obrázkov, ale obrazovým CDN (content delivery network). Optimalizuje, mení veľkosť a odosiela obrázky prostredníctvom svojej globálnej siete serverov. Môžete sa zaregistrovať do programu navždy zadarmo.
Nástroje na úpravu obrázkov produktov
Ak vám neprekáža upravovať obrázky sami a nebojíte sa trocha kutilov, možno vám pomôžu nástroje na úpravu fotografií. Tu sú niektoré z nich:
photoshop
Photoshop ponúka zadarmo online editor na základnú manipuláciu s obrázkami (ako je orezanie alebo zmena veľkosti obrázkov). Umožňuje tiež odstrániť pozadie z obrázkov a doladiť fotografie pomocou rôznych nastavení, ako je kontrast, jas, sýtosť, teplo alebo ostrosť.
Online editor Photoshop má šablóny dizajnu, ktoré môžete použiť
GIMP
GIMP je bezplatný program vhodný pre Windows, Mac a Linux. Ponúka všetko, čo potrebujete pre profesionálnu grafiku a fotografie, vrátane nástrojov pre vrstvy a masky, korekciu farieb, retušovanie a maľovanie. GIMP podporuje všetky hlavné formáty obrázkových súborov.
PicMonkey
PicMonkey je online editor s jednoduchým rozhraním a všetkými základnými funkciami, ako je orezávanie, otáčanie, ovládanie ostrosti, práca s farbami a výber rozlíšenia fotografií. Poskytuje šablóny na vytváranie obrázkov pre reklamy, sociálne príspevky, logá, infografiky a ďalšie. Má a
Pixlr
Pixlr ponúka bezplatný online editor a zdroje dizajnu pre začiatočníkov a profesionálov. Obsahuje nástroje pre farby, kreslenie a úpravu fotografií. S Pixlr pracujete s vrstvami a používate rôzne efekty a filtre. Ak máte záujem, môžete
Viac o optimalizácii obrazu
Veľké obrázky môžu spomaliť váš web, preto je dôležité ich optimalizovať pre web. Nájdenie správneho formátu obrázka pre vaše obrázky zmenou veľkosti a kompresiou môže urobiť zázraky pre rýchlosť načítania vašich webových stránok.
A teraz poznáte dobrú správu: optimalizácia je veľmi jednoduchá! Môžete sa tiež vrátiť a odkazovať na tento článok, kedykoľvek budete potrebovať.
Ak ste pokročilejší používateľ a chcete sa dozvedieť viac o optimalizácii obrázkov pre SEO, odporúčame vám pozrieť si toto video od spoločnosti Google. Prechádza niekoľkými pokročilými tipmi na optimalizáciu obrázkov pre webové stránky. Pozrite si to tu:
Bez ohľadu na to, aké skúsenosti máte ako majiteľ elektronického obchodu, nikdy nezabúdajte na optimalizáciu obrázkov. Dokonca aj tie najjednoduchšie nástroje môžu urobiť vaše obrázky vhodnými pre web. Optimalizáciou svojich obrázkov môžete výrazne ovplyvniť zážitok svojich zákazníkov z nakupovania. Uistite sa, že obrázky vašich produktov sú krásne a rýchlo sa načítavajú!
Ak ste len na začiatku svojej cesty elektronického obchodu a potrebujete vytvoriť internetový obchod, pozrite sa Ecwid od Lightspeed. Umožňuje vám založiť si bezplatný internetový obchod sami, nie sú potrebné žiadne zručnosti v oblasti kódovania alebo dizajnu. Ideálne, ak potrebujete začať predávať online čo najskôr!
