Optimaliser bilder i HTML: Få raskere nettside & bedre SEO!

by
Tweet
Share
Share
Pin
0 Shares

Viktigheten av multimedia, som fotografier, infografikk og videoer, kan ikke understrekes nok i utviklingsprosessen. Størrelsen på bildene spiller imidlertid en betydelig rolle for applikasjonens ytelse og brukervennlighet.

HTML (Hypertext Markup Language) er det mest brukte språket for å konstruere og strukturere nettsider. Som utvikler har du muligheten til å inkludere produktbilder, logoer og annen grafikk i HTML-dokumentet ditt for å øke brukeropplevelsen og den visuelle appellen.

For å oppnå optimal ytelse av applikasjonen, er det nødvendig å justere størrelsen og optimalisere bildene. I denne artikkelen vil vi se nærmere på hvorfor det er viktig å endre størrelse på bilder, utforske forskjellige metoder for å gjøre det i HTML, og diskutere de beste praksisene.

Hvorfor er det viktig å endre størrelse på bilder i HTML?

Å endre størrelse på et bilde betyr å skalere det opp eller ned. Vanligvis lagres bilder i ulike formater, og de kan komme fra fotografer, arrangementer, designere, eller de kan lastes ned fra internett.

Det kan være fristende å bruke bilder i deres opprinnelige formater. Dette er imidlertid som oftest ikke å anbefale. Her er noen av grunnene til at det er lurt å justere størrelsen på bilder i HTML-dokumentet:

  • Sideinnlastingshastighet: Selv om bilder er kjent for å forbedre brukeropplevelsen, kan store bilder ha en negativ innvirkning på innlastingshastigheten. Ved å optimalisere bildene, vil nettsidene dine laste raskere.
  • Gjør nettstedet responsivt: Et typisk nettsted eller en applikasjon mottar besøk fra brukere som bruker ulike enheter. Ved å endre størrelsen på bilder, sikrer man at nettsiden tilpasser seg mobile enheter, datamaskiner og nettbrett.
  • Båndbreddebruk: De fleste webhoteller begrenser båndbredden når de selger hostingpakker. Ved å optimalisere bilder, får du mer plass til annet innhold på nettsiden din.
  • SEO-formål: Sideinnlastingshastigheten er en av de viktigste rangeringsfaktorene for søkemotorer. Ved å endre størrelsen på bildene, forbedrer du innlastingshastigheten, som igjen kan øke SEO-en din.
  • Maksimer lagringsplass: Størrelsen på lagringsplassen er viktig å vurdere når man velger webhotell. Opplasting av store, høyoppløselige bilder kan ta mye plass på serverne.
  • Forbedre brukeropplevelsen: Brukere ønsker ikke å vente lenge på at bilder skal laste inn. Optimaliser bildene slik at de vises samtidig som resten av innholdet.

Dette er de forskjellige måtene å endre størrelsen på bilder i HTML.

Bruke HTML-attributter

La oss lage en enkel applikasjon for å demonstrere hvordan man endrer størrelsen på bilder. Vi vil bruke bilder fra
Pixabay i applikasjonen vår. Vi skal bruke dette
bildet. Du kan laste det ned og flytte det til prosjektet ditt for enkel demonstrasjon.

Her er HTML-koden:

<!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="Din nettstedbeskrivelse">
    <meta name="keywords" content="dine, søkeord, her">
    <meta name="author" content="Ditt Navn">
    <title>Endre størrelse på HTML-bilder</title>
</head>
<body>
    <h2>Min Katt</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>

Når vi viser originalbildet uten å endre størrelsen, er det over hele nettsiden, og man kan knapt se det.

Vi kan gi katten vår en høyde på 175 og en bredde på 300.

Vi endrer koden i <img>-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">

Nå ser vi at bildet er synlig og optimalisert.

Bruke CSS-stiler

Vi kan opprette et eget stilark i stedet for den innebygde stylingen vi brukte tidligere. La oss opprette et stilark med navnet styles.css. Vi vil legge til en <link>-tag i <head>-seksjonen av HTML-dokumentet 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="Din nettstedbeskrivelse">
    <meta name="keywords" content="dine, søkeord, her">
    <meta name="author" content="Ditt Navn">
    <title>Endre størrelse på HTML-bilder</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>Min Katt</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>

Vi kan legge til styling til bildet vårt via styles.css-arket. Her er koden: 

img {
    width:300px;
    height:200px
}

Det gjengitte bildet vil se slik ut:

Vi har brukt <img>-velgeren for å finne bildet vårt i HTML-dokumentet. Vi har gitt bildet en bredde på 300px og en høyde på 200px.

Bruke prosent

I det forrige eksemplet brukte vi piksler (px) for å endre størrelsen på bildet vårt. Vi kan også bruke prosenter for å optimalisere bildet. For eksempel kan vi sette bredden og høyden på bildet til 65 %.

Vi vil bruke vår tidligere HTML-kode. Men slett innholdet i styles.css-filen og legg til denne koden: 

img {
    width:65%;
    height:65%
}

Når du gjengir bildet, vil det se slik ut:

Endre størrelse på bilder for responsiv design

Et godt bilde bør reagere på ulike skjermstørrelser. Du kan optimalisere bildet slik at det tilpasser seg forskjellige skjermstørrelser. Ved å bruke den samme HTML-koden, kan vi legge til følgende i styles.css-filen: 

img {
    max-width: 100%;
    height: auto;
}

`max-width: 100%` sørger for at bildet aldri overskrider bredden på beholderen. Dermed vil bildet alltid skalere ned proporsjonalt på mindre skjermer.

`height: auto`-egenskapen sørger for at bildet opprettholder sideforholdet når det skaleres opp og ned.

Etter sideforhold

I web- og appdesign er sideforholdet det proporsjonale forholdet mellom høyde og bredde. Ved å opprettholde sideforholdet mens du endrer størrelse på bildene, sikrer du at de opprettholder visuell konsistens; bildene er ikke forvrengt og tilpasser seg ulike skjermstørrelser.

Vi vil bruke samme HTML-kode for å demonstrere hvordan vi opprettholder sideforholdet mens vi endrer størrelsen på bildene.

Legg til denne koden i styles.css-filen: 

img {
    width: 300px;
    height: auto;
}

Vi har brukt «img»-velgeren for å finne bildet vårt i HTML-dokumentet. Vi har satt bredden til 300px. `height: auto` lar ulike nettlesere automatisk beregne høyden på bildet, samtidig som sideforholdet opprettholdes. Dette sikrer at bildene ikke strekkes ut når de gjengis på ulike skjermstørrelser.

Endre størrelse på bakgrunnsbilder

Du kan legge til bilder på elementer for å fungere som bakgrunnsbilder. Å endre størrelsen på et bakgrunnsbilde sikrer at det får plass i beholderen. Her 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="Din nettstedbeskrivelse">
    <meta name="keywords" content="dine, søkeord, her">
    <meta name="author" content="Ditt Navn">
    <title>Endre størrelse på HTML-bilder</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>Dette er vårt kattebilde</p>
        </div>
    </div>
</body>
</html>

Vi kan nå legge til et bakgrunnsbilde gjennom styles.css-arket. 

.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;
}

Bakgrunnsbilder kan kun legges til med CSS. Vi har opprettet en beholder med sentrert tekst og et bakgrunnsbilde av en katt.

Du kan bruke forskjellige verktøy for å endre størrelsen og optimalisere bildene dine. Noen av disse verktøyene tilbyr bare en funksjon for å endre størrelsen. Noen vil også la deg lagre bilder og vise dem til HTML-filen din ved hjelp av en URL.

Cloudinary er et godt eksempel på et verktøy som endrer størrelsen på bildet på serveren før det leveres til brukerne. Verktøyet er designet for å endre størrelsen på bilder automatisk uten å påvirke nettstedets ytelse.

Beste praksis for å endre størrelse på bilder i HTML

Selv om vi har diskutert flere metoder for å endre størrelsen på bilder i HTML, bør du alltid følge disse beste praksisene for å oppnå optimale resultater:

  • Unngå integrert stil: Det kan være fristende å raskt style bilder fra HTML-dokumentene dine. Denne tilnærmingen kan imidlertid påvirke nettsidens innlastingshastighet negativt. Bruk et eget CSS-stilark for å gjøre koden din enkel å lese og vedlikeholde.
  • Bruk «bredde» og «høyde»-attributter: Sørg for å spesifisere bildenes bredde og høyde. Dette hjelper nettleseren å automatisk tildele plass til bildet mens resten av innholdet lastes inn.
  • Bruk de riktige bildeformatene: Bilder kommer i forskjellige formater, som JPEG, PNG og SVG. PNG er et ideelt format for gjennomsiktige bilder, mens SVG passer godt til logoer.
  • Gjør bildene dine responsive: Du vet aldri hvilke enheter de besøkende på nettstedet ditt bruker for å få tilgang til innholdet. Optimaliser bildene for ulike skjermstørrelser og sørg for enhetlig visning.
  • Optimaliser filstørrelsene: Råbilder av høy kvalitet kan ha store filstørrelser. Slike bilder kan ta mye plass på serveren din og påvirke sideinnlastingstidene. Du kan redusere størrelsen på disse bildene ved hjelp av ulike verktøy uten at det går ut over kvaliteten.

Konklusjon

Å endre størrelsen på bilder i HTML forbedrer brukeropplevelsen, gjør nettsiden responsiv og sparer serverplass. Vi har presentert flere metoder for å endre størrelsen på bilder i HTML.

Selv om alle metodene er effektive, foretrekker vi å 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 vår artikkel om CSS-ressurser for å få en dypere forståelse av dette stylingspråket.