Nu putem sublinia suficient importanța multimedia, cum ar fi imaginile, infograficele și videoclipurile în dezvoltare. Cu toate acestea, dimensiunea imaginilor afectează performanța generală a unei aplicații și capacitatea de utilizare a acesteia.
HTML (hipertext markup language) este cel mai folosit limbaj pentru proiectarea și crearea structurii paginilor web. În calitate de dezvoltator, puteți adăuga imagini ale produselor, sigle și alte elemente grafice în documentul dvs. HTML pentru a îmbunătăți experiența utilizatorului și atractivitatea vizuală.
Cu toate acestea, dacă aveți nevoie ca aplicația să funcționeze optim, trebuie să redimensionați și să vă optimizați imaginile. În acest articol, voi explica importanța redimensionării imaginilor, diferitele abordări ale redimensionării imaginilor în HTML și cele mai bune practici.
Cuprins
Care este importanța redimensionării imaginilor în HTML?
Redimensionarea unei imagini înseamnă mărirea sau reducerea dimensiunii unei imagini. Imaginile tipice sunt stocate în diferite forme și le puteți obține de la fotograf, evenimente sau designer sau le puteți descărca din surse online.
Ați putea fi tentat să utilizați imagini în formatele lor originale. Cu toate acestea, în majoritatea cazurilor, acest lucru nu este de dorit. Acestea sunt câteva dintre motivele pentru care ar trebui să redimensionați imaginile din documentul HTML:
- Viteza de încărcare a paginii: deși se știe că imaginile îmbunătățesc experiența utilizatorului, a avea imagini mari poate afecta negativ viteza de încărcare. Optimizarea unor astfel de imagini va face ca paginile dvs. web să se încarce rapid.
- Faceți site-ul dvs. receptiv: un web/aplicație tipic primește vizite de la persoane care folosesc diferite dispozitive. Redimensionarea imaginilor face ca o pagină web să răspundă la dispozitivele mobile, desktop-uri și tablete.
- Utilizarea lățimii de bandă: majoritatea gazdelor de site-uri limitează lățimea de bandă atunci când vând pachete de găzduire proprietarilor de site-uri web. Când optimizați imaginile, obțineți mai mult spațiu pentru alte tipuri de conținut pe site-ul dvs.
- Scopuri SEO: viteza de încărcare a paginii este unul dintre factorii de clasare pe care iau în considerare motoarele de căutare. Redimensionarea imaginilor îmbunătățește viteza de încărcare, ceea ce în cele din urmă îmbunătățește SEO.
- Maximizați spațiul de stocare: dimensiunea spațiului de stocare este unul dintre factorii de luat în considerare atunci când alegeți o gazdă web. Încărcarea imaginilor mari și de înaltă rezoluție poate consuma mult spațiu de stocare pe servere.
- Îmbunătățiți experiența utilizatorului: utilizatorii de site-uri web nu trebuie să aștepte mult înainte ca imaginile să se încarce pe o pagină web. Vă puteți optimiza imaginile pentru a apărea simultan cu restul conținutului.
Acestea sunt moduri diferite de a redimensiona imaginile în HTML
Utilizarea atributelor HTML
Putem crea o aplicație simplă pentru a demonstra cum să redimensionăm imaginile. Voi folosi imagini de la Pixabay în aplicația mea web. Voi folosi asta imagine. Îl puteți descărca și muta în proiectul dvs. pentru o demonstrație ușoară.
Acesta este codul meu 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> </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>
Când redau imaginea originală fără redimensionare, aceasta este peste tot pe pagina web și nici măcar nu poți vedea imaginea.
Pot da imaginii pisicii mele o înălțime de 175 și o lățime de 300.
Îmi voi schimba codul în eticheta după cum urmează:
<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">
Acum puteți vedea că imaginea este vizibilă și optimizată.
Utilizarea stilurilor CSS
Putem crea o foaie de stil separată în locul stilului inline pe care l-am aplicat în pasul de mai sus. Voi crea o foaie de stil și o voi numi styles.css. Vom plasa o etichetă în secțiunea
a documentului HTML pentru a lega foaia de stil cu documentul 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>
Putem adăuga stil imaginii noastre prin foaia styles.css. Acesta este codul nostru:
img {
width:300px;
height:200px
}
Imaginea redată va apărea după cum urmează:
Am folosit selectorul pentru a localiza imaginea noastră pe documentul HTML. Am dat imaginii noastre o lățime de 300px și o înălțime de 200px.
Folosind Procentaj
În exemplul anterior, am folosit pixeli (px) pentru a ne redimensiona imaginea. De asemenea, putem folosi procente pentru a ne optimiza imaginea. De exemplu, putem seta lățimea și înălțimea imaginii noastre la 65%.
Vom folosi codul HTML anterior. Cu toate acestea, ștergeți ceea ce este în fișierul styles.css și adăugați acest cod:
img {
width:65%;
height:65%
}
Când randați imaginea, veți obține următoarele:
Redimensionarea imaginilor pentru un design receptiv
O imagine bună ar trebui să răspundă la diferite dimensiuni de ecran. De asemenea, vă puteți optimiza imaginea pentru a răspunde la diferite dimensiuni de ecran. Folosind același cod HTML, putem adăuga acest lucru în fișierul nostru styles.css:
img {
max-width: 100%;
height: auto;
}
Lățimea maximă: proprietatea 100% asigură că imaginea nu va depăși niciodată lățimea containerului său. Ca atare, imaginea se va reduce întotdeauna proporțional pe ecranele mai mici.
Proprietatea înălțime: auto asigură că imaginea își menține raportul de aspect pe măsură ce se scalează în sus și în jos.
După raportul de aspect
În designul web/aplicație, raportul de aspect este relația proporțională dintre înălțime și lățime. Menținerea raportului de aspect în timp ce redimensionați sau optimizați imaginile vă asigură că acestea păstrează consistența vizuală; imaginile nu sunt distorsionate și răspund la diferite dimensiuni ale ecranului.
Vom folosi același cod HTML pentru a demonstra cum să menținem raportul de aspect în timp ce ne redimensionăm imaginile.
Adăugați acest cod în fișierul styles.css:
img {
width: 300px;
height: auto;
}
Am folosit selectorul „img” pentru a localiza imaginea noastră în documentul HTML. Ne-am setat lățimea la 300 px. Înălțimea: proprietatea automată permite diferitelor browsere să calculeze automat înălțimea imaginii, păstrând în același timp raportul de aspect. Acest lucru asigură că imaginile nu sunt întinse în timp ce sunt redate pe diferite dimensiuni de ecran.
Redimensionarea imaginilor de fundal
Puteți insera imagini pe elemente pentru a servi drept imagini de fundal. Redimensionarea unei imagini de fundal asigură că aceasta se va potrivi în containerul său. Acesta este un exemplu de document HTML cu un paragraf și ceva text:
<!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>
Acum putem adăuga o imagine de fundal prin foaia 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;
}
O imagine de fundal poate fi adăugată numai folosind CSS. Am creat un container cu text centrat și o imagine de fundal a unei pisici.
Puteți folosi diferite instrumente pentru a vă redimensiona și optimiza imaginile. Unele dintre aceste instrumente vă oferă doar o funcție de redimensionare. Cu toate acestea, unele vă vor permite, de asemenea, să stocați imagini și să le difuzați în fișierul HTML folosind o adresă URL.
Cloudinary este un bun exemplu de instrument care redimensionează imaginea de pe server înainte de a o livra utilizatorilor. Acest instrument este conceput pentru a redimensiona automat imaginile fără a afecta performanța site-ului.
Cele mai bune practici pentru redimensionarea imaginilor în HTML
Deși am discutat mai multe abordări pentru redimensionarea imaginilor în HTML, ar trebui să respectați întotdeauna aceste bune practici pentru rezultate optime:
- Evitați stilul inline: puteți fi tentat să stilați rapid imaginile din documentele dvs. HTML și să treceți la următoarea parte. Cu toate acestea, această abordare poate afecta negativ viteza de încărcare a paginii web. Utilizați o foaie de stil CSS separată și faceți codul ușor de citit și întreținut.
- Utilizați atributele „lățime” și „înălțime”: asigurați-vă că specificați lățimea și înălțimea imaginilor. Această abordare direcționează browserul să aloce automat spațiul de imagine pe măsură ce se încarcă restul conținutului.
- Utilizați formatele corecte de imagine: imaginile vin în formate diferite, cum ar fi JPEG, PNG și SVG. De exemplu, PNG este un format perfect pentru o imagine transparentă, în timp ce SVG se potrivește logo-urilor.
- Faceți-vă imaginile receptive: este posibil să nu cunoașteți niciodată natura dispozitivelor vizitatorilor site-ului dvs. pentru a vă accesa conținutul. Optimizați întotdeauna imaginile pentru diferite dimensiuni de ecran și asigurați uniformitate în afișare.
- Optimizați dimensiunile fișierelor: imaginile brute de înaltă calitate pot veni în fișiere mari. Cu toate acestea, astfel de imagini pot ocupa mult spațiu pe serverul dvs. și pot afecta timpul de încărcare a paginii. Puteți reduce dimensiunea unor astfel de imagini folosind diverse instrumente fără a le scădea calitatea.
Concluzie
Redimensionarea imaginilor în HTML îmbunătățește experiența utilizatorului, face pagina dvs. web receptivă și economisește spațiu pe server. V-am prezentat mai multe abordări pentru redimensionarea imaginilor în HTML.
Chiar dacă toate sunt eficiente, îmi place să folosesc proprietățile CSS într-un fișier CSS separat pentru a redimensiona imaginile. Cu toate acestea, uneori puteți adăuga CSS inline dacă aplicația dvs. este mică și aveți câteva imagini.
De asemenea, puteți citi articolul nostru despre resursele CSS și puteți obține o înțelegere mai profundă a acestui limbaj de stilare.