Tvorba web stránok a častá chyba: zle nahrané obrázky
Obrázok môže vyzerať perfektne, ale zároveň zbytočne spomaľovať celý web. Pri tvorbe web stránok je preto dôležité správne nastaviť jeho rozmery, veľkosť súboru, formát, názov aj ALT text.
Ako správne pripraviť obrázokObrázky sú častou príčinou zbytočne pomalého webu
Pri tvorbe webových stránok sa veľa pozornosti venuje dizajnu, textom, menu alebo SEO. Obrázky však dokážu ovplyvniť technickú kvalitu stránky rovnako výrazne.
Častou situáciou je, že majiteľ webu nahrá fotografiu priamo z moderného smartfónu alebo fotoaparátu. Takýto súbor môže mať veľmi vysoké rozlíšenie a niekoľko megabajtov, hoci sa na stránke zobrazuje len v relatívne malom priestore.
Problém vzniká vtedy, keď web návštevníkovi posiela oveľa väčší súbor, než je pre konkrétne zobrazenie potrebné.
Prečo veľké obrázky spomaľujú web?
Pri otvorení stránky musí prehliadač stiahnuť HTML, CSS, JavaScript, fonty aj obrázky. Ak samotné fotografie predstavujú niekoľko megabajtov dát, na pomalšom mobilnom pripojení môže byť rozdiel výrazný.
Čím viac veľkých obrázkov sa nachádza na jednej podstránke, tým väčšie množstvo dát musí návštevník načítať.
Zbytočne veľké súbory zvyšujú objem dát, ktoré musí prehliadač stiahnuť.
Rozdiel je výraznejší najmä pri pomalšom mobilnom pripojení.
Obrázok s obrovským rozlíšením nemá význam, ak sa zobrazuje iba v malom boxe.
Návštevník nechce čakať, kým sa mu postupne načítajú fotografie.
Ako správne pripraviť obrázok pre web?
Pred nahraním fotografie na web je dobré prejsť niekoľko jednoduchých krokov.
Rozlíšenie prispôsobte tomu, ako veľký bude obrázok na stránke skutočne zobrazený. Fotografia nemusí mať tisíce pixelov navyše.
Použite vhodnú kompresiu, aby mal súbor primeranú veľkosť bez zbytočného poškodenia vizuálnej kvality.
Pri fotografiách možno často použiť moderné formáty ako WebP, pri inom type grafiky môže byť vhodný PNG, SVG alebo iný formát.
Namiesto názvu z fotoaparátu použite stručný a zrozumiteľný názov, ktorý opisuje obrázok.
Pri obsahovo významnom obrázku pridajte prirodzený alternatívny text, ktorý popisuje jeho obsah.
Overte, či sa obrázok na menšom displeji správne oreže a či sa zbytočne nesťahuje výrazne väčšia verzia.
Aké rozmery má mať obrázok na web?
Neexistuje jedno univerzálne číslo vhodné pre každý obrázok. Rozmer závisí od toho, kde bude fotografia použitá.
Hero obrázok na celej šírke stránky potrebuje väčšie rozmery ako fotografia produktu v malom boxe.
Obrázok má napríklad niekoľko tisíc pixelov na šírku, ale návštevník ho nikdy neuvidí väčší než približne tretinu stránky. V takom prípade prenášate dáta, ktoré zákazník reálne nepotrebuje.
Kompresia obrázkov: menší súbor bez zbytočnej straty kvality
Optimalizácia neznamená, že fotografia musí byť rozmazaná alebo nekvalitná. Cieľom je nájsť vhodný pomer medzi vizuálnou kvalitou a veľkosťou súboru.
Pri fotografii určenej pre web často nie je potrebné zachovať rovnaké nastavenia ako pri obrázku určenom na profesionálnu tlač.
Iné požiadavky má hero fotografia, iné obrázok referencie a iné malá fotografia v kartičke služby.
WebP – má zmysel používať moderný formát?
WebP sa na moderných webových stránkach používa často, pretože dokáže ponúknuť dobrý pomer medzi kvalitou a veľkosťou súboru.
Samotná prípona .webp však nevyrieši každý problém. Aj WebP obrázok môže byť zbytočne veľký, ak má nevhodné rozmery alebo nastavenie kompresie.
Preto je dôležitý celý proces: rozmery + kompresia + vhodný formát + správne načítanie.
Ako správne pomenovať obrázok?
Fotografie z fotoaparátu alebo mobilu často obsahujú názvy typu:
IMG_8472.JPG
tvorba-web-stranok-optimalizacia-obrazkov.webp
Zrozumiteľný názov súboru pomáha udržiavať médiá na webe prehľadné a dáva vyhľadávačom ďalší kontext k obrázku.
Používajte jednoduché názvy, pomlčky medzi slovami a vyhnite sa zbytočným špeciálnym znakom.
Nie je potrebné pomenovať obrázok desiatimi kľúčovými slovami. Stačí stručný a prirodzený popis toho, čo fotografia skutočne zobrazuje.
ALT text: prečo ho obrázok potrebuje?
ALT atribút predstavuje alternatívny text obrázka. Je dôležitý najmä z pohľadu prístupnosti a pomáha sprostredkovať význam obrázka, ak ho používateľ nemôže vizuálne vnímať.
Zároveň poskytuje vyhľadávačom textový kontext k obsahovo významnému obrázku.
Správny ALT text by mal byť:
- stručný,
- prirodzený,
- relevantný k obrázku,
- zrozumiteľný bez umelého opakovania kľúčových slov.
Ak obrázok zobrazuje nový firemný web stavebnej firmy, ALT môže znieť napríklad „Nová webová stránka stavebnej firmy“. Nemusí obsahovať desať SEO fráz za sebou.
Obrázky a SEO: aká je medzi nimi súvislosť?
Obrázky nie sú samostatný SEO trik, ktorý automaticky posunie stránku na vyššie pozície vo výsledkoch Google.
Ich správne spracovanie však môže podporiť technickú kvalitu stránky, prístupnosť, pochopenie obsahu a použiteľnosť webu.
Pri SEO preto obrázky riešime ako jednu z viacerých častí kvalitnej stránky: spolu s obsahom, štruktúrou, interným prelinkovaním, mobilným zobrazením a rýchlosťou.
Google Obrázky a vyhľadávanie fotografií
Vyhľadávače dokážu obrázky zaradiť aj do obrazových výsledkov. K lepšiemu pochopeniu vizuálu môže prispieť napríklad obsah stránky, ALT text, názov súboru a okolité textové informácie.
Z tohto dôvodu by obrázok mal byť tematicky relevantný k stránke, na ktorej sa nachádza.
Lazy loading: načítať obrázok až vtedy, keď je potrebný
Nie každý obrázok musí byť načítaný hneď pri prvom otvorení stránky. Pri fotografiách umiestnených nižšie môže dávať zmysel lazy loading, teda odložené načítanie.
Prehliadač môže takýto obrázok načítať až vtedy, keď sa používateľ približuje k jeho pozícii.
Obrázok viditeľný okamžite po otvorení stránky by sa nemal bezdôvodne odkladať, pretože je súčasťou úvodného zobrazenia webu.
Responzívne obrázky na mobile
Na modernom webe by sa nemala automaticky sťahovať rovnaká obrovská fotografia pre 27-palcový monitor aj malý smartfón, ak to nie je potrebné.
WordPress a moderné webové technológie dokážu pracovať s viacerými veľkosťami obrázkov a prehliadač môže podľa situácie použiť vhodnejší variant.
Pre majiteľa webu je však stále dôležité, aby už pôvodný súbor nebol nezmyselne veľký.
Častá chyba vo WordPresse: nahrávanie originálu priamo z mobilu
WordPress síce dokáže vytvárať viacero odvodených veľkostí obrázka, ale to neznamená, že je ideálne bez premýšľania nahrávať každý originál z fotoaparátu.
Pri desiatkach alebo stovkách fotografií sa zbytočne zväčšuje mediálna knižnica, zálohy webu a množstvo dát uložených na hostingu.
Pri audite starších stránok často nájdeme fotografie v rozmeroch určených skôr na tlač než na reálne zobrazenie na webovej stránke.
Tri otázky pred nahraním každého obrázka
Najčastejšie chyby pri obrázkoch na webe
- nahrávanie fotografií priamo z fotoaparátu bez úpravy,
- obrázky s niekoľkonásobne väčšími rozmermi, než web potrebuje,
- zbytočne veľké súbory,
- nevhodná kompresia,
- názvy typu IMG_5839.jpg,
- ALT text naplnený umelými SEO frázami,
- rovnaký obrovský súbor na desktop aj mobil,
- zbytočný lazy loading dôležitého hero obrázka,
- ignorovanie obrázkov pri kontrole rýchlosti stránky.
Optimalizácia obrázkov je súčasť profesionálnej tvorby webu
Pri profesionálnej tvorbe web stránok nestačí pripraviť pekný dizajn. Web musí fungovať dobre aj z technického pohľadu.
Preto pri projektoch riešime nielen samotné fotografie, ale aj ich rozmery, kompresiu, mobilné zobrazenie, ALT texty a spôsob načítania.
Správne pripravený obrázok môže zostať vizuálne kvalitný a zároveň nemusí návštevníka nútiť sťahovať zbytočne veľké množstvo dát.
Často kladené otázky
Prečo veľké obrázky spomaľujú web?
Pretože návštevníkov prehliadač musí stiahnuť väčšie množstvo dát. Pri viacerých veľkých fotografiách sa ich veľkosť sčítava.
Akú veľkosť má mať obrázok na web?
Závisí od spôsobu použitia. Hero fotografia potrebuje iné rozmery než malý náhľad v kartičke. Súbor by mal zodpovedať reálnemu zobrazeniu.
Je WebP vhodný pre webové stránky?
Áno, WebP je praktický moderný formát. Dôležité však zostávajú aj správne rozmery a vhodná kompresia obrázka.
Pomáha ALT text SEO?
ALT text poskytuje textový kontext k obrázku a je dôležitý najmä pre prístupnosť. Mal by prirodzene opisovať obsah obrázka, nie slúžiť na umelé opakovanie kľúčových slov.
Má názov súboru obrázka význam?
Zrozumiteľný názov pomáha pri organizácii médií a môže poskytovať ďalší kontext. Nie je však samostatnou zárukou lepšej pozície vo vyhľadávaní.
Mám obrázky komprimovať ešte pred nahraním do WordPressu?
Je to veľmi dobrý postup. Už pred nahraním môžete odstrániť zbytočne veľké rozmery a pripraviť súbor pre reálne použitie na webe.
Viete optimalizovať obrázky na existujúcom webe?
Áno. Pri správe a optimalizácii webových stránok vieme skontrolovať aj obrázky, ich veľkosť, načítanie a ďalšie technické problémy.
Záver: Obrázok na web treba pripraviť, nie iba nahrať
Kvalitná fotografia je dôležitá, ale pri webovej stránke musí byť zároveň technicky vhodne pripravená.
Pred nahraním skontrolujte rozmery, veľkosť súboru, formát, názov a ALT text. Pri obrázkoch nižšie na stránke má zmysel myslieť aj na spôsob načítania.
Takáto optimalizácia je malý detail, ktorý sa pri desiatkach obrázkov môže výrazne prejaviť na celkovej kvalite webovej stránky.
Je váš web pomalý alebo technicky zastaraný?
Vo WEB-STAR riešime tvorbu a správu webových stránok, optimalizáciu obrázkov, rýchlosť, responzívne zobrazenie aj SEO. Pozrieme sa na váš web a navrhneme konkrétne zlepšenia.
Chcem nezáväznú konzultáciu