2 největší obrázkové hříchy na webu

2 největší obrázkové hříchy na webu

Nedávno jsem během jednoho týdne řešila hned 3× stejnou infarktovou situaci. A pokaždé ji způsobily obrázky. Bacha na ně! Stejné chyby vídám den co den na řadě webů. Nedopouštíš se jich taky?
Tentokrát začnu příběhem…

Co se stalo Martině

Martina 2 roky budovala svůj web, psala články, vyhrála si i s designem. Všechno běželo jako po drátkách. Až před pár měsíci byla nucena změnit webhosting. Všechno se zdálo být v pořádku, až na pár drobností, které se měly doladit po přesunu.

Jenže…

Po změně hostingu najednou zmizelo 80 % všech obrázků, včetně loga webu.

Chtěla je doplnit. Nešlo to. Na web se nedařilo nic nahrát.

Začala vyskakovat chybová hláška.

chyba 503
Vidět toto místo vlastního webu, fakt nepotěší.

Občas se stránka zobrazila. Bez obrázků. A web byl pomalejší než lenochod.

Podpora webhostingu neodhalila žádné příčiny přetížení.

Z jejího postu na Facebooku v tu chvíli čišelo čiré zoufalství.

Happyend?

Záchranná akce trvala asi půl dne.

Web Martině v tuto chvíli funguje bez problémů, ale čeká ji spousta práce, aby si při příští změně hostingu znovu nezakládala na žaludeční vředy.


Asi už správně tušíš, že tohle všechno způsobily obrázky. Martina se totiž při jejich zpracování a vkládání na web nevědomky dopustila 2 hříchů, před kterými tě chci varovat.

 

→ Hřích 1: Háčky, čárky, mezery

Háčky, čárky, mezery do názvů souborů nepatří! Nikdy.

Platí to pro jakékoli soubory, které na web nahráváš. U obrázků pocítíš důsledky nejsilněji.

Proč vadí diakritika a mezery v názvech souborů?

  • přímé odkazy na špatně pojmenované soubory často nefungují
  • obrázky se nemusí zobrazovat vždy a všude
  • po změně webhostingu se nebudou zobrazovat nikde
  • v kombinaci s hříchem č. 2 mohou způsobit i kolaps webu

Nenech se zmást

Ono se pravděpodobně na tebe bude všechno tvářit, jakože není sebemenší problém. Nahraješ fotku řeřicha.jpg a ona se v pohodě zobrazí, zkusíš obrázek žluťoučký kůň.gif a šup, koník je tam…

Háček s háčky a čárkami je totiž fikaně schovaný.

V první fázi se projeví jen na zařízeních, která nemají nainstalovanou češtinu. Nad tím by se ještě možná dalo mávnout rukou.

Až ale změníš webhosting, nebudeš se stačit divit, co se stalo s řeřichou a kam zmizel ten žluťoučký kůň. Jako by se po nich slehl web.

„Já ale webhosting měnit nehodlám!“ … chápu, pobyt v nemocnici si pravděpodobně taky neplánuješ. Víš ale jistě, že si v ní nikdy nepobudeš? Prostě tohle se vždycky neřídí podle plánu, možná nebudeš mít jinou volbu.

Co se při změně hostingu stane

Špatně pojmenované obrázky se naštěstí nevypaří úplně. Během stěhování se „jen přejmenují“:

špatná diakritika v názvech souborů
Obrázky s diakritikou po změně webhostingu

Myslíš, že se z tohoto dokáže načíst obrázek 62943_adopce_výřez.jpg?

Řešení existuje

Řešit se to dá 2 způsoby:

a) komplet celý web projít a špatně pojmenované obrázky vyměnit – zabere to víc času než varianta b), ale budeš mít problém vyřešený i do budoucna.

b) přejmenovat po změně hostingu názvy souborů na původní se správnou českou diakritikou – je to rychlejší, ale při příští změně hostingu budeš mít pravděpodobně zase stejný problém.

Nejlepším řešením je prostě prevence.

Jestli si nevěříš, že to zvládneš ohlídat sama, nainstaluj si plugin, který to ohlídá za tebe.

Tento hřích je tak běžný a jeho důsledky mohou být tak tíživé, že jsem varování zahrnula i do Webového desatera pro počítačové blondýny.


→ Hřích 2: Obří obrázky

Obrázky gigantických rozměrů na web nepatří!

Malou výjimku mají profi fotografové.

Proč vadí velké obrázky?

  • zpomalují načítání stránky
  • žerou mobilní data
  • ve větším množství zatěžují server
  • v kombinaci s hříchem č. 1 mohou způsobit i kolaps webu

Návštěvníci, kteří si budou tvůj web prohlížet na mobilu, nebudou vůbec nadšení, když jim 16 MB z měsíčního limitu ukousne jeden tvůj obrázek.

Ani na stolních počítačích nejsou velké obrázky uživatelsky přívětivé.

To si tak začneš číst článek a najednou hop! A text odskočí kamsi dolů, ty koukáš na něco, co už máš přečtené, nebo na obrázek, který se jaksi ráčil právě načíst.

Nebo otevřeš web a… „Ono je to nějaké rozbité nebo co?“ V textu jsou jakési prázdné obdélníky, v některých je možná načtený kousek obrázku, takže celek vypadá jako rozpracovaná verze.

Datově velký obrázek na webu
Vlevo od formuláře se časem načte obrázek…

Jak velké obrázky na web nahrávat?

Čím menší, tím lepší.

Ne, nemusíš používat jen miniatury, na kterých nebude nic vidět. Ale když je full HD rozlišení 1920 × 1080 pixelů, je fakt zbytečné na web nahrávat fotky, které mají na šířku 6000 pixelů.

Prostě vezmi rozum do hrsti a velikost obrázků vol podle toho, kam je dáváš. Když na velkém monitoru mají tvoje články šířku kolem 600 pixelů, logicky do nich stačí vložit fotky této šířky. Když potřebuješ, aby se po kliknutí otevřel obrázek ve větším, aby byly vidět detaily, nahraješ na web větší verzi. Do článku ale pořád vkládáš jen rozměr kolem těch 600 na šířku.

Není obr jako obr

I obrázek, který má vcelku rozumné rozměry, může být pořádný macek. Mluvím o datové velikosti, tj. kolik to má kB, nebo dokonce MB. Zmenšením rozměrů se zmenší i datová velikost, občas je ale i tak obrázek zbytečně datově velký. Pak doporučuju použít třeba službu Tinypng. Zachová rozměry a ubere data.

tinypng.com

Běžné ilustrační obrázky na webu by se měly v pohodě vejít do 100 kB. Jak jsou obrázky velké zjistíš snadno ještě před nahráváním na web třeba podle návodu Jak zjistit velikost obrázku.

Pekelná kombinace

Každý z těchto hříchů může způsobit nepříjemný malér. V kombinaci z toho bude dokonalý průser. Ale to už víš z Martinina příběhu 😉

Jak moc s obrázky hřešíš ty?

Budu ráda, když mi napíšeš do komentářů, jak to máš s obrázky na webu ty.

Postupně připravuju:

  • další návody jak na obrázky ve WordPressu
  • plánuju také online kurz Obrázky ve WordPressu od A do Z

Pokud jsi na ně zvědavá, nech si posílat upozornění na články, návody a online kurzy o obrázcích ve WordPressu.

 

Chci to vědět hned

 

 

A tady je prostor pro tvoje vyjádření

Petra Vymětalová

Petra Vymětalová

Díky bohatým zkušenostem s tvorbou vlastních webů jsem se v rámci projektu Brouzdaliště.cz pasovala do role internetové průvodkyně technikáliemi pro počítačové blondýny. Jak ti můžu být užitečná, se dočteš pod záložkou Kdo jsem.

Komentářů: 3

  1. Ahoj Petro, tak to je pro mě velké AHA. Před nedávnem mi pár obrázků takhle zmizelo…Dělám bohužel obě 2 chyby. Už se těším na postup pro počítačové blondýnky, jak zmenšovat fotky. Super článek! 🙂 P. S. Čeká mě pěkné předělávání u dosavadních článků na blogu. Uf!

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *