Optimalizácia obrazu v agentúre WordPress Digital Craft Agency

Optimalizácia obrazu v porovnaní s optimalizáciou iného ako obrazu

Optimalizácia obrazu je proces úspory miesta bez zníženia kvality obrázkov. Tento proces môže byť dlhý, ak je počet obrázkov veľký a ak obrázky „veľmi vážia“. Aj keď sa tento proces môže zdať zložitý, je celkom ľahký. V dnešnej dobe technológia pokročila dosť veľa a teraz je možné tento proces automatizovať. Na optimalizáciu obrázkov vo WordPress môžete použiť doplnky a nástroje, ktoré automaticky komprimujú obrázky. Zvyčajne zmenšia veľkosť obrázkov na 80% bez straty vizuálnej kvality.

Optimalizovaný obrázok môže byť až o 75% menší ako originál, najmä pokiaľ ide o obrázky pre online prostredie.

Odporúča sa optimalizovať obrázky a toto odporúčanie spĺňame ako medzi nástrojmi, ktoré kontrolujú rýchlosť načítania stránok, tak medzi špecialistami.

Ako funguje optimalizácia obrazu?

Zjednodušene povedané, proces optimalizácie využíva technológiu, ktorá komprimuje obrázky a pomáha tak zmenšiť priestor, ktorý zaberajú, bez toho, aby si všimla stratu kvality ľudského oka.

Výhody optimalizácie

Najdôležitejšie výhody optimalizácie obrazu sú nasledujúce:

zníženie rýchlosti načítania stránky;
zlepšenie skóre SEO;
vylepšená konverzia pre predaj;
nízka spotreba použitého priestoru;
nízka spotreba šírky pásma na internete;
zníženie nákladov na hosťovanie a CDN;
rýchlejšia podpora.

Okrem natáčania sú obrázky na webovej stránke najťažšími prvkami. Predstavujú asi 21% „váhy“ webovej stránky.

Pretože vieme, že na rýchlosti načítania stránok záleží aj v procese optimalizácie pre vyhľadávače (SEO), mal by optimalizáciu robiť každý. Bez ohľadu na typ stránok vám táto optimalizácia môže pomôcť uspieť na internete. Podľa niektorých štúdií vás môže sekundové oneskorenie načítania stránky stáť až 7% z predaja, 11% zobrazení a 16% spokojnosť zákazníka. Ak tieto štatistické údaje nie sú pre prácu dostatočne dôležité, mali by ste vedieť, že Google ponúka prednostné zaobchádzanie s rýchlymi stránkami.

Ako ušetriť miesto optimalizáciou obrázka?

Kľúčom k správnej optimalizácii z hľadiska používania obrázkov na internete je nájsť rovnováhu medzi kvalitou a priestorom. Mali by ste vedieť, že nehovoríme všeobecne o optimalizácii obrazu. Vyhradené obrázky pre filmy, fotoalbumy atď. By sa nemali optimalizovať, pretože sa používajú offline. Podľa toho musia byť optimalizované obrázky použité iba na internete a zobrazené na webových stránkach. Existujú tri prvky, ktoré majú obrovský vplyv na optimalizáciu:

obrazový formát (JPEG, PNG, GIF);
kompresia (vyššia úroveň kompresie = menší súbor);
rozmery obrazu (výška a šírka);

Výberom dokonalej kombinácie týchto troch prvkov môžete znížiť „váhu“ obrazu až o 80%;

Formát obrázka

Pre väčšinu majiteľov stránok existujú iba tri dôležité rozšírenia obrázkov: JPEG (JPG), PNG, GIF. Výber správneho formátu zohráva pri optimalizácii dôležitú úlohu.

Jednoducho povedané, chcete použiť JPEG pre viacfarebné obrázky, PNG pre jednoduché alebo priehľadné obrázky na pozadí a GIF pre animované obrázky.

PNG je nekomprimovaný formát, ktorý ponúka vynikajúcu kvalitu obrazu. Problém je, že ich veľkosť je príliš veľká. Na druhej strane, JPEG je komprimovaný formát a mierne znižuje kvalitu obrazu. Obrázky JPEG teda zaberajú menej miesta na serveri, ktorý vás hostí. GIFy používajú iba 256 farieb a sú to tiež komprimované obrázky. Sú ideálne na animované obrázky.

Beh programu

Existuje niekoľko úrovní kompresie obrazu. Každá úroveň je definovaná nástrojom použitým na kompresiu.

Väčšina editorov obrázkov ako Adobe Photoshop, GIMP, Affinity Photo, On1 Photo má vlastnú funkciu kompresie obrázkov.

Môžete uložiť obrázky do počítača a potom použiť online nástroj ako TinyPNG alebo JPEG Mini na ľahkú kompresiu.

Tieto dve metódy vám pomôžu optimalizovať obrázky pred ich nahraním na WordPress. Existujú ale aj doplnky WordPress, ktoré vám pomôžu automaticky ich optimalizovať po načítaní. Mnoho ľudí uprednostňuje použitie týchto doplnkov. Patria sem Smush, Optimole, EWWW a Image Optimizer.

Rozmery obrázka

Spravidla platí, že keď importujete fotografiu z telefónu alebo digitálneho fotoaparátu, má veľmi vysoké rozlíšenie a veľmi veľkú veľkosť. Tieto fotografie majú minimálne rozlíšenie 300 dpi a veľkosti začínajúce na 2 000 pixeloch. Sú ideálne na tlač alebo na použitie na počítači. Nie sú vhodné na zobrazenie v online priestore.

Zmenšenie veľkosti (výšky a šírky) automaticky zníži „váhu“ obrázka. Funkciu Zmena veľkosti môžete použiť pomocou editora obrázkov v počítači.

Napríklad som optimalizoval fotografiu 1,8 MB, rozlíšenie 300 DPI a 4900 x 3200 pixelov. Pre lepšiu kompresiu som zvolil formát JPEG a zmenil som veľkosť fotografie na 1 200 x 795 pixelov, čím som obrázok zmenšil na 103 kB. Stratilo sa 94% hmotnosti pôvodnej fotografie.

Editori a nástroje na optimalizáciu obrázkov

Predtým sme spomínali niektoré editory obrázkov, ale aj online nástroje a doplnky WordPress, ktoré dokážu optimalizovať obrázky. Pred nahraním na WordPress odporúčame použiť nástroje, ktoré vám pomôžu optimalizovať. Týmto spôsobom rýchlejšie ušetríte miesto na serveri, ktorý hostí vaše stránky.

Adobe Photoshop je najobľúbenejší editor obrázkov. Je licencovaný, takže nie je zadarmo. Jeho funkciou kompresie je ukladanie obrázkov, aby ich bolo možné optimalizovať pre web. Jednoducho použite konkrétnu funkciu ukladania, po ktorej zvolíte formát obrázka a rôzne možnosti kvality, ak pre tento formát existujú. Môžete tiež vidieť rozmery, ale aj „váhu“ obrázka.

Gimp je ďalší populárny editor obrázkov, pravdepodobne najpopulárnejší bezplatný editor. Je to milovaná alternatíva k programu Adobe Photoshop. Môže sa použiť na optimalizáciu webových obrázkov, ale nemá toľko možností ako Photoshop. Akonáhle otvoríte obrázok v GIMPe, musíte ho exportovať ako JPEG, aby ste ho skomprimovali.

TynyPNG je bezplatný online nástroj, ktorý vám pomôže zmenšiť veľkosť obrázkov PNG. Stačí prejsť na web a nahrať súbory PNG alebo JPEG na kompresiu. K dispozícii je tiež doplnok WordPress, ale aj rozšírenie pre Adobe Photoshop tejto služby.

Prečítajte si tiež príručku uvedenú v článku: Úpravy obrázkov pomocou editora WordPress.