Nemůžeme dostatečně zdůraznit důležitost multimédií, jako jsou obrázky, infografiky a videa ve vývoji. Velikost obrázků však ovlivňuje celkový výkon aplikace a její použitelnost.
HTML (hypertext markup language) je nejpoužívanějším jazykem pro návrh a tvorbu struktury webových stránek. Jako vývojář můžete do dokumentu HTML přidat obrázky produktů, loga a další grafiku a zlepšit tak uživatelskou zkušenost a vizuální přitažlivost.
Pokud však potřebujete, aby aplikace fungovala optimálně, musíte změnit velikost a optimalizovat obrázky. V tomto článku vysvětlím důležitost změny velikosti obrázků, různé přístupy ke změně velikosti obrázků v HTML a osvědčené postupy.
Table of Contents
Jaký význam má změna velikosti obrázků v HTML?
Změna velikosti obrázku je zvětšení nebo zmenšení velikosti obrázku. Typické obrázky jsou uloženy v různých formách a můžete je získat od svého fotografa, události nebo návrháře nebo si je stáhnout z online zdrojů.
Můžete být v pokušení používat obrázky v původních formátech. Ve většině případů to však není žádoucí. Zde jsou některé z důvodů, proč byste měli změnit velikost obrázků v dokumentu HTML:
- Rychlost načítání stránky: Přestože je známo, že obrázky zlepšují uživatelský dojem, velké obrázky mohou negativně ovlivnit rychlost načítání. Optimalizace takových obrázků urychlí načítání vašich webových stránek.
- Zajistěte, aby byl váš web responzivní: Typický web/aplikace přijímá návštěvy od lidí, kteří používají různá zařízení. Změna velikosti obrázků umožňuje, aby webová stránka reagovala na mobilní zařízení, stolní počítače a tablety.
- Využití šířky pásma: Většina hostitelů webových stránek omezuje šířku pásma při prodeji hostingových balíčků vlastníkům webových stránek. Když optimalizujete obrázky, získáte na svém webu více prostoru pro jiné typy obsahu.
- Účely SEO: Rychlost načítání stránky je jedním z hodnotících faktorů, které vyhledávače berou v úvahu. Změna velikosti obrázků zlepšuje rychlost načítání, což nakonec zvyšuje vaše SEO.
- Maximalizace úložiště: Velikost úložného prostoru je jedním z faktorů, které je třeba vzít v úvahu při výběru webhostingu. Nahrávání velkých obrázků a obrázků s vysokým rozlišením může zabrat spoustu úložného prostoru na serverech.
- Zlepšení uživatelské zkušenosti: Uživatelé webových stránek nemusí čekat věky, než se na webové stránce načtou obrázky. Obrázky můžete optimalizovat tak, aby se zobrazovaly současně se zbytkem obsahu.
Toto jsou různé způsoby, jak změnit velikost obrázků v HTML
Použití atributů HTML
Můžeme vytvořit jednoduchou aplikaci, která ukáže, jak měnit velikost obrázků. Budu používat obrázky z Pixabay v mé webové aplikaci. budu používat toto obraz. Můžete si jej stáhnout a přesunout do svého projektu pro snadnou ukázku.
Toto je můj HTML kód:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> </head> <body> <h1>My Cat</h1> <img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" > </body> </html>
Když vykreslím původní obrázek bez změny velikosti, je po celé webové stránce a obrázek ani nevidíte.
Mohu dát svému obrázku kočky výšku 175 a šířku 300.
Změním svůj kód ve značce 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í můžete vidět, že obraz je viditelný a optimalizovaný.
Použití stylů CSS
Místo vloženého stylu, který jsme použili ve výše uvedeném kroku, můžeme vytvořit samostatnou šablonu stylů. Vytvořím šablonu stylů a pojmenuji ji styles.css. Do sekce
našeho HTML dokumentu umístíme značku , která propojí šablonu stylů s dokumentem HTML.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> <link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css"> </head> <body> <h1>My Cat</h1> <img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" > </body> </html>
K našemu obrázku můžeme přidat styl prostřednictvím listu styles.css. Toto je náš kód:
img {
width:300px;
height:200px
}
Vykreslený obrázek bude vypadat následovně:
K vyhledání našeho obrázku v dokumentu HTML jsme použili selektor . Nášmu obrázku jsme dali šířku 300px a výšku 200px.
Pomocí procenta
V předchozím příkladu jsme použili pixely (px) ke změně velikosti našeho obrázku. Můžeme také použít procenta k optimalizaci našeho obrazu. Například můžeme nastavit šířku a výšku našeho obrázku na 65 %.
Použijeme náš předchozí HTML kód. Odstraňte však to, co je v souboru styles.css a přidejte tento kód:
img {
width:65%;
height:65%
}
Když vykreslíte obrázek, získáte následující:
Změna velikosti obrázků pro responzivní design
Dobrý obraz by měl reagovat na různé velikosti obrazovky. Můžete také optimalizovat svůj obraz, aby odpovídal různým velikostem obrazovky. Pomocí stejného HTML kódu to můžeme přidat do našeho souboru styles.css:
img {
max-width: 100%;
height: auto;
}
Vlastnost max-width: 100% zajišťuje, že obrázek nikdy nepřesáhne šířku svého kontejneru. Na menších obrazovkách se tak obraz vždy proporcionálně zmenší.
Vlastnost height: auto zajišťuje, že si obraz při zvětšování a zmenšování zachová svůj poměr stran.
Podle poměru stran
V designu webu/aplikace je poměr stran proporcionální vztah mezi výškou a šířkou. Zachování poměru stran při změně velikosti nebo optimalizaci obrázků zajišťuje zachování vizuální konzistence; obrázky nejsou zkreslené a reagují na různé velikosti obrazovky.
Stejný HTML kód použijeme k ukázce, jak zachovat poměr stran při změně velikosti našich obrázků.
Přidejte tento kód do svého souboru styles.css:
img {
width: 300px;
height: auto;
}
Použil jsem selektor ‚img‘ k nalezení našeho obrázku v dokumentu HTML. Šířku jsme nastavili na 300 pixelů. Vlastnost height: auto umožňuje různým prohlížečům automaticky vypočítat výšku obrázku při zachování poměru stran. To zajišťuje, že se obrázky při vykreslování na různých velikostech obrazovky neroztahují.
Změna velikosti obrázků na pozadí
Na prvky můžete vložit obrázky, které budou sloužit jako obrázky pozadí. Změna velikosti obrázku na pozadí zajistí, že se vejde do kontejneru. Toto je příklad HTML dokumentu s odstavcem a nějakým textem:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> <!-- Link to external CSS file --> <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>This is our cat image</p> </div> </div> </body> </html>
Nyní můžeme přidat obrázek na pozadí prostřednictvím listu 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í lze přidat pouze pomocí CSS. Vytvořil jsem kontejner s vycentrovaným textem a obrázkem na pozadí kočky.
Ke změně velikosti a optimalizaci obrázků můžete použít různé nástroje. Některé z těchto nástrojů vám nabízejí pouze funkci změny velikosti. Některé vám však také umožní ukládat obrázky a zobrazovat je do souboru HTML pomocí adresy URL.
Oblačno je dobrým příkladem nástroje, který mění velikost obrázku na serveru předtím, než jej doručí uživatelům. Tento nástroj je navržen tak, aby automaticky měnil velikost obrázků bez dopadu na výkon webu.
Doporučené postupy pro změnu velikosti obrázků v HTML
Přestože jsme diskutovali o několika přístupech ke změně velikosti obrázků v HTML, měli byste se vždy držet těchto osvědčených postupů, abyste dosáhli optimálních výsledků:
- Vyhněte se inline stylům: Můžete být v pokušení rychle upravit obrázky z dokumentů HTML a přejít k další části. Tento přístup však může negativně ovlivnit rychlost načítání webové stránky. Použijte samostatnou šablonu stylů CSS a usnadněte si čtení a údržbu kódu.
- Použijte atributy ‚šířka‘ a ‚výška‘: Ujistěte se, že zadáváte šířku a výšku obrázků. Tento přístup nasměruje prohlížeč k automatickému přidělení prostoru pro obrázek při načítání zbytku obsahu.
- Používejte správné formáty obrázků: Obrázky přicházejí v různých formátech, jako jsou JPEG, PNG a SVG. Například PNG je perfektní formát pro průhledný obrázek, zatímco SVG se hodí k logům.
- Zajistěte, aby byly vaše obrázky responzivní: Možná nikdy nebudete vědět, jaká zařízení návštěvníků vašeho webu mají přístup k vašemu obsahu. Vždy optimalizujte obrazy pro různé velikosti obrazovky a zajistěte jednotnost zobrazení.
- Optimalizujte velikost souborů: Nezpracované obrázky ve vysoké kvalitě mohou být ve velkých souborech. Takové obrázky však mohou zabírat mnoho místa na vašem serveru a ovlivnit dobu načítání stránky. Velikost takových obrázků můžete zmenšit pomocí různých nástrojů, aniž byste snížili jejich kvalitu.
Závěr
Změna velikosti obrázků v HTML zlepšuje uživatelskou zkušenost, zvyšuje odezvu webové stránky a šetří místo na serveru. Představili jsme vám několik přístupů ke změně velikosti obrázků v HTML.
I když jsou všechny účinné, rád používám vlastnosti CSS v samostatném souboru CSS ke změně velikosti obrázků. Někdy však můžete přidat inline CSS, pokud je vaše aplikace malá a máte několik obrázků.
Můžete si také přečíst náš článek o zdrojích CSS a hlouběji porozumět tomuto jazyku stylů.