Vi kan inte nog betona vikten av multimedia som bilder, infografik och videor under utveckling. Men storleken på bilder påverkar den övergripande prestandan för en applikation och dess användbarhet.
HTML (hypertext markup language) är det mest använda språket för att designa och skapa strukturen på webbsidor. Som utvecklare kan du lägga till produktbilder, logotyper och annan grafik till ditt HTML-dokument för att förbättra användarupplevelsen och visuellt tilltalande.
Men om du behöver applikationen för att fungera optimalt måste du ändra storlek och optimera dina bilder. I den här artikeln kommer jag att förklara vikten av att ändra storlek på bilder, de olika metoderna för att ändra storlek på bilder i HTML och de bästa metoderna.
Innehållsförteckning
Vad är betydelsen av att ändra storlek på bilder i HTML?
Att ändra storlek på en bild är att skala upp eller ner storleken på en bild. Typiska bilder lagras i olika former, och du kan få dem från din fotograf, evenemang eller designer eller ladda ner dem från onlinekällor.
Du kan bli frestad att använda bilder i deras ursprungliga format. Men i de flesta fall är detta inte önskvärt. Det här är några av anledningarna till att du bör ändra storlek på bilder i ditt HTML-dokument:
- Sidans laddningshastighet: Även om bilder är kända för att förbättra användarupplevelsen, kan stora bilder påverka laddningshastigheten negativt. Om du optimerar sådana bilder kommer dina webbsidor att laddas snabbt.
- Gör din webbplats responsiv: En typisk webb/applikation får besök från personer som använder olika enheter. Ändra storlek på bilder gör en webbsida lyhörd för mobila enheter, stationära datorer och surfplattor.
- Bandbreddsanvändning: De flesta webbplatsvärdar begränsar bandbredden när de säljer värdpaket till webbplatsägare. När du optimerar bilder får du mer utrymme för andra typer av innehåll på din webbplats.
- SEO-ändamål: Sidans laddningshastighet är en av rankningsfaktorerna som sökmotorer tar hänsyn till. Ändra storlek på dina bilder förbättrar laddningshastigheten, vilket så småningom ökar din SEO.
- Maximera lagring: Storleken på lagringsutrymmet är en av faktorerna att ta hänsyn till när du väljer ett webbhotell. Att ladda upp stora och högupplösta bilder kan ta mycket lagringsutrymme på servrarna.
- Förbättra användarupplevelsen: Webbplatsanvändare behöver inte vänta i evigheter innan bilder laddas på en webbsida. Du kan optimera dina bilder så att de visas samtidigt med resten av innehållet.
Det här är de olika sätten att ändra storlek på bilder i HTML
Använda HTML-attribut
Vi kan skapa ett enkelt program för att visa hur man ändrar storlek på bilder. Jag kommer att använda bilder från Pixabay i min webbapplikation. Jag kommer att använda detta bild. Du kan ladda ner den och flytta den till ditt projekt för enkel demonstration.
Detta är min HTML-kod:
<!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>
När jag renderar originalbilden utan att ändra storlek finns den över hela webbsidan och du kan inte ens se bilden.
Jag kan ge min kattbild en höjd på 175 och en bredd på 300.
Jag kommer att ändra min kod i taggen enligt följande:
<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">
Du kan nu se att bilden är synlig och optimerad.
Använder CSS-stilar
Vi kan skapa en separat stilmall istället för den inline-styling vi tillämpade i steget ovan. Jag kommer att skapa en stilmall och namnge den styles.css. Vi kommer att placera en -tagg i vårt HTML-dokuments
-sektion för att länka formatmallen till HTML-dokumentet.<!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>
Vi kan lägga till stil till vår bild genom arket styles.css. Detta är vår kod:
img {
width:300px;
height:200px
}
Den renderade bilden kommer att se ut enligt följande:
Vi har använt -väljaren för att hitta vår bild i HTML-dokumentet. Vi har gett vår bild en bredd på 300px och en höjd på 200px.
Använder procent
I det föregående exemplet har vi använt pixlar (px) för att ändra storlek på vår bild. Vi kan också använda procentsatser för att optimera vår bild. Till exempel kan vi ställa in bredden och höjden på vår bild till 65 %.
Vi kommer att använda vår tidigare HTML-kod. Men, ta bort det som finns i styles.css-filen och lägg till den här koden:
img {
width:65%;
height:65%
}
När du renderar bilden får du följande:
Ändra storlek på bilder för responsiv design
En bra bild bör vara lyhörd för olika skärmstorlekar. Du kan också optimera din bild för att svara på olika skärmstorlekar. Med samma HTML-kod kan vi lägga till detta i vår styles.css-fil:
img {
max-width: 100%;
height: auto;
}
Egenskapen max-width: 100% säkerställer att bilden aldrig kommer att överskrida bredden på dess behållare. Som sådan kommer bilden alltid att skalas ner proportionellt på mindre skärmar.
Egenskapen höjd: auto ser till att bilden bibehåller sitt bildförhållande när den skalas upp och ned.
Efter bildförhållande
I webb-/appdesign är bildförhållandet det proportionella förhållandet mellan höjd och bredd. Att bibehålla bildförhållandet samtidigt som du ändrar storlek eller optimerar dina bilder säkerställer att de bibehåller visuell konsistens; bilderna är inte förvrängda och reagerar på olika skärmstorlekar.
Vi kommer att använda samma HTML-kod för att demonstrera hur vi bibehåller bildförhållandet medan vi ändrar storlek på våra bilder.
Lägg till den här koden i din styles.css-fil:
img {
width: 300px;
height: auto;
}
Jag har använt ”img”-väljaren för att hitta vår bild i HTML-dokumentet. Vi har satt vår bredd till 300px. Egenskapen height: auto tillåter olika webbläsare att automatiskt beräkna höjden på bilden med bibehållen bildförhållande. Detta säkerställer att bilderna inte sträcks ut när de renderas på olika skärmstorlekar.
Ändra storlek på bakgrundsbilder
Du kan infoga bilder på element för att fungera som bakgrundsbilder. Ändra storlek på en bakgrundsbild säkerställer att den får plats i dess behållare. Det här är ett exempel på ett HTML-dokument med ett stycke och lite 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>
Vi kan nu lägga till en bakgrundsbild genom arket 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;
}
En bakgrundsbild kan endast läggas till med CSS. Jag har skapat en behållare med centrerad text och en bakgrundsbild av en katt.
Du kan använda olika verktyg för att ändra storlek och optimera dina bilder. Vissa av dessa verktyg erbjuder dig bara en storleksändringsfunktion. Men vissa låter dig också lagra bilder och visa till din HTML-fil med en URL.
Molnigt är ett bra exempel på ett verktyg som ändrar storlek på bilden på servern innan den levererar den till användarna. Det här verktyget är utformat för att automatiskt ändra storlek på bilder utan att påverka webbplatsens prestanda.
Bästa metoder för att ändra storlek på bilder i HTML
Även om vi har diskuterat flera metoder för att ändra storlek på bilder i HTML, bör du alltid hålla dig till dessa bästa metoder för optimala resultat:
- Undvik inline-styling: Du kan bli frestad att snabbt utforma bilder från dina HTML-dokument och gå vidare till nästa del. Detta tillvägagångssätt kan dock påverka webbsidans laddningshastighet negativt. Använd ett separat CSS-stylingblad och gör din kod lätt att läsa och underhålla.
- Använd attributen ”bredd” och ”höjd”: Se till att du anger dina bilders bredd och höjd. Detta tillvägagångssätt styr webbläsaren att automatiskt allokera bildutrymmet när resten av innehållet laddas.
- Använd rätt bildformat: Bilder finns i olika format, som JPEG, PNG och SVG. Till exempel är PNG ett perfekt format för en transparent bild, medan SVG passar logotyper.
- Gör dina bilder responsiva: Du kanske aldrig vet vilken typ av webbplatsbesökares enheter som ska komma åt ditt innehåll. Optimera alltid bilderna för olika skärmstorlekar och säkerställ enhetlighet i visningen.
- Optimera filstorlekarna: Rå bilder av hög kvalitet kan komma i stora filer. Sådana bilder kan dock ta upp mycket utrymme på din server och påverka sidladdningstiderna. Du kan minska storleken på sådana bilder med hjälp av olika verktyg utan att sänka kvaliteten.
Slutsats
Ändra storlek på dina bilder i HTML förbättrar användarupplevelsen, gör din webbsida responsiv och sparar serverutrymme. Vi har presenterat flera sätt att ändra storlek på bilder i HTML.
Även om de alla är effektiva älskar jag att använda CSS-egenskaper i en separat CSS-fil för att ändra storlek på bilderna. Däremot kan du ibland lägga till inline CSS om din applikation är liten och du har några bilder.
Du kan också läsa vår artikel om CSS-resurser och få en djupare förståelse för detta stylingspråk.