Jak používat atributy Width & Height u obrázků na webu

Jak na správné vyplnění atributů

Pro nejlepší výsledky je vhodné uvádět přesné rozměry, ve kterých se obrázek bude vykreslovat. Přesné hodnoty však kvůli responzivitě většinou není možné uvést, proto se často používají reálné rozměry obrázků, které se vypisují přímo z CMS. Uvádějí se pouze čísla bez jednotek (px).

Příklad:

<img src="example.webp" width="600" height="400">

Responzivní design a využití CSS

Pro dosažení responzivního designu je nezbytné kombinovat HTML atributy s CSS styly. To se zajišťuje předdefinovanými styly, které například knihovny jako Bootstrap nebo Tailwind CSS poskytují:

Bootstrap:

.img-fluid { 
  max-width: 100%; 
  height: auto; 
}

Tailwind CSS:

img { 
  max-width: 100%; 
  height: auto; 
}

Doporučujeme však pro všechny obrázky mít nastavenou i property width: auto;.

Přednost má CSS

Pokud CSS nastavuje jiné rozměry než HTML atributy width a height, nemusíte mít obavy. CSS má při vykreslování obrázku přednost, což znamená, že výsledná velikost bude určena podle CSS stylů. HTML atributy však stále mají smysl – vyhledávače díky ním budou spokojené a uživatelé ocení plynulé načítání stránky, konkrétně absenci nepříjemného přeskakování obsahu při načítání obrázků.

Proč vyplňovat atributy Width & Height?

1. Zlepšení výkonu stránky

   Vyplnění atributů pomáhá prohlížeči rezervovat prostor pro obrázek před jeho načtením, čímž zamezuje přeskakování obsahu a zajišťuje plynulé načítání stránky.

2. Lepší uživatelská zkušenost (UX)

   Obrázky se zobrazují plynule bez skákání obsahu, což zlepšuje celkový dojem uživatelů z prohlížení stránky.

3. SEO

   Vyplněné atributy width a height mohou pozitivně ovlivnit hodnocení stránky vyhledávači. Tím získáte výhodu v pořadí výsledků vyhledávání.

4. Přístupnost

   Správně nastavené atributy width a height přispívají i k přístupnosti. Uživatelé s asistivními technologiemi mohou snáze pochopit rozložení stránky a navigovat na ní.

Moderní prohlížeče a Aspect Ratio

Moderní prohlížeče (kromě Safari, které je právoplatným nástupcem IEčka 🤦‍♂️) dokáží použít atributy width a heightjako aspect ratio, což znamená, že se nemusíte bát, že obrázek přeteče do strany například na mobilních zařízeních. Responsivita je samozřejmě na všech našich webech standardem.

Hlavní důvod a výhoda: SEO

Díky vyplněným atributům width a height získáme plusové body u vyhledávačů.

Shrnutí

Používání atributů width a height u obrázků je klíčové pro zlepšení výkonu stránky, uživatelského zážitku a SEO. Správné vyplnění těchto atributů nejen zajišťuje lepší vykreslení stránky, ale také přispívá k její přístupnosti a responzivnímu designu. Nepodceňujte význam těchto atributů a vždy je uvádějte u všech obrázků na všech webech. A nebo si ušetřete trápení a web si nechte vyrobit od nás. 😉