Nemáte radi obrázky?

Dokážu premeniť kus textu na pútavý zážitok pri čítaní. Obrázky vylepšujú príspevok na blogu, umožňujú jeho zdieľanie a udávajú tón a značku celej vašej stránky.

A viete čo? Sme predurčení reagovať na obrázky. Preto je začlenenie obrázkov do obsahu silným nástrojom, ktorý môžete použiť pri marketingu svojho blogu.

Ak si však nedáte pozor, obrázky môžu tvoriť viac ako polovicu (alebo viac) celkovej veľkosti webovej stránky. Ešte pred niekoľkými rokmi bola priemerná veľkosť webovej stránky 600-700 K. Teraz je priemerná veľkosť 2 MB a každoročne sa zvyšuje.

To je obrovské!

Hlavným dôvodom, prečo sa to deje, je častejšie používanie viacerých obrázkov na webových stránkach, ktoré nemajú správnu veľkosť a nie sú optimalizované. To znamená, že nie sú uložené alebo skompilované spôsobom vhodným pre web a namiesto toho zväčšujú stránky.

Väčšina z nás však necháva optimalizáciu obrázkov na vedľajšej koľaji a radšej sa venuje zábavným veciam, ako je tvorba epického príspevku alebo nadväzovanie kontaktov s inými blogermi vo vašom výklenku.

Roztiahnutie stránky však znamená, že je ovplyvnená rýchlosť načítania stránky. Ak máte vysokorýchlostné pripojenie, možno si myslíte, že to nie je veľký problém, ale mnohí vaši návštevníci to tak nemajú. Ani Google nemá rád pomaly sa načítajúce stránky a môže to negatívne ovplyvniť vašu SEO.

Prečo je potrebné optimalizovať obrázky

Tvrdo pracujete na vytváraní hviezdneho obsahu a trávite nespočetné hodiny propagáciou svojho blogu a nadväzovaním kontaktov s inými blogermi, takže posledná vec, ktorú chcete, je, aby potenciálni návštevníci opustili vašu webovú stránku ešte pred jej načítaním!

Štúdie ukazujú, že až 40 % návštevníkov klikne na tlačidlo späť, ak načítanie stránky trvá dlhšie ako tri sekundy.

Viem, tri sekundy naozaj nie sú tak dlho, ale keď ste na mobilnom pripojení a čakáte na načítanie stránky, sekunda sa môže zdať ako večnosť.

A keďže veľa vašich návštevníkov môže používať pomalšie mobilné pripojenie, je jasné, že potrebujete znížiť veľkosť stránky. A už vieme, čo je najväčším vinníkom zväčšovania veľkosti stránky - sú to vaše obrázky.

Zbytočne veľké obrázky tiež zaberajú miesto na vašom hostingovom účte. Zatiaľ čo niektorí z vás môžu mať hosting s "neobmedzeným" úložným priestorom, mnohí poskytovatelia prémiového hostingu vás obmedzujú na približne 10 GB úložného priestoru v plánoch nižšej úrovne. To sa môže rýchlo zaplniť, najmä ak na tom istom účte hostujete viacero stránok s veľkým množstvom obrázkov.

Ako zistíte, či vaše obrázky spomaľujú vašu stránku? Otestujte rýchlosť svojej stránky pomocou nástroja Google PageSpeed Insights.

Ak spoločnosť Google hlási neoptimalizované obrázky ako problém, tu sú informácie, ktoré potrebujete vedieť na jeho odstránenie.

Základy optimalizácie obrázkov

Pokiaľ ide o optimalizáciu obrázkov na vašom blogu, musíte si uvedomiť niekoľko rôznych vecí: typ súboru, veľkosť a rozmery obrázkov, spôsob, akým obrázky zobrazujete, a kompresiu obrázkov.

Pozrime sa bližšie na každú z týchto oblastí.

Typ súboru

Obrázky na webe sa zvyčajne ukladajú vo formáte PNG alebo JPEG - alebo GIF v prípade animácie. Kto by nemal rád tie veselé animované GIFy, ktoré kolujú po webe!

Teraz je to technicky v poriadku ak uložíte obrázky v oboch formátoch, prehliadač návštevníka nebude mať problém so zobrazením vašej webovej stránky, ale pre najlepšiu kvalitu a optimalizáciu sa držte nasledujúcich pravidiel:

• JPEG - použite na fotografie a návrhy, na ktorých sú zobrazené osoby, miesta alebo veci
• PNG - najlepšie na grafiku, logá, návrhy s veľkým množstvom textu, snímky obrazovky a v prípade, že potrebujete obrázky s priehľadným pozadím.
• GIF - ak potrebujete animáciu, inak použite PNG

Prečo teda existujú rôzne formáty?

PNG sa tradične používa na ukladanie log a grafiky, pretože zachováva pôvodnú kvalitu obrázka - nikto nechce rozmazaný text a pixelové tvary. Ak však skúsite uložiť fotografiu ako PNG, bude vyzerať úžasne, ale výsledná veľkosť súboru bude menej ako úžasná.

Na ukladanie fotografií sa tradične používa formát JPEG. Časť obrazových údajov sa vyhodí, aby sa vytvorila výrazne menšia veľkosť súboru, ale keďže fotografie obsahujú širokú škálu farieb a prirodzených variácií, strata kvality je pre ľudské oko zvyčajne nepostrehnuteľná.

Kompresii sa budeme podrobnejšie venovať neskôr, ale ak si teraz pamätáte len dve veci, zapamätajte si: JPEG pre fotografie a PNG pre text/grafiu.

Rozmery obrázkov

Už ste niekedy načítali webovú stránku a všimli ste si, že sťahovanie malého obrázka (napríklad fotografie hlavy) trvá f-o-r-e-v-e-r? Napríklad tak pomaly, že vidíte každý prichádzajúci riadok? Pomyslíte si, ako môže sťahovanie takého malého obrázka trvať tak dlho?

A keď sa to stane veľkému obrázku v záhlaví, je to ešte horšie, pretože to môže zdržať načítanie celej stránky.

Dôvodom je to, že bloger správne nezmenil veľkosť a neoptimalizoval svoj obrázok a v prípade nášho príkladu s fotografiou hlavy možno nahral JPEG v plnom rozlíšení priamo zo svojej digitálnej zrkadlovky.

A to je obrovský súbor!

Webový prehliadač (zvyčajne) zmenší obrázok z jeho pôvodných rozmerov tak, aby sa pekne zmestil na svoje miesto na webovej stránke. To, čo sa na obrazovke javí ako malý obrázok, môže byť v skutočnosti obrovská 10-megapixelová fotografia, ktorú prehliadač v reálnom čase zmenšil.

Niektoré platformy na publikovanie na webe automaticky vytvoria viacero variantov vášho obrázka v plnom rozlíšení v rôznych veľkostiach, ale ak nie, mali by ste vopred zmeniť veľkosť obrázkov v editore obrázkov, ako je Photoshop, Lightroom, Pixlr - alebo dokonca MS Paint. Môže to znamenať rozdiel medzi 50-kilogramovým a 5 MB súborom.

WordPress napríklad automaticky vytvorí tri (alebo viac, v závislosti od motívu) kópie nahraného obrázka - všetky s rôznymi rozmermi - ktoré môžete použiť v príspevkoch blogu namiesto toho, aby ste vždy použili obrázok v plnej veľkosti.

Ak máte vo zvyku nahrávať obrovské obrázky fotografií a chcete ušetriť miesto na svojom hostingovom účte, plugin WordPress Imsanity vám pomôže.

Zmení veľkosť a nahradí pôvodný obrázok na niečo lepšie, takže aj keď do príspevku vložíte obrázok v plnej veľkosti, nebude to také zlé.

Po aktivácii dokáže Imsanity vyhľadávať aj vaše existujúce obrázky a podľa toho meniť ich veľkosť.

Podávanie vašich obrázkov

Spôsob, akým návštevníkom zobrazujete obrázky, nie je sám o sebe nevyhnutne spojený s ich optimalizáciou, ale môže mať výrazný vplyv na čas načítania stránky.

Väčšina blogerov zobrazuje svoje obrázky priamo zo svojho hostingového účtu a to je zvyčajne v poriadku, ale ak chcete zo svojej stránky vyťažiť každý kúsok výkonu, potom môže byť pre vás hosting obrázkov v sieti na poskytovanie obsahu (CDN) veľkým prínosom.

CDN pozostáva zo strategicky umiestnených webových serverov umiestnených v dátových centrách po celom svete. Na týchto serveroch sa nachádzajú duplicitné kópie vašich obrázkov a keď prehliadač návštevníka požiada o obrázok z vašej webovej lokality, CDN automaticky presmeruje prehliadač na server, ktorý je geograficky najbližšie.

To znamená, že napríklad návštevníci z Európy budú dostávať obrázky z miestneho európskeho servera, a nie zo servera v Spojených štátoch alebo inde. Keďže sa skráti čas odozvy a latencia siete, obrázky sa sťahujú oveľa rýchlejšie, čím sa skracuje čas načítania stránky.

Sprievodca blogovaním používa Sucuri (obsahuje firewall na zabezpečenie, ako aj CDN), ale existujú aj iní kvalitní poskytovatelia, ako napríklad Cloudfront od Amazonu alebo KeyCDN. Dokonca aj populárny CloudFlare, ktorý nie je striktne CDN, ponúka CDN zadarmo a dá sa ľahko nastaviť vo väčšine zdieľaných hostingových balíkov.

Kompresia obrazu

Pokiaľ ide o optimalizáciu obrázkov, nič nezníži veľkosť súboru viac ako pokročilá stratová kompresia obrázkov.

Väčšina nástrojov na úpravu obrázkov, ako napríklad Visme alebo Photoshop, ukladá súbory pomocou stratovej kompresie JPEG, pretože má najlepšie možnosti redukcie veľkosti súborov. Takže hoci je kvalita obrázkov mierne znížená, použitím stratovej kompresie sa obrovské obrázky zmenšia na veľkosť vhodnú pre web.

Som si istý, že mnohí, ktorí používajú Photoshop, by mohli vidieť jeho Uložiť pre web Funkcia optimalizácie obrázkov ako všetko a koniec. A dokonca aj online nástroje na úpravu obrázkov, ako napríklad PicMonkey alebo Visme, tiež optimalizujú vaše obrázky.

Vedeli ste však, že existujú nástroje, ktoré dokážu prevziať váš "optimalizovaný" obrázok z programu Photoshop alebo iných nástrojov na úpravu, skomprimovať ho o ďalších 40 % (alebo viac) a stále aby vyzeral takmer rovnako ako ľudské oko?

Tu je niekoľko bezplatných a platených nástrojov, ktoré vám pomôžu skrátiť vaše obrázky do stavu vhodného pre web.

Nástroje na pracovnej ploche

ImageAlpha / ImageOptim

Pre používateľov počítačov Mac je ImageOptim bezplatný desktopový nástroj, ktorý používam každý deň na optimalizáciu obrázkov PNG - väčšinou snímok obrazovky - pred ich odoslaním. Tieto nástroje sa ľahko používajú, stačí len pretiahnuť súbory, ale musíte to robiť po jednom obrázku.

Tip pre profesionálov : Pre technicky zdatnejších je tu ImageOptim-CLI, kde môžete optimalizovať celý priečinok obrázkov naraz.

ImageAlpha je stratový kompresor PNG a dokáže zázraky pri zmenšovaní súborov PNG, zatiaľ čo ImageOptim vykonáva pokročilú bezstratovú (s možnosťou stratovej) kompresiu - a odstraňuje nepotrebné metadáta zo súborov PNG, JPEG a GIF.

Obrázky PNG najprv prechádzam cez ImageAlpha:

Tu sa mi zmenšil obrázok snímky obrazovky zo 103 K na 28 K.

Potom som ho spustil cez ImageOptim a ušetril ďalších 10 %.

JPEGmini

Súbory JPEG optimalizujem pomocou aplikácie JPEGmini, ktorá je k dispozícii pre počítače Mac aj Windows.

Verzia Lite umožňuje optimalizovať až 20 obrázkov denne zadarmo a odstránenie limitu stojí 19,99 USD.

Profesionálny tip : Pokročilí používatelia, ktorí chcú integrovať JPEGmini do aplikácie Photoshop alebo Lightroom prostredníctvom zásuvného modulu, si môžu kúpiť verziu Pro za 99,99 USD.

Nástroje online / cloud / SaaS

TinyPNG

Ak hľadáte vysokokvalitný online nástroj na kompresiu obrázkov, TinyPNG (napriek názvu optimalizuje aj súbory JPEG) je webová aplikácia, ktorá vám umožní pretiahnuť do prehliadača až 20 5MB alebo menších obrázkov a všetky naraz ich optimalizovať.

Majú tiež rozhranie API pre vývojárov a k dispozícii je aj doplnok WordPress, ktorý dokáže automaticky optimalizovať vaše obrázky pri nahrávaní.

TinyPNG vám poskytne 500 bezplatných optimalizácií obrázkov mesačne a potom si účtuje 0,002-0,009 USD za obrázok v závislosti od objemu.

500 obrázkov mesačne sa môže zdať veľa, ale keď vezmete do úvahy skutočnosť, že WordPress často vytvára tri až päť variantov každého obrázka v rôznych veľkostiach, 500 obrázkov sa nezdá byť že mnohí Našťastie je cena za obrázok finančne nenáročná.

EWWW Image Optimizer

Ak nie ste pripravení míňať peniaze a nechcete sa trápiť s ručnou optimalizáciou obrázkov, bezplatný doplnok EWWW Image Optimizer pre WordPress dokáže automaticky optimalizovať nahrané obrázky.

Môžete si vybrať prémiové predplatné, ktoré vykonáva stratovú kompresiu, ale bezplatná verzia vykonáva len bezstratovú kompresiu, takže úspory nie sú až také výrazné. Ušetrí vám to však čas a je to lepšie ako nič.

Poznámka: Kompletný prehľad nájdete v našom príspevku o nástrojoch na kompresiu obrázkov.

Zhrnutie

Podľa niektorých predpovedí sa priemerná veľkosť webovej stránky do roku 2017 priblíži k 3 MB, preto je teraz čas začať optimalizovať obrázky.

Nezabúdajte, že nie všetci vaši návštevníci budú mať vysokorýchlostné pripojenie, a preto môže mať preťaženie stránky a pomalé načítavanie stránky potenciálny vplyv na vaše umiestnenie v službe Google. Aby ste takpovediac odľahčili záťaž, zvyknite si optimalizovať svoje obrázky ešte dnes.

Venujte pozornosť rozmerom obrázkov a zmenšite veľkosť príliš veľkých fotografií alebo obrázkov z digitálneho fotoaparátu na vhodnú veľkosť.

Ďalej využite výhody modernej kompresie obrázkov pomocou desktopových aplikácií, ako je JPEGmini, alebo cloudových nástrojov, ako je TinyPNG alebo Kraken - ak je to možné, integrujte ich do WordPress pomocou zásuvného modulu.

A nakoniec, ak vaša publikačná platforma automaticky vytvára zmenšené varianty pôvodného obrázka, vyberte si pre svoj blogový príspevok jeden z nich namiesto pôvodného obrázka v plnej veľkosti.

Súvisiace čítanie: 7 spôsobov, ako zmenšiť veľkosť súborov PDF.