Zistili ste, že stránka sa pomaly načítava a netušíte prečo? Príčin môže byť viacero. Za jednou z nich stojí jednoduchá neznalosť technickej stránky prenosu údajov zo servera na počítač návštevníka stránky. Jednou z príčin pomalého načítavania stránky, s ktorými sa stretávam v praxi, býva totiž neprispôsobenie veľkosti obrázkov technickým podmienkam internetu.
Na kurze WordPressu ma oslovila cez prestávku jedna z účastníčok kurzu, či jej neviem poradiť, čo má robiť, keďže sa jej stránky pomaly načítavajú. Spýtal som sa na adresu jej webu, sadol k počítaču a naťukal jej www. Mala pravdu. Trvalo čosi cez 20 sekúnd, kým sa zobrazila vrchná časť jej web-stránok.
Vyskúšal som príkaz ping a pár iných fínt na zistenie stavu. Asi pri štvrtom kroku mi napadlo skontrolovať veľkosť obrázkov na titulnej stránke. Stiahol som obrázok do počítača a pozrel na jeho parametre. Už pri prvom pohľade bola príčina takmer zrejmá - veľkosť. Pohľad na parametre druhého obrázka to istil na 99 %. Ale pre istotu som pozrel aj tretí obrázok. Áno, bolo to tak. Prvé dva mali každý okolo 5 MB, tretí takmer 7 MB. Pani majiteľka e-shopu s drevenými výrobkami naplnila obsah svojich stránok fotografiami, ktoré jej dodal autor fotografií.
Rýchlosť načítania závisí od kadečoho. Od rýchlosti serverov hostingu, od naprogramovania stránky, od rýchlosti pripojenia používateľa, od „trafficu“ na prenosovom na uzle,… Všetko veci, ktoré nezávisia od správcu, resp. majiteľa webu. Pomerne častou chybou však bývajú i nevhodné obrázky.
Predstavte si koryto rieky, ktoré je optimálne naplnené a voda ním v pohode tečie. Keď sa roztopia ľady alebo sneh, objem vody tečúcej do mora dramaticky stúpne. Takúto veľkú vodu pre náš kanál predstavuje veľká fotografia.
Ako optimalizovať obrázky pre web
Existuje viacero spôsobov, ako optimalizovať obrázky pre lepšiu použiteľnosť. WordPress nie je majstrom v oblasti úpravy obrázkov, hoci obmedzené možnosti úprav obrázkov (orezanie, zmena veľkosti) poskytuje. Pozrime sa na najdôležitejšie témy optimalizácie obrázkov v praxi pre web-stránky, resp. Tieto témy pokrývajú nielen zrýchlenie načítania obrázkov (a stránok, ktoré obrázky obsahujú), ale súčasne môžu pomôcť zlepšiť kvalitu stránky tým, že presne vieme, čo sme kde použili a prečo sú veci také, aké sú.
Začiatkom milénia začali monitory s pomerom strán 5:4 a 4:3 uvoľňovať miesto širokouhlým panelom s pomerom strán 16:9 a 16:10. Súčasne nastal posun veľkosti uhlopriečok širokouhlých obrazoviek k hodnotám 60 a viac cm (>24 palcov), pre notebooky okolo 40 cm. Rozmach smartfónov, novinky v ich displejoch (Apple) a ich popularita ukázali technologický smer k vyššiemu rozlíšeniu.
V súvislosti s technológiami a zobrazovaním nás zaujímajú najmä tri-štyri parametre obrázkov - veľkosť v pixeloch (alebo cm), rozlíšenie, veľkosť uloženého obrázku v bajtoch a farebná hĺbka. Veľkosť obrázku v pixeloch (skr. px), alebo v cm ukazuje jeho reálnu veľkosť. Pre monitory sa používa ako štandard rozlíšenia hustota pixelov 96 px/palec (angl.
Optimálna veľkosť obrázka závisí od cieľovej skupiny. V prípade, že 90 % návštevníkov stránky používa pri návšteve stránky a hľadaní na nej mobily, niet čo riešiť. Pri výbere veľkosti i rozlíšenia pomôže tabuľka nižšie. Uvedený rozmer pixelov je optimálny, ktorý by mal obrázok spĺňať, ak bude zaberať celú šírku strany. Pre web-stránku je rozmer obrázka 600*400 px optimálny, ak bude obrázok na polovicu šírky strany (600 px je polovica uvádzaných 1200 px).
Ak zvažujete, či používať radšej obrázky .JPEG (.JPG) alebo .PNG, príďte na niektorý z grafických kurzov alebo digitálnej fotografie, kde vysvetľujeme výhody a nevýhody jednotlivých formátov. Každý má svoje pre i proti.
Predpokladajme, že máme obrázok 1080 x 1920 px (veľkosťou v tabuľke stredný súbor JPEG). Jeho šírka 1920 px je pre naše potreby plného pokrytia monitora optimálna. Keď spravíme súčin jeho výšky a šírky, zistíme, že obsahuje vo svojej ploche spolu 2 073 600 pixelov.
Obrázok z predchádzajúceho príkladu je bitová mapa s kódovaním farebnosti pixelov. Je zrejmé, že pri veľkosti 4,2 MB bude načítanie chvíľu trvať. Kompresia funguje na matematických princípoch a - obrazne povedané - vytiahne zo súboru „prázdne miesta“ podobne ako keď sa ukladajú do šatníka veci v sáčkoch, z ktorých je vysávačom vysatý vzduch. Objem sa zmenší. Podľa nastavenia použitého záznamového zariadenia môžeme získať obrázok v komprimovanej podobe priamo z fotoaparátu alebo mobilu.
Ako optimalizovať obrázky?
Ako sa k nim dopracovať? Pomocou niektorého z grafických programov. V nich môžeme meniť nielen veľkosti obrázkov, ale aj rozlíšenie, resp. farebnú hĺbku a docieliť tak výstupný obrázok v oveľa menšej veľkosti. Príklad vhodného programu môže byť Skicár, IrfanView, GIMP, Photoshop alebo webové aplikácie ako Photopea a pod. Ak chceme upraviť iba rozmer, prípadne rozlíšenie, postačí aj MS Office - v PowerPointe, Exceli i Worde to ide ľahko.
WordPressákov poteší, že existuje zásuvný modul - plugin, ktorý je zadarmo a ponúka funkciu optimalizácie presne pre WordPress. Tento milý plugin odstráni prebytočný obsah z obrázkov JPG a PNG bez ovplyvnenia ich kvality, a tým šetrí miesto v procese. Nepotrebuje žiadne ďalšie nastavenie - predvolené možnosti sú vhodné takmer pre všetkých. Treba brať do úvahy, že plugin bude používať váš hosting CPU.
Podobne ako používame v bežnej reči na označenie budovy s výstavou obrazov výraz galéria, aj web má galérie. Galéria na webe je takisto miesto, kde je pokope viac obrazov, presnejšie obrázkov. Viete si predstaviť, že sú o čosi náročnejšie na vytvorenie a optimalizáciu ako bežný obrázok.
Aj keď máme samostatné obrázky optimalizované a môžeme pokojne spávať kvôli rýchlosti ich načítania, môžeme sa stretnúť s problémom ako ich usporiadať, zobraziť viacero v galérii. Tak, aby výrazne nespomaľovali načítanie stránky. Riešením môže byť niektorý plugin s carouselmi (kolotočmi) alebo s galériami a ich šablónami, napríklad JetPack. Lepším riešením je však - podľa použitej témy - niektorý tzv. page builder - Divi, Elementor alebo WPBakery.
WPBakery patrí do prvej desiatky na svete, a jemu sa spolu s ďalšími informáciami o používaní a optimalizácii obrázkov venujeme na kurze WordPress II - dizajnovanie a tvorba obsahu, špičkové grafické podstránky pre neprogramátorov. Umožňuje vytvárať krásne galérie, slajdre i kolotoče obrázkov s rôznymi funkcionalitami.
| Typ súboru | Rozmery (px) | Použitie |
|---|---|---|
| Malý JPEG | 640 x 480 | Náhľady, malé obrázky v texte |
| Stredný JPEG | 1080 x 720 | Obrázky na blogu, sociálne siete |
| Veľký JPEG | 1920 x 1080 | Obrázky na celú obrazovku, pozadia |
| Ikona | 32 x 32 | Ikony webu |
Formát súborov SVG predstavuje populárny nástroj na zobrazovanie dvojrozmerných grafík, grafov a ilustrácií na webových lokalitách. A keďže ide o vektorové súbory, dajú sa zväčšiť či zmenšiť bez straty rozlíšenia.
Scalable Vector Graphics (SVG) predstavuje vektorový formát súborov optimalizovaný pre web. Vektorové súbory na rozdiel od rastrových súborov založených na pixeloch, ako napríklad súbory JPEG, ukladajú obrázky pomocou matematických vzorcov vychádzajúcich z bodov a línií na mriežke. Veľkosť vektorových súborov, akými sú napríklad súbory SVG, sa teda dá v značnej miere meniť bez straty kvality.
Súbory SVG sú medzi web dizajnérmi veľmi obľúbené, a to nielen vďaka svojej schopnosti meniť veľkosť. Súbory SVG sú napísané v kóde XML, čo znamená, že textové informácie ukladajú ako skutočný text, a nie tvary.
História súboru SVG sa začala písať koncom 90. rokov 20. storočia, keď konzorcium World Wide Web (W3C) vyzvalo na podávanie návrhov od vývojárov na nový typ formátu vektorovej grafiky. Chvíľu trvalo, kým sa súbory SVG rozšírili. Veľmi sa nepoužívali až do roku 2017, keď ľudia objavili výhody použitia súborov SVG v moderných webových prehliadačoch.
Vektorové grafiky, ako napríklad SVG, si na rozdiel od rastrových súborov, ktoré sú zložené z pixelov, stále zachovávajú svoje rozlíšenie, a to bez ohľadu na to, aké veľké či malé ich vytvoríte.
Keďže sa v súboroch SVG text zobrazuje ako text (a nie ako dizajn), čítačky obrazovky môžu skenovať jednotlivé slová uložené v obrázkoch SVG. To sa hodí najmä ľuďom, ktorí potrebujú pomoc s čítaním webových stránok.
Súbory SVG sa skvele hodia na tvorbu webových grafík, akými sú napríklad logá, ilustrácie a grafy. Keďže však nepozostávajú z pixelov, zobrazovanie digitálnych fotografií vo vysokej kvalite je náročné.
Obrázky SVG podporujú iba moderné prehliadače. V súčasnosti môžete súbory SVG otvoriť vo väčšine najrozšírenejších prehliadačov ako Chrome, Edge, Safari a Firefox, a to bez ohľadu na to, či používate Mac alebo Windows.
Dizajnéri súbory SVG často používajú na zobrazovanie log spoločnosti a ikon, napríklad tlačidiel, na webových lokalitách. Vďaka tomu, že súbory SVG používajú XML, vyhľadávacie nástroje ako Google môžu čítať grafy a diagramy plné textu, čo môže pomôcť s optimalizáciou pre vyhľadávače. Keďže Google dokáže v súboroch SVG detegovať kľúčové slová, potenciálne môže zobraziť webovú stránku vo výsledkoch vyhľadávania vyššie.
Súbor SVG nepodporuje iba statické obrázky. Pomocou množstva online nástrojov môžete do svojej webovej grafiky pridať aj pohyblivé prvky. Animácie SVG môžu obsahovať relatívne základné prvky, ako napríklad funkciu posúvača, ktorá strieda jednotlivé snímky v infografike.
Súbor SVG najjednoduchšie odhalíte vďaka jeho prípone. Medzi súbormi sa zobrazuje ako .svg. Vektorové obrázky, ako napríklad súbory SVG, odhalíte aj vtedy, keď ich na obrazovke počítača zväčšíte o 200 a viac percent. Hoci sa súbory SVG používajú najmä na webe, dokážu fungovať aj mimo online sveta. Keďže si zachovávajú tvar aj po zmene originálnych rozmerov, súbory SVG môžete používať ako šablóny na tlač dizajnov na oblečenie, napríklad tričiek.
Veľkosť SVG súborov závisí od toho, aký veľký objem obrázkových údajov obsahujú. Väčšinou je však menšia než veľkosť ostatných typov súborov. Komplexné grafiky s množstvom ciest a kotviacich bodov budú zaberať viac ukladacieho priestoru než jednoduchšie a čistejšie dizajny.
V skratke, súbory SVG sú vektorové súbory a súbory PNG sú rastrové súbory. Ak súbor PNG príliš zväčšíte alebo zmenšíte, stane sa rozmazaným a pixelovaným. Keďže súbory SVG neobsahujú žiadne pixely, ich rozlíšenie zostáva stále rovnaké.