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. Slouží nejen ke zlepšení uživatelské zkušenosti, ale mají také pozitivní vliv na výkon stránky a SEO.
Milan Ugrin · Frontend developer
Drobnost, která mění vše: pár čísel v HTML kódu dokáže výrazně zlepšit rychlost načítání stránky, eliminuje nepříjemné poskakování obsahu a vyhledávače je ocení. V tomto článku si ukážeme, jak na atributy width a height chytře.
Co si z článku odnesete
- Uvádějte atributy
widthaheightu 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.
Obecné doporučení
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ě často 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čuje se 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ů.
„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 nim 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 Internet Exploreru) 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 na všech 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.
Závěr
Správné vyplnění atributů width a height 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.
