Jak používat atributy Width & Height u obrázků na webu
Pro optimalizaci zobrazení obrázků na webu je zásadní uvádět atributy width a height přímo do HTML. Tyto atributy slouží nejen ke zlepšení uživatelské zkušenosti, ale mají také pozitivní vliv na výkon stránky a SEO.
Štítky
Klíčové poznatky
Uvádějte atributy width a height u všech obrázků
Kombinujte HTML atributy s CSS styly pro responzivní design
CSS má přednost před HTML atributy při vykreslování
Moderní prohlížeče používají atributy jako aspect ratio
Vyplněné atributy zlepšují SEO a uživatelský zážitek
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).
Responzivní design a 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í:
.img-fluid {
max-width: 100%;
height: auto;
}
img {
max-width: 100%;
height: auto;
}
Doporučujeme však pro všechny obrázky mít nastavenou i property width: auto;.
Priorita CSS před HTML atributy
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ů.
Moderní prohlížeče (kromě Safari, které je právoplatným nástupcem IEčka) dokáží použít atributy width a height jako 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.
Výhody pro SEO
Díky vyplněným atributům width a height získáme plusové body u vyhledávačů. Používání těchto atributů 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.