WebSupport blog

Prečo a ako optimalizovať obrázky na webstránke?

Rýchlosť načítania webstránok je jednou z vlastností, podľa ktorej Google radí výsledky svojho vyhľadávania. Aj napriek tomu obsah stránok zapĺňajú nadrozmerné obrázky, ktoré ich spomaľujú a mobilných užívateľov iritujú. Riešenie, ako tomu zabrániť, je pri tom úplne jednoduché.

Dôležitosť rýchleho načítania webstránok potvrdzujú aj prieskumy. Až 53 % mobilných návštevníkov zruší otváranie stránky, ak jej načítavanie trvá dlhšie ako 3 sekundy, vyplýva zo štúdie The Need for Mobile Speed.

Pokiaľ inzerujete na Googli, rýchlosť vášho webu by mala byť najväčšou prioritou. Majitelia webstránok, ktoré sa na mobilných zariadenia načítajú do piatich sekúnd, dosahujú až 2-krát viac konverzií z mobilnej reklamy ako tí, ktorých stránky sa načítavajú dlhšie.

Zdroj: Kissmetrics

Pre optimalizovanie obrázkov by stačilo zmenšiť ich formát a rozlíšenie, čo zvládne aj ten najviac basic grafický editor. No existujú nástroje, ktoré ponúkajú komplexnú optimalizáciu. Sú to tooly, ktoré bez zmenšenia rozmerov a minimálnej zmeny kvality dokážu zmenšiť veľkosť obrázka aj o niekoľko desiatok percent.

PNGGauntlet (Windows)

Tento soft v sebe zahŕňa kombináciu nástrojov PNGOUT, OptiPNG, DeflOpt a dokáže konvertovať JPG, GIF, TIFF a BMP do formátu PNG. PNGGauntlet je dostupný iba vo verzii pre Windows, no samotní autori ako alternatívu pre Mac odporúčajú ImageOptim alebo Trimage pre Linux.

Prečo PNG? Pretože ponúka vynikajúci pomer kvality a veľkosti, čo z neho robí najvhodnejší formát určený pre obrázky umiestnené na webe.

Compressor (online)

Online nástroj s podporou JPEG, PNG, GIF a SVG súborov. Dokáže komprimovať v dvoch úrovniach – s vysokou kompresiou alebo bez straty kvality.

TinyPNG (online)

Môj obľúbený online tool na komprimovanie fotografií. Optimalizuje a do PNG prevádza PNG aj JPEG obrázky. Na jednu šupu ich dokáže previesť až 20, ktoré si neskôr môžete uložiť na disk alebo Dropbox.

Vyznávači offline riešení si môžu stiahnuť plug-in do Photoshopu. Pre Windows aj Mac. Podporuje CS5, CS6 aj CC.

ReSRC.it (online)

Tento nástroj ponúka dynamickú optimalizáciu obrázkov pre akékoľvek zariadenie. To znamená, že obrázky nemajú fixnú veľkosť, ale komprimujú sa na základe zariadenia priamo v kóde stránky. ReSRC.it podporuje HiDPI rozlíšenie, HTML/CSS implementáciu a kladie dôraz na pixel perfect.

ImageAlpha (Mac)

Nástroj určený pre Mac, konvertuje 24-bitové PNG súbory do úspornejšieho 8-bitového PNG formátu. Optimalizácia zredukuje počet farieb a tým zmenší aj celkovú veľkosť súboru. Na výber máte tri úrovne kompresie – Median Cut, Posterizer alebo Dithered.

JPEGmini (online + desktop)

Ako je už z názvu jasné, tento tool optimalizuje JPEG obrázky. Pri zachovaní JPEG formátu dokáže zmenšiť veľkosť súboru až 5-násobne. Okrem webového rozhrania je nástroj dostupný aj v platenej verzii JPEGmini, Pro a Server.

Pokiaľ vás téma UX zaujala, prečítajte si aj ďalšie tipy, ako posilniť používateľský zážitok návštevníkov stránky. Okrem iného zistíte aj to, aké faktory najviac ovplyvňujú správanie návštevníkov.

Komentáre