Kristýna Šťastná

Jak vkládat obrázky na web a na co si dát pozor?

Základní pravidla pro vkládání obrázků na web

Pro vkládání obrázků na web platí obecná pravidla, která je třeba dodržovat nejen kvůli optimálnímu zobrazování na webu, ale i z hlediska SEO a dalšího.

Jaká jsou tedy ta základní pravidla pro vkládání obrázků na web?

1. JPG nebo PNG? To je oč tu běží.

  • Kdy zvolit JPG?
    Formát *.jpg u obrázků je ten nejběžnější. Tento formát obrázku využijte v případě fotografií a grafiky, které obsahují více barev.
     
  • Kdy zvolit PNG?
    Formát *.png se hodí pro obrázky s průhledným pozadím, tedy hlavně pro vkládání ikon na web, případně i vašeho loga. Případně i pro jedno-dvoubarevné grafiky.
     
  • Kdy zvolit SVG?
    ​Formát *.svg je méně známý pro klasického uživatele, avšak důležitý pro váš web. Jedná se o formát popisující dvourozměrnou vektorovou grafiku. Tento formát volte například pro responzivní prvky na webu pro jejich perfektní zobrazení při jakémkoliv rozlišení.​
Vkládání obrázků na web - INNOIT

INNOTIP - INNOIT

Pro zlepšení čitelnosti vašeho webu a zlepšení vzhledu využívejte více grafických prvků.

Chtěli byste nejen na váš web začít používat originální grafiky, které budou vystihovat vaši firmu?
Rádi vám s tím pomůžeme!
Ozvěte se nám a vše společně nastavíme.

Kontakty >

2. Na velikosti záleží...

  • Obrázek nemusí mít větší rozlišení, než ve kterém se bude na webu zobrazovat
    Tedy, pokud se bude vkládaný obrázek zobrazovat na webu v rozměru například 800x400 px, nenahrávejte zbytečně obrázek větších rozměrů.
     
  • Obrázek nenahrávejte zbytečně velký
    Pokud chcete na web nahrát pouze doprovodné obrázky, ne tedy například fotografie za účelem jejich propagace, pak není důvod nahrávat jakýkoliv obrázek v plné velikosti.
    K tomu, abyste obrázek zmenšili, je možné využít nepřeberné množství online i offline programů. My jsme si oblíbili tiny.png, který je online, bezplatný a stačí pouze obrázek nahrát a za pár okamžiků máte optimalizovanou velikost obrázku
     
  • Proč na velikosti záleží?
    Pokud jsou vaše obrázky na webu umístěné ve správném rozlišení, tedy ani ne malé, ani ne velké, pak váš web bude působit profesionálním dojmem, nedojde k deformaci obrázků a budou tak pro uživatele hezké na pohled.


Prvních pár sekund na vašem webu rozhoduje.

Nezahoďte svých prvních a zároveň nejdůležitějších pár sekund na načítání webu.
Správná optimalizace obrázků je klíčová pro rychlé načítání webu.

Máte tedy již připravený obrázek ve správném formátu a velikosti?
Tím to rozhodně nekončí! Co dál by váš obrázek na web měl splňovat?

Vkládání obrázků na web - INNOIT

3. Já a svíčková na dovče.jpg

Volte relevantní názvy obrázků a jejich popisky.
Název obrázku “já a svíčková.jpg” je sice vypovídající, ale úplně špatně.

Jak popisovat obrázky jako profík?

  • Jaké jsou relevantní názvy obrázků?
    Při nahrávání obrázků volte text:
    • bez diakritiky
    • bez speciálních znaků
    • bez mezer - ty snadno nahradíte buď podtržítkem “_” nebo pomlčkou “-”
    • správně: “kozena_kabelka.jpg”
    • nesprávně: “taška od Františka.jpg”
  • Nezapomínejte na alternativní popisky obrázků
    Alternativní popisky se, při nahrání obrázku na web, většinou automaticky nevyplní. Pokud se ale vyplní, alternativní popisek pak je název souboru. Ani jedno ovšem není správná volba.
     
  • Alternativní popisek obrázku by měl obsahovat:
    • klíčová slova k danému tématu
    • například: “Produkt - Název Firmy”
    • správně: “Kožená kabelka - Kabelky.cz”
    • nesprávně: “taska-od-františka.jpg”
       
  • Proč vyplňovat “alty” - alternativní popisky?
    Zas a znovu to SEO
    ​Alternativní popisky značně ovlivňují vaši pozici ve vyhledávačích a jsou často opomíjenou součástí úspěšného webu. Alty vám mohou zvednout úspěšnost vašeho webu.


Jak už víte, vložit obrázek na web není pouze o “vložení obrázku na web”.
Je třeba i při tomto kroku přemýšlet, zda obrázek vkládáte do contentu opravdu správně.

Nezapomínejte tedy na tyto 3 body:

  • správný formát
  • optimalizaci velikosti a rozlišení obrázku 
  • a v neposlední řadě ani na alternativní popisek. 

 

To vše vám může pomoci k úspěšnějšímu webu!

 

Je to na vás i tak moc informací?

Nevíte, zda máte obrázky správně na webu
nebo jste něčemu nerozuměli?

Nevadí, my se s Vámi rádi spojíme
a společně se můžeme domluvit na kontrole
​a optimalizaci obrázků na vašem webu..

Kontaktujte nás, rádi se vám budeme věnovat.

Kontakty >