Ako optimalizovať obrázky pre výkon webu bez straty kvality

Vedeli ste, že optimalizácia obrázkov pred odovzdaním do WordPress môže mať obrovský vplyv na rýchlosť vašich webových stránok?


Keď začínate nový blog, veľa začiatočníkov jednoducho odovzdáva obrázky bez ich optimalizácie pre web. Tieto veľké obrázkové súbory spomaľujú vaše webové stránky.

Môžete to vyriešiť pomocou osvedčených postupov optimalizácie obrázkov ako súčasti svojej bežnej blogovacej činnosti.

V tomto článku vám ukážeme, ako optimalizovať obrázky pre rýchlejší výkon na webe bez straty kvality. Budeme zdieľať aj doplnky pre automatickú optimalizáciu obrázkov pre WordPress, ktoré vám uľahčia život.

Ako optimalizovať obrázky v WordPress (krok za krokom)

Keďže ide o komplexného sprievodcu optimalizáciou obrázkov pre web, vytvorili sme ľahko sledovateľnú tabuľku obsahu:

    Čo je to Optimalizácia obrazu? (Optimalizované v porovnaní s neptimizovanými obrázkami)

    Optimalizácia obrazu je proces ukladania a poskytovania obrázkov v najmenšej možnej veľkosti súboru bez zníženia celkovej kvality obrazu.

    Aj keď tento proces znie komplexne, v týchto dňoch je v skutočnosti dosť jednoduché. Jeden z mnohých doplnkov a nástrojov na optimalizáciu obrázkov môžete použiť na automatickú kompresiu obrázkov až o 80% bez viditeľnej straty kvality obrázkov..

    Tu je príklad optimalizovaného a neoptimalizovaného obrázka:

    Optimalizované v porovnaní s neoptimalizovanými obrázkami vo WordPress

    Ako vidíte, pri správnej optimalizácii môže byť rovnaký obrázok o 75% menší ako originál bez straty kvality.

    Ako funguje optimalizácia obrázkov?

    Jednoducho povedané, optimalizácia obrazu funguje pomocou kompresnej technológie ako „Lossy“ a „Lossless“, ktorá pomáha zmenšiť celkovú veľkosť súboru bez výraznej straty kvality..

    Čo to znamená optimalizovať obrázky?

    Ak ste niekedy dostali odporúčanie na optimalizáciu obrázkov prostredníctvom podpory hosťovania WordPress alebo pomocou nástroja na testovanie rýchlosti, znamená to len to, že musíte znížiť veľkosť súborov svojich obrázkov optimalizáciou pre web..

    Prečo je optimalizácia obrazu dôležitá? Aké sú výhody optimalizácie obrazu?

    Aj keď existuje veľa výhod optimalizácie obrázkov, nižšie uvádzame tie najlepšie, ktoré by ste mali vedieť:

    • Vyššia rýchlosť webových stránok
    • Vylepšené SEO poradie
    • Vyšší celkový konverzný pomer pre predaj a potenciálnych zákazníkov
    • Menšie úložisko a šírka pásma (čo môže znížiť náklady na hosting a CDN)
    • Rýchlejšie zálohovanie webových stránok (tiež znižuje náklady na zálohovanie)

    Okrem videa sú obrázky ďalšou najťažšou položkou na webovej stránke. Podľa archívu HTTP, obrázky tvoria v priemere 21% celkovej hmotnosti webovej stránky.

    Keďže vieme, že rýchle webové stránky sú vo vyhľadávačoch (SEO) vyššie a majú lepšie konverzie, optimalizácia obrázkov je niečo, čo musí každá obchodná webová stránka urobiť, ak chce uspieť online..

    Teraz by vás zaujímalo, aký veľký rozdiel môže optimalizácia obrazu skutočne priniesť?

    Podľa štúdie Strangeloop vás jednosekundové oneskorenie v načítaní webových stránok môže stáť 7% predaja, o 11% menej zobrazení stránok a 16% zníženie spokojnosti zákazníkov..

    Ako rýchlosť ovplyvňuje vaše webové stránky

    Ak tieto dôvody nie sú dostatočné na zrýchlenie vášho webu, mali by ste vedieť, že vyhľadávacie nástroje, ako je Google, tiež poskytujú preferenčné zaobchádzanie so SEO pre rýchlejšie načítanie webových stránok..

    To znamená, že optimalizáciou obrázkov pre web môžete zvýšiť rýchlosť webových stránok a zvýšiť hodnotenie SEO WordPress.

    Výukový program pre video

    Prihláste sa na odber WPBeginner

    Ak uprednostňujete písomné pokyny, čítajte ďalej.

    Ako ukladať a optimalizovať obrázky pre výkon webu?

    Kľúčom k úspešnej optimalizácii obrazu pre webový výkon je nájsť perfektnú rovnováhu medzi najnižšou veľkosťou súboru a prijateľnou kvalitou obrázka.

    Pri optimalizácii obrazu zohrávajú veľkú úlohu tri veci:

    • Formát obrazového súboru (JPEG verzus PNG verzus GIF)
    • Kompresia (vyššia kompresia = menšia veľkosť súboru)
    • Rozmery obrázka (výška a šírka)

    Výberom správnej kombinácie týchto troch možností môžete zmenšiť veľkosť obrázka až o 80%.

    Pozrime sa na každú z nich podrobnejšie.

    1. Formát obrazového súboru

    Pre väčšinu vlastníkov webových stránok sú najdôležitejšie iba tri formáty obrazových súborov, a to JPEG, PNG a GIF. Pri výbere správneho typu súboru hrá dôležitú úlohu pri optimalizácii obrázkov.

    Ak chcete veci zjednodušiť, chcete použiť obrázky JPEG pre fotografie alebo obrázky s množstvom farieb, obrázky PNG pre jednoduché obrázky alebo v prípade, že potrebujete priehľadné obrázky, a GIF iba pre animované obrázky..

    Pre tých, ktorí nepoznajú rozdiel medzi jednotlivými typmi súborov, je obrazový formát PNG nekomprimovaný, čo znamená, že ide o obraz vyššej kvality. Nevýhodou je, že veľkosti súborov sú omnoho väčšie.

    Na druhej strane, JPEG je komprimovaný formát súboru, ktorý mierne znižuje kvalitu obrazu, aby poskytol výrazne menšiu veľkosť súboru.

    Kým GIF používa iba 256 farieb spolu s bezstratovou kompresiou, čo z neho robí najlepšiu voľbu pre animované obrázky.

    Vo WPBeginner používame všetky tri formáty obrázkov založené na type obrázka.

    2. Kompresia

    Ďalšou vecou je kompresia obrazu, ktorá zohráva pri optimalizácii obrazu obrovskú úlohu.

    K dispozícii sú rôzne typy a úrovne kompresie obrázkov. Nastavenia pre každú z nich sa budú líšiť v závislosti od používaného nástroja na kompresiu obrazu.

    Väčšina nástrojov na úpravu obrázkov, ako sú Adobe Photoshop, On1 Photo, GIMP, Affinity Photo a ďalšie, sa dodáva so zabudovanými funkciami kompresie obrázkov..

    Obrázky tiež môžete ukladať normálne a potom použiť webový nástroj ako TinyPNG alebo JPEG Mini pre ľahšiu kompresiu obrázkov.

    Aj keď je to trochu manuálne, tieto dve metódy vám umožňujú komprimovať obrázky pred ich odovzdaním do WordPress, a to robíme na WPBeginner.

    Existuje tiež niekoľko populárnych doplnkov WordPress, ako napríklad Optimole, EWWW Image Optimizer, a ďalšie, ktoré dokážu obrázky automaticky komprimovať, keď ich prvýkrát nahráte. Mnoho doplnkov a dokonca veľkých spoločností uprednostňuje použitie týchto doplnkov na optimalizáciu obrázkov, pretože je to jednoduché a pohodlné.

    Viac informácií o týchto doplnkoch WordPress sa budeme deliť ďalej v tomto článku.

    3. Rozmery obrázka

    Normálne má pri importe fotografie z telefónu alebo digitálneho fotoaparátu veľmi vysoké rozlíšenie a veľké rozmery súboru (výška a šírka)..

    Zvyčajne majú tieto fotografie rozlíšenie 300 DPI a rozmery začínajúce od 2000 pixelov a viac. Tieto vysoko kvalitné fotografie sú vhodné na publikovanie v tlači alebo na ploche. Nie sú vhodné pre webové stránky.

    Zmenšenie rozmerov súboru na niečo primeranejšie môže výrazne znížiť veľkosť obrazového súboru. Môžete jednoducho zmeniť veľkosť obrázkov pomocou softvéru na úpravu obrázkov v počítači.

    Napríklad sme optimalizovali fotografiu s pôvodnou veľkosťou súboru 1,8 MB, rozlíšením 300 DPI a rozmermi obrázka 4900 × 3200 pixelov..

    Pre vyššiu kompresiu sme vybrali formát JPEG, zmenili sme rozmery na 1 200 × 795 pixelov a veľkosť súboru obrázka sa zmenila na 103 kB. To je o 94% menej ako pôvodná veľkosť súboru.

    Teraz, keď poznáte tri dôležité faktory v optimalizácii obrázkov, pozrime sa na rôzne nástroje na optimalizáciu obrázkov pre majiteľov webových stránok.

    Najlepšie nástroje a programy na optimalizáciu obrazu

    Ako sme už spomenuli, väčšina softvéru na úpravu obrázkov sa dodáva s optimalizáciou a nastavením kompresie.

    Okrem softvéru na úpravu obrázkov existuje aj niekoľko výkonných bezplatných nástrojov na optimalizáciu obrázkov, ktoré môžete použiť na optimalizáciu obrázkov pre web (iba niekoľkými kliknutiami)..

    Tieto nástroje odporúčame použiť na optimalizáciu obrázkov pred ich odovzdaním do WordPress, najmä ak ste perfekcionista.

    Táto metóda vám pomôže ušetriť miesto na disku na hosťujúcom účte WordPress a zaručuje najrýchlejší obraz v najlepšej kvalite, pretože ručne kontrolujete každý obrázok.

    Adobe Photoshop

    Adobe Photoshop je prémiový softvér, ktorý sa dodáva s funkciou ukladania obrázkov optimalizovaných pre web. Jednoducho otvorte svoj obrázok a kliknite na možnosť „Súbor» Uložiť na web “.

    Otvorí sa nové dialógové okno. Vpravo môžete nastaviť rôzne formáty obrázkov. Vo formáte JPEG sa zobrazia rôzne možnosti kvality. Po výbere možností sa v ľavom dolnom rohu zobrazí aj veľkosť súboru.

    Ukladanie obrázkov optimalizovaných pre web pomocou aplikácie Photoshop

    GIMP

    GIMP je bezplatná a otvorená alternatíva k populárnemu programu Adobe Photoshop. Môže sa použiť na optimalizáciu vašich obrázkov pre web. Nevýhodou je, že nie je tak jednoduché ako niektoré iné riešenia v tomto zozname.

    Najprv musíte otvoriť svoj obrázok v GIMP a potom vybrať Súbor »Exportovať ako voľba. Zobrazí sa dialógové okno na uloženie súboru. Pomenujte svoj nový názov a potom kliknite na tlačidlo exportu.

    Exportujte obrázok do GIMP

    Týmto sa zobrazia možnosti exportu obrázkov. Pre súbory JPEG môžete vybrať úroveň kompresie, aby sa zmenšila veľkosť súboru. Nakoniec kliknutím na tlačidlo export uložíte optimalizovaný súbor obrázka.

    TinyPNG

    TinyPNG je bezplatná webová aplikácia, ktorá využíva inteligentnú stratovú kompresnú techniku ​​na zmenšenie veľkosti vašich súborov PNG. Jediné, čo musíte urobiť, je ísť na ich webovú stránku a nahrať svoje obrázky (jednoduchý ťah & pokles).

    Použitie TinyPNG na optimalizáciu obrázkov pre WordPress

    Komprimujú obrázok a poskytnú vám odkaz na stiahnutie. Na kompresiu obrázkov JPEG môžete použiť ich sesterskú webovú stránku TinyJPG.

    Majú tiež rozšírenie pre Adobe Photoshop, čo používame ako súčasť nášho procesu úpravy obrázkov, pretože kombinuje to najlepšie z TinyPNG a TinyJPG vo Photoshope..

    Pre vývojárov majú rozhranie API na automatickú konverziu obrázkov a pre začiatočníkov majú doplnok WordPress, ktorý ho automaticky dokáže urobiť (viac o tom neskôr).

    JPEG Mini

    JPEGmini používa bezstratovú kompresnú technológiu, ktorá výrazne znižuje veľkosť obrázkov bez toho, aby to ovplyvnilo ich vnímavú kvalitu. Môžete tiež porovnať kvalitu pôvodného obrázka a komprimovaného obrázka.

    JPEGMini online nástroj na kompresiu obrázkov

    Môžete použiť ich webovú verziu zadarmo alebo si program kúpiť pre svoj počítač. Majú tiež platené API na automatizáciu procesu vášho servera.

    ImageOptim

    ImageOptim je utilita Mac, ktorá umožňuje komprimovať obrázky bez straty kvality nájdením najlepších parametrov kompresie a odstránením nepotrebných farebných profilov..

    ImageOptim

    Windows alternatívou k tomu je Trimage.

    Najlepšie doplnky pre optimalizáciu obrázkov pre WordPress

    Sme presvedčení, že najlepší spôsob, ako optimalizovať svoje obrázky, je urobiť to pred ich odovzdaním do WordPress. Ak však prevádzkujete web pre viacerých autorov alebo potrebujete automatizované riešenie, môžete vyskúšať doplnok na kompresiu obrázkov WordPress.

    Nižšie je uvedený zoznam najlepších doplnkov na kompresiu obrázkov WordPress:

    1. Optimole – populárny doplnok od tímu za ThemeIsle.
    2. EWWW Image Optimizer
    3. Komprimujte JPEG & Obrázky PNG – plugin od tímu TinyPNG uvedený vyššie v článku.
    4. Predstavte si – doplnok populárneho tímu doplnkov WP Rocket.
    5. Nástroj na optimalizáciu obrázkov ShortPixel
    6. WP Smush
    7. reSmush.it

    Použitie ktoréhokoľvek z týchto doplnkov na optimalizáciu obrázkov WordPress vám pomôže zrýchliť vaše webové stránky.

    Záverečné myšlienky a osvedčené postupy pre optimalizáciu obrazu

    Ak neukladáte obrázky optimalizované pre web, musíte to začať robiť hneď teraz. Rýchlosť vášho webu to výrazne zmení a vaši používatelia vám za to poďakujú.

    Nehovoriac o tom, rýchlejšie webové stránky sú skvelé pre SEO a pravdepodobne uvidíte zvýšenie rebríčka vo vyhľadávačoch.

    Okrem optimalizácie obrázkov vám dve veci, ktoré vám výrazne pomôžu zrýchliť vaše webové stránky, používajú plugin pre ukladanie do vyrovnávacej pamäte WordPress a WordNess CDN..

    Prípadne môžete použiť spravovanú hostingovú spoločnosť WordPress, pretože často ponúkajú ako súčasť platformy medzipamäť a CDN.

    Dúfame, že tento článok vám pomohol naučiť sa, ako optimalizovať obrázky v programe WordPress. Môžete tiež navštíviť nášho sprievodcu o tom, ako vylepšiť zabezpečenie WordPress a najlepšie pluginy WordPress pre obchodné webové stránky.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map