BLOG

1. Vyber správny formát obrázka

Každý formát má svoje miesto, a tu je rýchly prehľad:

• JPEG: Ideálny pre fotografie a obrázky s mnohými farbami. Kompresiou sa dá výrazne znížiť veľkosť bez straty kvality.
• PNG: Perfektný na grafiku s transparentným pozadím, ale pozor na veľkosť – PNG sú väčšie.
• WebP: Moderný formát, ktorý kombinuje výhody JPEG a PNG. Podporuje vysokú kvalitu pri menšej veľkosti.
• SVG: Najlepšia voľba pre ikonky a vektorovú grafiku – sú škálovateľné a nezaberajú veľa miesta.

2. Komprimuj obrázky bez straty kvality

Kompresia je základ. Používaj nástroje, ktoré zmenšia veľkosť obrázkov, pričom zachovajú ich kvalitu:

• Online nástroje: PicfloW, TinyPNG, TinyJPG, CompressJPEG.
• Softvér: Adobe Photoshop (funkcia „Save for Web“), GIMP.
• Pluginy pre WordPress: Smush, Imagify alebo ShortPixel, ktoré automaticky komprimujú obrázky pri nahrávaní.

3. Zmenšuj rozmery obrázkov podľa potreby

Nie je dôvod nahrávať obrázok s rozlíšením 4000×3000 pixelov, ak ho na stránke zobrazíš ako 600×400. Pred nahraním obrázok orež na požadovanú veľkosť pomocou nástrojov ako:

• Canva
• GIMP
• Adobe Photoshop

4. Používaj lazy loading (oneskorené načítanie)

Lazy loading zabezpečí, že sa obrázky načítavajú až vtedy, keď ich používateľ potrebuje vidieť. To znižuje čas načítania stránky a šetrí šírku pásma. Väčšina moderných CMS (napr. WordPress) už podporuje lazy loading automaticky.

5. Optimalizuj názvy súborov a alt text

Správne pomenovanie obrázkov a pridanie alt textu zlepšuje SEO a prístupnosť:

• Názov súboru: Používaj popisné názvy, napríklad „krasny-vyhlad-na-tatry.jpg“, namiesto „IMG12345.jpg“.
• Alt text: Pomáha vyhľadávačom pochopiť obsah obrázka a je kľúčový pre nevidiacich používateľov.

6. Používaj CDN pre rýchlejšie načítanie

Content Delivery Network (CDN) ako Cloudflare alebo BunnyCDN rozmiestni obrázky na viaceré servery po celom svete. Keď používateľ načítava tvoju stránku, obsah sa stiahne z najbližšieho servera, čím sa zlepší rýchlosť.

7. Zváž použitie moderných technológií

• Responsive images: Používaj tag <picture> a atribút srcset, aby sa obrázky automaticky prispôsobili rozlíšeniu zariadenia.
• WebP: Ak tvoj web ešte nepodporuje WebP, je čas to zvážiť. Väčšina prehliadačov ho už podporuje a ušetrí ti desiatky percent veľkosti súborov.

8. Testuj a kontroluj rýchlosť načítania

Pravidelne kontroluj svoju stránku pomocou nástrojov ako:

• Google PageSpeed Insights
• GTmetrix
• Pingdom

Tieto nástroje ti ukážu, či sú obrázky správne optimalizované a kde máš rezervy.

9. Pravidelne čistite mediálnu knižnicu

Staré a nepoužívané obrázky môžu zaťažovať tvoj webový server. Raz za čas si urob poriadok v mediálnej knižnici a vymaž to, čo už nepotrebuješ.

Záver:

Optimalizácia obrázkov nie je iba o tom, aby stránka vyzerala pekne. Ide o to, aby bola rýchla, užívateľsky prívetivá a ľahko dostupná pre vyhľadávače. Ak budeš postupovať podľa týchto krokov, tvoja stránka bude lietať ako raketa a tvoji návštevníci ti poďakujú!

Môj tip: Ja osobne používam on-line nástroj na kompresiu obrázkov do formátu WEBP ktorý je zdarma a bez obmedzení. Volá sa PICFLOW a nájdete ho na tomto odkaze: https://picflow.com/convert/jpg-to-webp

Ak máš otázky alebo chceš vedieť viac o konkrétnych nástrojoch, napíš mi!