Správna grafika a fotografie na webe – ako sa o ne postarať? – I. časť
Grafika a fotografie na webe sú častým problémom, čomu sme sa už u nás neraz venovali, napríklad v článku ako zabezpečiť správnu grafiku a fotografie, aby bol firemný web príťažlivý, alebo článku obrazové formáty. Prečo sa tomu toľko venujeme? Na webových stránkach spoločností sa stále stretávame s grafikou a fotografiami, ktoré spomaľujú výkon webových stránok alebo vyvolávajú negatívny dojem na používateľov. Je to najčastejšie tým, že fotografie na stránke majú príliš vysoké rozlíšenie alebo sú v nevhodnom formáte.
Veľkosť grafiky a fotografií na webe
Veľkosť grafických obrázkov ovplyvňuje rýchlosť načítania stránky na zariadeniach používateľov. Jednak spomaľuje prenos na server a je tiež jedným z dôležitých parametrov, ktoré Google zohľadňuje pri klasifikácii výsledkov vyhľadávania. Pomaly sa otvárajúca grafika je impulzom pre používateľa, ktorý je zvyknutý na okamžité riešenia, aby z tejto stránky odišiel, pretože ho rýchlo znechutí. Môže to tiež naznačovať slabú pozornosť k potrebám zákazníkov, technologickú zaostalosť firmy alebo napokon neschopnosť postarať sa o vlastný biznis. Grafika a fotografie na webe by popri kvalitnom copywritingu a SEO na stránke nemali zaostávať.
Grafika a fotografie na webe – ako ich pripraviť
Grafiku a fotografie na webe by ste pred zverejnením mali optimalizovať, upraviť veľkosť v pixeloch a znížiť rozlíšenie. Vyberte formát, ktorý umožňuje spracovanie obrázka pri zachovaní najvyššej kvality. Pri veľkosti je dobré pamätať na to, aby ste neprekročili hodnoty 1920 (šírka) a 1080 (výška) px. V súčasnosti je táto veľkosť optimálna pre zobrazenie na celej obrazovke na väčšine počítačov. Pri pridaní grafiky a fotografií na web je dôležitejšia šírka súboru v pixeloch, odporúčaná výška môže byť menšia.
Problémom grafiky a fotografií na webe však môže byť aj voľba rozlíšenia súborov pri vytváraní responzívneho webu. So zmenšujúcou veľkosťou obrazovky sa totiž zmenšuje aj veľkosť súboru s obrázkom, takže sa stáva nečitateľným. V tomto prípade je možné použiť dve riešenia:
- Načítajte dizajn s vyšším rozlíšením, vďaka čomu grafika a fotografie na webe pri škálovaní nestratia na kvalite a použite jeden súbor pre všetky typy zariadení. Bude však väčší a bude sa otvárať o niečo pomalšie.
- Pripravte súbory pre konkrétne typy zariadení (zvyčajne tri súbory vhodnej výšky a orezania), vďaka čomu sa zlepší rýchlosť načítania stránky a zníži veľkosť grafiky a fotografií na webe. Toto riešenie je však časovo náročnejšie.
