6 spôsobov optimalizácie obrázkov pre lepší výkon webu

6 spôsobov optimalizácie obrázkov pre lepší výkon webu
Rick Davis

Ľudia sú vizuálne bytosti a výskumy túto skutočnosť potvrdzujú. Už po troch dňoch sa miera uchovania textu pohybuje v rozmedzí 10 - 20 %, ale v prípade obrázkov môže miera uchovania dosiahnuť až 65 %. Mozog prijíma 90 % vizuálnych informácií a spracúva ich 60 000-krát rýchlejšie. Vizuálne informácie bezpochyby zohrávajú rozhodujúcu úlohu pri zapájaní na webové stránky.

Vyžaduje si to však oveľa viac ako len vybrať niekoľko obrázkov a umiestniť ich na stránku. Veľké množstvo obrázkov spotrebuje veľkú šírku pásma, čím sa spomalí rýchlosť načítavania stránok. Vyhľadávače si všimnú pomalý výkon a potrestajú vás nízkym umiestnením.

V našom článku vám ukážeme šesť rôznych spôsobov optimalizácie obrázkov pre lepší výkon webu v roku 2021.

Tipy na optimalizáciu obrázkov pre lepší výkon webu v

Povedzme, že navrhujete webové stránky pre neziskové organizácie a radi používate veľa obrázkov na prezentáciu svojej práce. Darcovia, sponzori a ďalšie zainteresované strany používajú takéto informácie ako základ pre ďalšiu podporu. Ak však obrázky neoptimalizujete, utrpí používateľský zážitok a zapojenie. Najväčším problémom bude pomalé načítanie stránok a časové odozvy.

Optimalizácia obrázkov sa vzťahuje na všetky kroky, ktoré vykonáte na zníženie veľkosti, formátu alebo rozlíšenia súborov. Môžete to urobiť bez toho, aby ste znížili kvalitu obrázkov.

Pozrime sa na niektoré z vašich možností.

Ilustrácia marketingovej kampane od Deemak Daksina

1. Začnite s auditom optimalizácie obrazu

Audit optimalizácie obrázkov poskytne relevantné informácie o tom, čo je potrebné zlepšiť.

Pozri tiež: Ako nakresliť červenú pandu Začnite inventarizáciou obrázkov, ktoré máte na svojom webe. Príslušné testy diagnostikujú všetky problémy, ktoré je potrebné riešiť.

Audit môže napríklad ukázať, že máte príliš veľa obrázkov. Ukáže tiež formátovanie obrázkov a umožní vám určiť ďalší postup. Napríklad odstránenie alebo zmena formátov súborov môže výrazne zlepšiť rýchlosť načítania stránky.

2. Vyberte správny formát obrázkov

Obrázkové súbory sa dodávajú v rôznych formátoch. Toto sú tri najbežnejšie typy formátov obrázkov pre webové aplikácie, ktoré potrebujete poznať:

  • Výhodou PNG je, že ide o veľmi kvalitný obrázok. Bohužiaľ, na dosiahnutie tejto kvality je veľkosť súboru veľmi veľká. Dobre sa hodia na jednoduché obrázky a logá a umožňujú bezstratovú kompresiu.
  • Obrázky JPEG sú najrozšírenejšie na väčšine webových stránok. Sú vynikajúce pre komplexné, farebné obrázky. Pri komprimácii obrázkov JPEG však musíte byť opatrní, pretože môže dôjsť k strate jasnosti, čím je obrázok menší. Niektorí ľudia to označujú ako stratové.
  • GIF sa hodí na animácie, malé ikony a obrázky s nízkym rozlíšením. Umožňuje bezstratovú kompresiu, ale môžete použiť len 256 farieb.

Uložiť ikony od Andreas Storm

3. Zmena veľkosti a komprimácia obrázkov

Možno ste si všimli, že obrázky sa načítavajú po kúskoch. Než sa vám zobrazí celý obrázok, uplynie určitý čas, čo je znakom toho, že obrázky sú pravdepodobne príliš ťažké. Problém sa vyrieši zmenou veľkosti alebo komprimáciou.

Upozorňujeme, že by ste nemali nahrávať žiadne obrázky pred ich optimalizáciou. A aby ste dosiahli najlepšiu kvalitu, snažte sa, aby súbory mali veľkosť v rozmedzí 1 až 2 MB.

Na zmenu veľkosti obrázkov použite nástroj na orezávanie. Pomáha zmenšiť veľkosť súboru, čo vedie k vyššej rýchlosti načítania stránky. K dispozícii máte množstvo nástrojov, ktoré môžete použiť.

Kompresia obrázkov pomáha zmenšiť veľkosť súboru. Ak však obrázok príliš skomprimujete, môžete ho skresliť. Nízka kompresia môže byť ideálna, ak chcete zachovať kvalitu obrázka; veľkosť však výrazne nezníži.

Typy kompresií

Existujú dva pojmy, ktoré sme už spomenuli vyššie, bezstratová a stratová kompresia.

Pozri tiež: Ako vytvárať a predávať akvarelové kliparty
  • Bezstratová kompresia zachováva kvalitu obrazu a zároveň odstraňuje nepotrebné metadáta.
  • Stratová kompresia zmenšuje veľkosť súboru tým, že sa zbaví niektorých prvkov. Môže to zhoršiť kvalitu obrazu. Rozdiel si však nemusíte všimnúť. Stále to teda môže byť vynikajúci spôsob kompresie obrázkov.

Správny editor obrázkov vám pomôže určiť, ktorá kompresia je pre vás najlepšia.

4. Optimalizácia obrázkov pre mobilné zariadenia

Všetky kroky, ktoré podniknete, musia byť v súlade so stratégiou SEO pre mobilné zariadenia, keďže spoločnosť Google prešla na hodnotenie na prvom mieste. Obrázky by mali vyzerať rovnako na každom mobilnom zariadení ako na každom stolnom zariadení. Obrovské množstvo internetovej návštevnosti prichádza prostredníctvom takýchto zariadení.

Ak používateľov pri používaní mobilných zariadení nezaujme dobré UX, stratíte ich.

Zvážte optimalizáciu obrázkov pre mobilné zariadenia. Ak vyzerajú dobre na malej obrazovke, budú vyzerať fantasticky aj na počítači alebo notebooku.

Optimalizácia ASO od Abbi_Kerimov

5. Názvy súborov a ich vplyv na SEO

Optimalizácia obrázkov si vyžaduje, aby ste venovali pozornosť aj tomu, ako súbory pomenujete. Všetky kroky, ktoré podniknete, by mali mať za cieľ zlepšiť viditeľnosť vo vyhľadávačoch. Keď nahráte alebo odfotíte obrázok, zariadenie mu automaticky pridelí názov súboru. Tento názov sa zvyčajne skladá z náhodného kódu alebo čísel. Môže vyzerať napríklad 2224444.jpg.

Nahratie obrázka v pôvodnom stave na vašu webovú stránku vyhľadávačom vôbec nepomôže.

Uľahčite prehľadávačom webových stránok vaše vyhľadávanie tým, že ku každému obrázku priradíte popisné štítky. Zahrňte relevantné kľúčové slová, ktoré poskytujú informácie o vašej firme alebo lokalite.

6. Zvážte použitie lenivého načítania

Lenivé načítanie obrázkov je presne také, ako naznačuje názov. Namiesto toho, aby sa celý obrázok načítal naraz, sa akoby rozkladá. Obrázok sa načítava tým viac, čím viac sa online návštevník posúva po stránke.

Lenivé načítanie zobrazí len to, čo je v danom okamihu relevantné. Nakoniec ušetríte šírku pásma, pretože nebudete používať žiadne zbytočné zdroje.

Načítavanie... podľa Dona

Záverečné myšlienky

Výkonnosť webu je rozhodujúcim faktorom hodnotenia, ktorý používajú vyhľadávače. Google potrestá vaše webové sídlo, ak je rýchlosť načítania stránky nízka.

Rýchlosť stránok určuje mnoho faktorov a používanie obrázkov je na jednom z popredných miest. Ak nebudete optimalizovať obrázky, výkonnosť vášho webu bude trpieť. Stránky sa budú načítavať pomaly a používateľský zážitok a zapojenie nebudú dobré.

Zvoľte správny formát obrázku. Ďalej použite techniky, ako je zmena veľkosti a kompresia, aby ste zmenšili veľkosť súboru. Naplánujte pravidelné testy stránok a audity webu na kontrolu výkonnosti webu.




Rick Davis
Rick Davis
Rick Davis je skúsený grafický dizajnér a vizuálny umelec s viac ako 10-ročnými skúsenosťami v tomto odvetví. Pracoval s rôznymi klientmi, od malých startupov až po veľké korporácie, ktorým pomáhal dosiahnuť ich dizajnové ciele a pozdvihnúť ich značku prostredníctvom efektívnych a pôsobivých vizuálov.Rick, ktorý je absolventom Školy vizuálnych umení v New Yorku, je zanietený skúmaním nových dizajnových trendov a technológií a neustále posúva hranice toho, čo je v tejto oblasti možné. Má hlboké odborné znalosti v oblasti softvéru na grafický dizajn a vždy sa chce podeliť o svoje znalosti a poznatky s ostatnými.Okrem svojej práce dizajnéra je Rick tiež angažovaným blogerom a venuje sa pokrývaniu najnovších trendov a vývoja vo svete softvéru pre grafický dizajn. Verí, že zdieľanie informácií a nápadov je kľúčom k vytvoreniu silnej a živej dizajnérskej komunity a vždy sa túži spojiť s ostatnými dizajnérmi a kreatívcami online.Či už navrhuje nové logo pre klienta, experimentuje s najnovšími nástrojmi a technikami vo svojom štúdiu alebo píše informatívne a pútavé blogové príspevky, Rick je vždy odhodlaný odvádzať najlepšiu možnú prácu a pomáhať ostatným dosiahnuť ich dizajnérske ciele.