Vi kan ikke understreke nok viktigheten av multimedia som bilder, infografikk og videoer under utvikling. Størrelsen på bildene påvirker imidlertid den generelle ytelsen til en applikasjon og dens brukervennlighet.
HTML (hypertext markup language) er det mest brukte språket for å designe og lage strukturen til nettsider. Som utvikler kan du legge til produktbilder, logoer og annen grafikk i HTML-dokumentet ditt for å forbedre brukeropplevelsen og den visuelle appellen.
Men hvis du trenger at applikasjonen skal fungere optimalt, må du endre størrelse og optimalisere bildene dine. I denne artikkelen vil jeg forklare viktigheten av å endre størrelse på bilder, de forskjellige tilnærmingene til å endre størrelse på bilder i HTML, og de beste fremgangsmåtene.
Innholdsfortegnelse
Hva er viktigheten av å endre størrelse på bilder i HTML?
Endre størrelse på et bilde er å skalere opp eller ned størrelsen på et bilde. Typiske bilder lagres i forskjellige former, og du kan få dem fra fotografen, arrangementene eller designeren din eller laste dem ned fra nettkilder.
Du kan bli fristet til å bruke bilder i originalformatene. Men i de fleste tilfeller er dette ikke ønskelig. Dette er noen av grunnene til at du bør endre størrelsen på bilder i HTML-dokumentet ditt:
- Sideinnlastingshastighet: Selv om bilder er kjent for å forbedre brukeropplevelsen, kan det å ha store bilder påvirke lastehastigheten negativt. Optimalisering av slike bilder vil gjøre at nettsidene dine lastes raskt.
- Gjør nettstedet ditt responsivt: En typisk nett/applikasjon mottar besøk fra folk som bruker forskjellige enheter. Endre størrelse på bilder gjør en nettside responsiv for mobile enheter, stasjonære datamaskiner og nettbrett.
- Båndbreddebruk: De fleste nettstedverter begrenser båndbredde når de selger hostingpakker til nettstedeiere. Når du optimaliserer bilder får du mer plass til andre typer innhold på nettsiden din.
- SEO-formål: Sideinnlastingshastighet er en av rangeringsfaktorene som søkemotorer vurderer. Endre størrelsen på bildene dine forbedrer lastehastigheten, noe som til slutt øker SEO-en din.
- Maksimer lagringsplass: Størrelsen på lagringsplassen er en av faktorene du bør vurdere når du velger en webvert. Opplasting av store og høyoppløselige bilder kan ta mye lagringsplass på serverne.
- Forbedre brukeropplevelsen: Nettstedbrukere trenger ikke å vente evigheter før bilder lastes inn på en nettside. Du kan optimalisere bildene dine slik at de vises samtidig med resten av innholdet.
Dette er de forskjellige måtene å endre størrelse på bilder i HTML
Bruke HTML-attributter
Vi kan lage en enkel applikasjon for å demonstrere hvordan du endrer størrelse på bilder. Jeg kommer til å bruke bilder fra Pixabay i webapplikasjonen min. Jeg skal bruke denne bilde. Du kan laste den ned og flytte den til prosjektet ditt for enkel demonstrasjon.
Dette er HTML-koden min:
<!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 jeg gjengir originalbildet uten å endre størrelse, er det over hele nettsiden, og du kan ikke engang se bildet.
Jeg kan gi katten min en høyde på 175 og en bredde på 300.
Jeg vil endre koden min i -taggen som følger:
<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 nå se at bildet er synlig og optimalisert.
Bruke CSS-stiler
Vi kan lage et eget stilark i stedet for den innebygde stylingen vi brukte i trinnet ovenfor. Jeg skal lage et stilark og gi det navnet styles.css. Vi vil plassere en -tag i HTML-dokumentets
-seksjon for å koble stilarket med 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 legge til styling til bildet vårt gjennom styles.css-arket. Dette er vår kode:
img {
width:300px;
height:200px
}
Det gjengitte bildet vil se ut som følger:
Vi har brukt -velgeren for å finne bildet vårt i HTML-dokumentet. Vi har gitt bildet vårt en bredde på 300px og en høyde på 200px.
Bruker prosent
I forrige eksempel har vi brukt piksler (px) for å endre størrelsen på bildet vårt. Vi kan også bruke prosenter for å optimalisere bildet vårt. For eksempel kan vi sette bredden og høyden på bildet vårt til 65 %.
Vi vil bruke vår forrige HTML-kode. Men slett det som er i styles.css-filen og legg til denne koden:
img {
width:65%;
height:65%
}
Når du gjengir bildet, får du følgende:
Endre størrelse på bilder for responsiv design
Et godt bilde bør reagere på forskjellige skjermstørrelser. Du kan også optimere bildet ditt for å svare på forskjellige skjermstørrelser. Ved å bruke den samme HTML-koden kan vi legge til denne i styles.css-filen vår:
img {
max-width: 100%;
height: auto;
}
Maks-width: 100% egenskapen sikrer at bildet aldri overskrider bredden på beholderen. Som sådan vil bildet alltid skalere ned proporsjonalt på mindre skjermer.
Høyde: auto-egenskapen sikrer at bildet opprettholder sideforholdet når det skaleres opp og ned.
Etter sideforhold
I web-/appdesign er sideforholdet det proporsjonale forholdet mellom høyde og bredde. Ved å opprettholde sideforholdet mens du endrer størrelse eller optimaliserer bildene dine, sikrer du at de opprettholder visuell konsistens; bildene er ikke forvrengt og reagerer på forskjellige skjermstørrelser.
Vi vil bruke den samme HTML-koden for å demonstrere hvordan vi opprettholder sideforholdet mens vi endrer størrelsen på bildene våre.
Legg til denne koden i styles.css-filen din:
img {
width: 300px;
height: auto;
}
Jeg har brukt «img»-velgeren for å finne bildet vårt i HTML-dokumentet. Vi har satt vår bredde til 300px. Høyde: auto-egenskapen lar forskjellige nettlesere automatisk beregne høyden på bildet mens sideforholdet opprettholdes. Dette sikrer at bildene ikke strekkes mens de gjengis på forskjellige skjermstørrelser.
Endre størrelse på bakgrunnsbilder
Du kan sette inn bilder på elementer for å tjene som bakgrunnsbilder. Endre størrelsen på et bakgrunnsbilde sikrer at det får plass i beholderen. Dette er et eksempel på et HTML-dokument med et avsnitt og litt tekst:
<!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 nå legge til et bakgrunnsbilde gjennom 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;
}
Et bakgrunnsbilde kan bare legges til ved hjelp av CSS. Jeg har laget en beholder med sentrert tekst og et bakgrunnsbilde av en katt.
Du kan bruke forskjellige verktøy for å endre størrelse og optimalisere bildene dine. Noen av disse verktøyene tilbyr deg bare en funksjon for endring av størrelse. Noen vil imidlertid også tillate deg å lagre bilder og vise til HTML-filen din ved hjelp av en URL.
Skyet er et godt eksempel på et verktøy som endrer størrelsen på bildet på serveren før det leverer det til brukerne. Dette verktøyet er designet for å endre størrelsen på bilder automatisk uten å påvirke nettstedets ytelse.
Beste fremgangsmåter for å endre størrelse på bilder i HTML
Selv om vi har diskutert flere tilnærminger for å endre størrelse på bilder i HTML, bør du alltid holde deg til disse beste fremgangsmåtene for optimale resultater:
- Unngå integrert stil: Du kan bli fristet til raskt å style bilder fra HTML-dokumentene dine og gå til neste del. Denne tilnærmingen kan imidlertid påvirke nettsidens lastehastighet negativt. Bruk et eget CSS-stylingark og gjør koden din enkel å lese og vedlikeholde.
- Bruk «bredde» og «høyde»-attributter: Sørg for at du spesifiserer bildenes bredde og høyde. Denne tilnærmingen leder nettleseren til automatisk å tildele bildeplass etter hvert som resten av innholdet lastes inn.
- Bruk de riktige bildeformatene: Bilder kommer i forskjellige formater, for eksempel JPEG, PNG og SVG. For eksempel er PNG et perfekt format for et gjennomsiktig bilde, mens SVG passer til logoer.
- Gjør bildene dine responsive: Det kan hende du aldri vet hva slags enheter de besøkende på nettstedet ditt har for å få tilgang til innholdet ditt. Optimaliser alltid bildene for ulike skjermstørrelser og sørg for enhetlig visning.
- Optimaliser filstørrelsene: Rå bilder av høy kvalitet kan komme i store filer. Imidlertid kan slike bilder ta opp mye plass på serveren din og påvirke sidens lastetider. Du kan redusere størrelsen på slike bilder ved hjelp av ulike verktøy uten å senke kvaliteten.
Konklusjon
Endre størrelsen på bildene dine i HTML forbedrer brukeropplevelsen, gjør nettsiden responsiv og sparer serverplass. Vi har presentert deg flere tilnærminger til å endre størrelse på bilder i HTML.
Selv om de alle er effektive, elsker jeg å bruke CSS-egenskaper i en egen CSS-fil for å endre størrelsen på bildene. Imidlertid kan du noen ganger legge til innebygd CSS hvis applikasjonen din er liten og du har noen få bilder.
Du kan også lese artikkelen vår om CSS-ressurser og få en dypere forståelse av dette stylingspråket.