Komprimované obrázky majú mimoriadne pozitívny vplyv na rýchlosť načítania webových stránok. Ako však komprimovať obrázky tak, aby bola strata kvality čo najmenšia a nebola viditeľná? A aké možnosti sú k dispozícii na dosiahnutie tohto cieľa? V tomto sprievodcovi vám poskytneme prehľadný prehľad nástrojov na komprimáciu obrázkov.

Prečo by som mal komprimovať svoje obrázky?

V dnešnej dobe sú obrázky a fotografie s vysokým rozlíšením bežné. V digitálnej fotografii sa zvyšuje počet pixelov a veľkosť súborov. Nech už nahrávate obrázky na svoj web alebo ich len posielate e-mailom, vždy je dôležité udržať veľkosť súborov na minimálnej úrovni. Pamätajte, že čím menší je súbor, tým menej času trvá jeho prenos. To je výhodné z dvoch dôvodov:

  • Rýchly proces načítania zvyšuje spokojnosť návštevníkov (najmä u používateľov s mobilným prístupom k internetu).
  • Rýchle načítanie má pozitívny vplyv na umiestnenie vo vyhľadávačoch.

Správny formát údajov pre online obrázky

Pred zverejnením obrázkov na internete by ste mali skontrolovať formát súboru obrázku. Nie každý grafický formát je vhodný na použitie na internete. Tu je päť typov formátov, ktoré je možné použiť:

  • JPG/JPEG: JPG je jeden z najčastejšie používaných formátov obrázkov. Dokáže zobraziť 16,7 milióna farieb a ponúka vysokú mieru kompresie. Formát JPG sa používa najmä na ukladanie fotografií alebo grafík podobných fotografiám, najmä tých, ktoré obsahujú veľa rôznych farieb a výrazné kontrasty.
  • PNG: Tento formát dokáže zobraziť od 256 (PNG8) do 16,7 milióna (PNG24) rôznych farieb a dá sa používať online. Na rozdiel od JPG sa tento formát dá komprimovať bez straty kvality. Súbory PNG sú vhodné na ukladanie grafiky, log a textov. Obrázky s malým počtom farieb sa dajú komprimovať do súborov, ktoré majú len zlomok pôvodnej veľkosti obrázka.
  • WebP: WebP je moderný formát obrázkov vyvinutý spoločnosťou Google s cieľom poskytovať lepšiu kompresiu pri zachovaní vysokej kvality obrázkov. Podporuje stratovú aj bezstratovú kompresiu, čo vedie k menším veľkostiam súborov v porovnaní s formátmi JPEG a PNG. Vďaka efektívnym algoritmom, ako je prediktívne kódovanie, môže WebP komprimovať obrázky až o 30 % menšie ako JPEG pri podobnej kvalite. Formát tiež podporuje priehľadnosť (alfa kanál) a animácie, čo z neho robí univerzálnu alternatívu k formátom PNG a GIF.
  • SVG: SVG (Scalable Vector Graphics) je formát obrázkov založený na XML, ktorý sa používa pre vektorovú grafiku. Keďže sa opiera o matematické popisy tvarov a čiar, kvalita obrázkov zostáva nezmenená bez ohľadu na zmenšenie. Na rozdiel od formátov založených na pixeloch je možné veľkosť súborov SVG výrazne znížiť prostredníctvom jednoduchých optimalizácií kódu a kompresie gzip bez zníženia vizuálnej kvality. SVG je ideálny najmä pre logá, ikony a ilustrácie na webe.
  • GIF: Súbory GIF sú na webe stále pomerne bežné, aj keď môžu zobrazovať len 256 farieb. Je to hlavne preto, že formát GIF podporuje krátke animácie vytvorené zo sekvencie obrázkov, ktoré sú obzvlášť populárne na sociálnych médiách a podobných platformách.

Možnosť 1: Komprimovať obrázky online

Ak chcete komprimovať obrázky bez nutnosti inštalovať špeciálny softvér, môžete ich ľahko optimalizovať aj online. Na tento účel existujú na webe rôzne ponuky, ktoré vám umožnia komprimovať obrázky bezplatne. Nástroje sa zvyčajne líšia, pokiaľ ide o dostupné formáty súborov a možné stupne kompresie, a často majú obmedzenia týkajúce sa počtu kompresií, ktoré je možné vykonať. Niektoré z najlepších riešení nájdete v nasledujúcich odsekoch.

Optimizilla

Online nástroj Optimizilla od Mediafox Marketing vám umožňuje nahrať a komprimovať až 20 obrázkov naraz. Obrázky musia byť vo formáte JPEG alebo PNG. Webová aplikácia používa kombináciu rôznych kompresných algoritmov, ktoré sa vyznačujú dobrým pomerom kompresie a kvality obrazu. Pomocou posúvača môžete nastaviť stupeň kompresie a potom výsledky stiahnuť jednotlivo alebo spolu ako súbor ZIP.

Obrázok: Image compression with Optimizilla
Once you’ve selected the desired compression level, confirm it in Optimizilla by clicking ‘Apply’. In this example, the image size is reduced by 22 percent.

Aby vám pomohol nájsť najlepšie možné nastavenia, Optimizilla vám poskytuje miniatúry originálu a jeho komprimovanej verzie. Okrem toho tento nástroj uvádza príslušnú veľkosť súboru. Všetky nahraté obrázky sa po jednej hodine automaticky odstránia zo serverov poskytovateľa.

Výhody Nevýhody
Nastaviteľný kompresný pomer Obmedzené na 20 kompresií naraz
Náhľad miniatúr originálnej a upravenej verzie

TinyPNG

TinyPNG umožňuje – na rozdiel od svojho názvu – nielen kompresiu súborov PNG, ale aj súborov JPEG a WebP. V bezplatnej štandardnej verzii môžete optimalizovať až 20 obrázkov týchto troch formátov súčasne, pričom maximálna veľkosť súboru na obrázok je obmedzená na 5 megabajtov.

Obrázok: Screenshot of the TinyPNG website
After compression, TinyPNG will display the new size of the image file(s) and the saved file size (as a percentage).

Nástroj voormedia má preddefinovanú úroveň kompresie, ktorú nie je možné nastaviť, ale zníži veľkosť obrázku až o 80 %. Pomocou funkcie drag-and-drop presuňte požadované fotografie do zobrazeného priestoru a potom si výsledky stiahnite vo formáte JPEG alebo PNG alebo ako súbor ZIP. Alternatívne môžete súbory nahrať do cloudového úložiska Dropbox.

Výhody Nevýhody
Výsledky je možné nahrať do Dropboxu Obmedzenie na 20 súčasných kompresií a veľkosť súboru 5 megabajtov (v štandardnej verzii)
Úroveň kompresie nie je nastaviteľná

iLoveIMG

iLoveIMG je kompletná online sada užitočných nástrojov na úpravu obrázkov. Vývojový tím so sídlom v Barcelone poskytuje aplikácie, ktoré umožňujú orezať, zmeniť veľkosť, konvertovať a dokonca aj komprimovať obrázky. V prípade komprimácie vyberte možnosť „Compress IMAGE“ (Komprimovať obrázok) a potom vložte požadovaný obrázok pomocou funkcie drag-and-drop alebo prehliadača súborov. Možné formáty sú JPEG, PNG, SVG a GIF.

Obrázok: Screenshot of image compression with iLoveIMG
After compression, you can download the images with a simple click.

Hoci iLoveIMG má iba jeden predvolený režim kompresie, tento nástroj ponúka niekoľko rôznych možností exportu. Výsledky je možné nielen stiahnuť na lokálny pevný disk, ale aj nahrať na Google Drive a Dropbox a odoslať odkaz na stiahnutie komprimovaných obrázkov. Ak nie ste spokojní s výsledkom kompresie, môžete ho jednoducho odstrániť kliknutím na ikonu koša.

Výhody Nevýhody
Výsledky je možné nahrať do služieb Google Drive a Dropbox Len jeden režim kompresie
K dispozícii sú ďalšie nástroje na orezávanie, zmenšovanie a konverziu Žiadna funkcia náhľadu

Možnosť 2: Komprimujte obrázky pomocou programu Photoshop

Obrázky môžete komprimovať aj pomocou profesionálnych programov na spracovanie obrázkov. Najpredovšetkým program Photoshop je nepochybne lídrom v tomto odvetví. Okrem funkcií na kreatívny dizajn a optimalizáciu fotografického materiálu ponúka nástroj Adobe rôzne možnosti na zmenu formátu obrázku a úpravu veľkosti obrázku. Pre prevádzkovateľov webových stránok je obzvlášť praktická možnosť „Uložiť pre web“, ktorú spoločnosť Adobe implementovala špeciálne na optimalizáciu fotografií a obrázkov pre webové stránky. V tomto režime je možné komprimovať nielen dôležité webové formáty GIF, PNG, WebP a JPEG, ale aj rastrový grafický formát WBMP (Wireless Bitmap), ktorý je určený pre mobilné zariadenia.

RjA067CaQhY.jpg Na zobrazenie tohto videa sú potrebné súbory cookies tretích strán. Prístup k nastaveniam cookies a ich zmenu môžete vykonať tu.

Hneď ako upravíte obrázok v režime optimalizácie pre web v programe Photoshop, otvorí sa nové okno, v ktorom môžete nielen nastaviť špecifikované cieľové formáty, ale aj optimalizovať požadovaný obrázok pre vašu webovú stránku z hľadiska farebnej hĺbky a veľkosti. V okne náhľadu nástroj Adobe porovnáva pôvodný a cieľový obrázok (vrátane informácií o absolútnej veľkosti súboru), takže pri každom komprimovaní obrázku môžete ľahko vidieť rozdiel.

Výhody Nevýhody
Živé náhľady až troch výsledkov kompresie Vyžaduje vysoký výpočtový výkon
K dispozícii sú rôzne funkcie na úpravu obrázkov Vysoké náklady

Možnosť 3: Komprimujte obrázky pomocou bezplatných a open-source programov

S programom Photoshop je veľmi pohodlné komprimovať obrázky pomocou desktopových aplikácií. Tieto aplikácie nielenže ponúkajú podstatne viac funkcií v základnej verzii, ale majú aj výhodu oproti webovým nástrojom, pretože ich možno používať bez existujúceho pripojenia k internetu. Ak však chcete znížiť veľkosť obrázkov na svojom webe, nemusíte nutne používať prémiové riešenie, ako je produkt spoločnosti Adobe alebo iná platená alternatíva. Ak máte obmedzený rozpočet alebo nemáte záujem o zložitejšie funkcie úprav, freeware alebo open-source program vám môže pomôcť dosiahnuť prvotriedne výsledky optimalizácie, pokiaľ ide o fotografie, obrázky atď. Ale ktoré z mnohých bezplatných nástrojov sú skutočne odporúčané?

IrfanView

Od roku 1996 je prehliadač obrázkov IrfanView jedným z najpopulárnejších freeware riešení pre počítače s operačným systémom Windows. Podľa vývojára tento nástroj v priemere okolo jedného milióna stiahnutí za mesiac! Toto impozantné číslo je pravdepodobne výsledkom atraktívneho licenčného modelu: pre osobné použitie je úplne zadarmo, zatiaľ čo komerčné použitie vyžaduje licenciu, ktorá stojí len dvojcifernú sumu.

Obrázok: Screenshot of IrfanView
If you save your image as a JPEG using the standard version of IrfanView (without plugins), you can easily adjust the quality using a slider.

Prehliadač obrázkov štandardne podporuje viacero formátov obrázkov, ako napríklad PNG, JPEG, GIF, BMP, WebP a mnoho ďalších. Po vložení obrázku ho môžete kedykoľvek previesť do týchto formátov. Ak však ide o kompresiu obrázkov špeciálne pre web, odporúča sa funkcia „Uložiť pre web“, ktorú je možné pridať prostredníctvom doplnku. Toto rozšírenie vám umožňuje optimalizovať súbory obrázkov a fotografií, pričom pomocou posuvníka môžete nastaviť, do akej miery sa má zachovať pôvodná kvalita obrázku. Náhľad obrázku a veľkosť komprimovaného súboru vám poskytnú predstavu o tom, ako bude vyzerať konečný výsledok.

Výhody Nevýhody
Možnosť spracovania zásobníka Kompresný plugin je k dispozícii len v angličtine
Funkcia náhľadu a nastaviteľná úroveň kompresie

GIMP

Pri hľadaní alternatív k programu Photoshop z oblasti open source sa nevyhnutne stretnete s programom GIMP (GNU Image Manipulation Program). Grafický program pre Linux, macOS a Windows, ktorý bol vydaný v roku 1998, už roky ohromuje ľudí svojou rozmanitosťou funkcií, ktoré sú veľmi podobné funkciám komerčného modelu spoločnosti Adobe. V súčasnosti podporuje viac ako tridsať formátov súborov, vrátane GIF, WebP, JPEG a PNG, ktoré sú kľúčovými formátmi pre web. To znamená, že pomocou softvéru GIMP môžete kedykoľvek konvertovať svoje obrazové súbory do jedného z týchto webových formátov.

Obrázok: Screenshot of GIMP
Exporting image as WebP with GIMP

Okrem konverzie obrázkov do menšieho formátu súborov ponúka GIMP aj pokročilé možnosti exportu, ktoré vám umožnia ľahko komprimovať obrázky. Pomocou posuvníka nastavte stupeň kompresie. Praktické sú aj rozšírené možnosti: ak napríklad aktivujete vlastnosť „Progressive“, výsledok bude o niečo väčší, ale jednotlivé oblasti sa načítajú v určitom poradí, takže aj po krátkom čase načítania sa zobrazí hrubý náhľad celého obrázka.

Výhody Nevýhody
Otvorený zdroj Náhľad zobrazuje iba veľkosť výsledného súboru
Stupeň kompresie je nastaviteľný

PNGGauntlet

Bezplatný program PNGGauntlet poskytuje grafické používateľské rozhranie pre tri open-source nástroje PNGOUT, OptiPNG a DeflOpt, ktoré boli vyvinuté na optimalizáciu a kompresiu obrázkov vo formáte PNG. Táto aplikácia, ktorá je k dispozícii iba pre Windows, je preto ideálnym riešením na vytváranie veľmi malých log, grafiky a písma vo formáte PNG pre váš webový projekt. Okrem formátu PNG sú možné aj formáty JPEG, GIF, TIFF a BMP ako výstupné formáty pre proces kompresie alebo konverzie.

Obrázok: Screenshot of the PNGGauntlet interface
If you tick ‘Overwrite Original Files’, PNGGauntlet automatically replaces the original image with the newly created file.

Existujú dva spôsoby kompresie obrázkov pomocou PNGGauntlet. Môžete pristúpiť k štandardnému nastaveniu vložením jedného alebo viacerých obrázkov a stlačením tlačidla „Optimize!“ (Optimalizovať!), alebo môžete najskôr vybrať individuálne nastavenie úpravou nastavení troch implementovaných nástrojov kliknutím na tlačidlo s rovnakým názvom. Bez ohľadu na to, ktorý spôsob si vyberiete, freeware nástroj vám po úspešnej kompresii zobrazí novú veľkosť obrazového súboru (v porovnaní s originálom) v percentách.

Výhody Nevýhody
Jednoduché spracovanie zásobníka Žiaden režim náhľadu
Možnosť individuálneho nastavenia úrovne kompresie Obmedzenie na formát PNG ako výstupný formát
Najnovšia verzia je z roku 2012

ImageOptim

Ak chcete komprimovať obrázky a fotografie svojho webového projektu a potrebujete open-source nástroj pre macOS, odporúčame ImageOptim od Kornela Lesinského. Tento program s licenciou GPL kombinuje niekoľko nástrojov na optimalizáciu obrázkov, ako sú MozJPEG, pngquant a SVGO, čo vám umožňuje nielen odstrániť nepotrebné metadáta EXIF, ale aj komprimovať rôzne formáty obrázkov, ako sú JPEG, SVG, GIF a PNG.

Obrázok: Screenshot of ImageOptim
Once you’ve dragged your file into the tool, the compression process begins automatically. A green tick indicates that the compression was successful.

Pomocou funkcie drag-and-drop môžete umiestniť požadované obrazové súbory do programu ImageOptim, kde ich program okamžite začne komprimovať. Nastavenia však môžete kedykoľvek zmeniť a upraviť úroveň kompresie a pridať alebo odstrániť možnosti. Stačí kliknúť na tri bodky a pokračovať. Potom stačí kliknúť na „Znovu“, aby sa konverzia vykonala ešte raz.

Výhody Nevýhody
Rôzne kompresné funkcie Žiaden režim náhľadu
Otvorený zdroj
Prejsť na hlavné menu