Bilder og Multimedia i HTML

Lær hvordan du legger til og optimaliserer bilder, video og lyd på nettsiden din.

HTML Bilder

Bilder er en viktig del av moderne nettsider. HTML tilbyr flere måter å vise og optimalisere bilder på:

Grunnleggende Bildebruk

For å legge til et bilde bruker vi <img> taggen med følgende viktige attributter:

src - Bildets kilde/filbane (påkrevd)
alt - Alternativ tekst som beskriver bildet (påkrevd for universell utforming)
width - Bildets bredde i piksler
height - Bildets høyde i piksler

Eksempel på grunnleggende bilde:

<img src="bilde.jpg" alt="En beskrivelse av bildet" width="400" height="300">

Det er viktig å alltid inkludere alt attributtet:

Gjør siden tilgjengelig for skjermlesere
Vises hvis bildet ikke kan lastes
Forbedrer SEO (søkemotoroptimalisering)

Responsive Bilder

For å gjøre bilder responsive og tilpasse dem ulike skjermstørrelser, kan vi bruke:

Metode 1: CSS max-width

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

Metode 2: srcset attributtet

Med srcset kan vi spesifisere ulike bildeversioner for forskjellige skjermstørrelser:

<img srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
     sizes="(max-width: 320px) 280px,
            (max-width: 640px) 580px,
            800px"
     src="fallback.jpg" 
     alt="Responsivt bilde eksempel">

Video i HTML

HTML5 introduserte <video> elementet for å spille av video direkte i nettleseren:

Eksempel på video:

<video width="100%" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Din nettleser støtter ikke video-elementet.
</video>

Viktige video-attributter:

controls - Viser avspillingskontroller
autoplay - Starter videoen automatisk
loop - Spiller videoen på nytt når den er ferdig
muted - Starter videoen uten lyd
poster - Viser et bilde før videoen starter

Innebygde Videoer

For videoer fra plattformer som YouTube eller Vimeo, bruker vi <iframe>:

Eksempel på innebygd YouTube-video:

<div class="video-container">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen>
    </iframe>
</div>

Tips for innebygde videoer:

Bruk en container for å bevare aspektforholdet
Gjør videoen responsiv med CSS
Vurder personvern og ytelse ved bruk av innebygde videoer

Lyd i HTML

HTML5 støtter også direkte avspilling av lydfiler med <audio> elementet:

Eksempel på lydavspiller:

<audio controls>
    <source src="lyd.mp3" type="audio/mpeg">
    <source src="lyd.ogg" type="audio/ogg">
    Din nettleser støtter ikke audio-elementet.
</audio>

Audio-elementet støtter mange av de samme attributtene som video:

controls - Viser avspillingskontroller
autoplay - Starter lyden automatisk
loop - Spiller lyden på nytt
muted - Starter uten lyd

HTML Innhold

1. Grunnleggende HTML 2. Semantiske Elementer 3. Skjemaer 4. Tabeller og Lister 5. Bilder og Multimedia 6. Lenker 7. Metadata

Frontend

Backend

Verktøy og Rammeverk

Sikkerhet

Webutvikling