Multimediální prvky, jako jsou obrázky, infografiky a videa, hrají klíčovou roli ve vývoji webových stránek. Nicméně, rozměr obrázků má značný dopad na celkovou efektivitu aplikace a její uživatelskou přívětivost.
HTML, neboli Hypertext Markup Language, je nejrozšířenější jazyk pro vytváření struktury webových stránek. Jako vývojář máte možnost do HTML dokumentu začlenit obrázky produktů, loga a další grafické prvky, čímž zvýšíte vizuální atraktivitu a celkový zážitek uživatele.
Pro optimální funkčnost aplikace je však nezbytné upravit rozměry a provést optimalizaci obrázků. V tomto článku si rozebereme, proč je úprava velikosti obrázků tak důležitá, jaké jsou různé metody pro úpravu velikosti obrázků v HTML a jaké jsou doporučené postupy.
Jaký je význam úpravy rozměrů obrázků v HTML?
Úprava rozměrů obrázku znamená jeho zvětšení či zmenšení. Běžné obrázky bývají uloženy v různých formátech a můžete je získat od fotografa, z událostí, od grafika nebo je stáhnout z online zdrojů.
Mohlo by se zdát lákavé použít obrázky v původním formátu. Avšak ve většině případů to není optimální. Zde jsou důvody, proč je vhodné upravit rozměry obrázků v HTML dokumentu:
- Rychlost načítání stránky: Přestože obrázky zlepšují uživatelský dojem, velké soubory mohou negativně ovlivnit rychlost načítání stránky. Optimalizací obrázků urychlíte načítání vašich webových stránek.
- Responzivita webu: Moderní webové stránky a aplikace jsou navštěvovány uživateli používajícími různá zařízení. Úprava rozměrů obrázků umožňuje, aby se web přizpůsobil mobilním telefonům, počítačům i tabletům.
- Využití šířky pásma: Většina poskytovatelů webhostingu omezuje šířku pásma v hostingových balíčcích. Optimalizací obrázků získáte více prostoru na webu pro další typy obsahu.
- SEO: Rychlost načítání stránky je významný faktor, který vyhledávače berou v úvahu. Úprava rozměrů obrázků zlepšuje rychlost načítání, což má pozitivní vliv na SEO.
- Maximalizace úložného prostoru: Velikost úložiště je důležitý faktor při výběru webhostingu. Nahrávání velkých obrázků s vysokým rozlišením může zabrat spoustu úložného prostoru na serveru.
- Zlepšení uživatelského dojmu: Uživatelé webových stránek nechtějí čekat dlouho na načtení obrázků. Optimalizací obrázků docílíte toho, že se zobrazí současně se zbytkem obsahu.
Existuje několik způsobů, jak upravit velikost obrázků v HTML.
Využití HTML atributů
Pro demonstraci úpravy rozměrů obrázků si vytvoříme jednoduchou aplikaci. Budeme používat obrázky z Pixabay. Konkrétně použijeme tento obrázek. Pro jednoduchost si jej můžete stáhnout a přesunout do vašeho projektu.
Zde je náš HTML kód:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Popis vaší webové stránky">
<meta name="keywords" content="klíčová, slova, zde">
<meta name="author" content="Vaše Jméno">
<title>Úprava velikosti obrázků v HTML</title>
</head>
<body>
<h2>Moje kočka</h2>
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" >
</body>
</html>
Pokud zobrazíte původní obrázek bez úpravy rozměrů, uvidíte, že je příliš velký a zabírá celou webovou stránku. Obrázek je tak téměř neviditelný.
Můžeme nastavit obrázku kočky výšku na 175 pixelů a šířku na 300 pixelů.
Upravíme kód ve značce <img> takto:
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" width="300" height="175">
Nyní uvidíte, že obrázek je zobrazen správně a je optimalizovaný.
Použití stylů CSS
Namísto vkládání stylu přímo do HTML můžeme vytvořit externí stylopis. Vytvoříme soubor styles.css a do sekce <head> našeho HTML dokumentu vložíme značku <link>, která propojí stylopis s HTML dokumentem.
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Popis vaší webové stránky">
<meta name="keywords" content="klíčová, slova, zde">
<meta name="author" content="Vaše Jméno">
<title>Úprava velikosti obrázků v HTML</title>
<link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css">
</head>
<body>
<h2>Moje kočka</h2>
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" >
</body>
</html>
Do souboru styles.css můžeme přidat styl pro náš obrázek. Zde je kód:
img {
width: 300px;
height: 200px;
}
Výsledný obrázek bude vypadat následovně:
Použili jsme selektor <img>, abychom nalezli náš obrázek v HTML dokumentu. Obrázku jsme nastavili šířku na 300px a výšku na 200px.
Použití procent
V předchozím příkladu jsme použili pixely (px) pro úpravu rozměrů obrázku. Můžeme také použít procenta. Můžeme například nastavit šířku a výšku obrázku na 65 %.
Použijeme náš předchozí HTML kód. Odstraňte obsah souboru styles.css a přidejte tento kód:
img {
width: 65%;
height: 65%;
}
Když zobrazíte obrázek, uvidíte toto:
Úprava rozměrů obrázků pro responzivní design
Obrázek by se měl ideálně přizpůsobovat různým rozměrům obrazovky. Můžeme ho optimalizovat tak, aby se zobrazoval správně na všech zařízeních. Pomocí stejného HTML kódu přidáme do našeho souboru styles.css následující:
img {
max-width: 100%;
height: auto;
}
Vlastnost max-width: 100% zajistí, že obrázek nikdy nepřesáhne šířku svého kontejneru. Na menších obrazovkách se obrázek zmenší proporčně.
Vlastnost height: auto zajistí, že si obrázek zachová svůj poměr stran při zvětšování a zmenšování.
Podle poměru stran
V designu webových stránek a aplikací je poměr stran poměr mezi výškou a šířkou. Při úpravě rozměrů je důležité zachovat poměr stran, aby obrázky nebyly zkreslené a vypadaly dobře na různých velikostech obrazovky.
Použijeme stejný HTML kód pro demonstraci, jak zachovat poměr stran při úpravě rozměrů obrázků.
Přidejte tento kód do souboru styles.css:
img {
width: 300px;
height: auto;
}
Použili jsme selektor img pro nalezení obrázku v HTML dokumentu. Šířku jsme nastavili na 300 pixelů. Vlastnost height: auto umožňuje prohlížečům automaticky vypočítat výšku obrázku a zachovat poměr stran. Tím zajistíme, že obrázek se neroztáhne při zobrazování na různých zařízeních.
Úprava rozměrů obrázků na pozadí
Obrázky lze použít jako pozadí elementů. Úpravou rozměrů zajistíme, že obrázek na pozadí bude vhodně vyplňovat svůj kontejner. Zde je příklad HTML dokumentu s odstavcem a textem:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Popis vaší webové stránky">
<meta name="keywords" content="klíčová, slova, zde">
<meta name="author" content="Vaše Jméno">
<title>Úprava velikosti obrázků v HTML</title>
<link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css">
</head>
<body>
<div class="container">
<div class="text">
<p>Toto je náš obrázek kočky</p>
</div>
</div>
</body>
</html>
Nyní můžeme přidat obrázek na pozadí pomocí stylopisu styles.css:
.container {
position: relative;
text-align: center;
color: #ffffff;
padding: 100px;
background-image: url("https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg");
background-position: center;
width: 75%;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: orangered;
}
Obrázek na pozadí můžeme přidat jen pomocí CSS. Vytvořili jsme kontejner s vycentrovaným textem a obrázkem kočky na pozadí.
Pro úpravu rozměrů a optimalizaci obrázků existuje mnoho nástrojů. Některé z nich nabízejí jen úpravu velikosti, jiné umožňují ukládání obrázků a jejich zobrazování v HTML pomocí URL adresy.
Cloudinary je příkladem nástroje, který upravuje rozměry obrázků na serveru ještě před tím, než jsou odeslány uživateli. Tento nástroj automaticky upravuje velikost obrázků bez negativního dopadu na výkon webové stránky.
Doporučené postupy pro úpravu rozměrů obrázků v HTML
Přestože jsme si popsali různé přístupy k úpravě rozměrů obrázků v HTML, měli byste se vždy držet následujících doporučených postupů pro optimální výsledky:
- Vyhněte se inline stylům: Může se zdát lákavé rychle upravovat obrázky přímo v HTML dokumentu. Avšak tento přístup může negativně ovlivnit rychlost načítání stránky. Použijte externí stylopis CSS, který usnadní čtení a údržbu kódu.
- Používejte atributy šířka a výška: Ujistěte se, že u obrázků uvádíte šířku a výšku. Prohlížeč díky tomu vyhradí prostor pro obrázek při načítání zbytku obsahu.
- Používejte správné formáty obrázků: Obrázky se dodávají v různých formátech, jako jsou JPEG, PNG a SVG. Například PNG je perfektní pro průhledné obrázky a SVG je vhodné pro loga.
- Zajistěte, aby obrázky byly responzivní: Nikdy nemůžete vědět, jaká zařízení budou uživatelé používat pro přístup k webu. Vždy optimalizujte obrázky pro různá rozlišení obrazovky, aby se zobrazovaly jednotně.
- Optimalizujte velikost souborů: Neupravené obrázky ve vysoké kvalitě mohou mít velké rozměry. Takové obrázky zabírají mnoho místa na serveru a negativně ovlivňují rychlost načítání stránky. Velikost obrázků můžete zmenšit pomocí různých nástrojů, aniž byste snížili jejich kvalitu.
Závěr
Úprava rozměrů obrázků v HTML zlepšuje uživatelský dojem, zvyšuje responzivitu webových stránek a šetří místo na serveru. Ukázali jsme si několik přístupů k úpravě rozměrů obrázků v HTML.
I když jsou všechny účinné, doporučujeme používat vlastnosti CSS v externím souboru CSS pro úpravu rozměrů obrázků. V některých případech však můžete použít inline styly CSS, pokud je vaše aplikace malá a obsahuje pouze několik obrázků.
Doporučujeme vám přečíst si další články o CSS, abyste lépe porozuměli tomuto jazyku pro stylování webových stránek.