En praktisk billedarbejdsgang til små virksomheders hjemmesider

Skriv, hvad hvert billede skal hjælpe gæsten med at forstå eller vælge. Et feriehus kan vise den faktiske havudsigt, et tømrerfirma kan dokumentere finishen, og en rådgiver kan placere et roligt portræt ved formularen til en tilbudsforespørgsel. “Gør siden pæn” er ikke et præcist formål.

Lav en kort liste med side, motiv, formål, retning, ansvarlig og kilde. Gem den urørte original i en særskilt mappe, og udgiv kun klargjorte kopier. Så undgår I kvalitetstab fra gentagne redigeringer og kan lave en ny beskæring, når designet ændres.

Vælg billedet til den plads, det skal bruge. Et bredt topbillede, et kvadratisk medarbejderportræt og et detaljeret produktfoto kræver forskellige udsnit. Fjern tomme områder, men behold indgangen, ansigtet, materialet eller den detalje, som hjælper kunden med at vurdere tilbuddet.

Se beskæringen på både en smal telefon og en bærbar computer. Et bredt billede af en restaurant kan blive til en uinteressant stribe på mobilen. Et ekstra mobiludsnit med retten og bordet tættere på centrum kan derfor være bedre. Motivet er det samme, men kompositionen passer til pladsen.

Behold kildefilen, og eksportér en kopi tæt på den største størrelse, billedet reelt vises i. Upload ikke et fuldt kamerafoto til et lille kort. JPEG, WebP og AVIF kan egne sig til fotos; PNG er nyttigt ved gennemsigtighed og skarpe grafiske kanter, mens SVG passer til logoer og enkel vektorgrafik. Intet format er bedst til alt.

Bedøm komprimeringen på ansigter, bogstaver, produktkanter, farveovergange og mørke felter. Gør filen mærkbart mindre uden synlige skader i den viste størrelse. Google Søgning understøtter blandt andet JPEG, PNG, WebP, SVG og AVIF og anbefaler, at filendelsen svarer til den faktiske filtype.

En stor fil bliver ikke mindre at hente, blot fordi den vises smalt på telefonen. En responsiv hjemmeside kan tilbyde flere bredder med srcset og sizes, så browseren vælger ud fra skærm og layout. Med picture kan man også tilbyde en anden beskæring eller et moderne format med reserve.

Hjemmesidens system eller udvikler håndterer normalt denne del. Spørg, om uploads automatisk får nye størrelser, hvilke bredder der laves, og om en skabelon ved en fejl sender originalen. Behold en almindelig src-reserve, fordi Google fortæller, at nogle browsere og søgerobotter er afhængige af den.

Omdøb filen før upload. dobbeltvaerelse-havudsigt-bornholm.webp er mere forståeligt end IMG_4821.webp. Google kalder filnavnet et let signal, mens den nærliggende tekst, billedteksten og alt-teksten giver mere sammenhæng. Navnet skal også hjælpe teamet med at finde filen, ikke være en samling søgeord.

Alt-teksten formidler billedets funktion til en person, som ikke kan se det. W3C anbefaler en kort beskrivelse af den væsentlige information, handlingen når billedet er et link eller en knap og en tom alt-værdi ved ren dekoration. Det samme foto kan derfor kræve forskellig alt-tekst i et galleri og på en side om niveaufri adgang.

Angiv billedets bredde og højde, så browseren kan reservere plads, før filen er hentet. MDN forklarer, at det forhindrer teksten omkring billedet i at hoppe under indlæsningen. Billedet kan stadig være fleksibelt, fordi målene fastlægger dets proportioner.

Billeder længere nede på siden kan ofte bruge lazy loading og vente, til gæsten nærmer sig dem. Brug ikke funktionen rutinemæssigt på det store topbillede. web.dev advarer om, at en forsinkelse tæt på sidens start kan gøre billedet mærkbart senere. Markér heller ikke alle billeder som høj prioritet.

Gennemgå filnavn, alt-tekst, billedtekst, tekst omkring billedet og linkmål i hver sprogversion. Google anbefaler også at oversætte filnavne ved lokalisering. En dansk side kan bruge dobbeltvaerelse-havudsigt.webp og den engelske sea-view-double-room.webp. Hold adresser korte og undgå tegn, som publiceringssystemet ikke håndterer godt.

Placér ikke vigtige priser, åbningstider, instruktioner eller knapper inde i et foto. Tekst i billeder er sværere at oversætte, forstørre, søge efter og opdatere. Hvis en grafik skal have ord, bør hvert sprog få en kontrolleret version, og den centrale information bør gentages som rigtig tekst på siden.

Se den rigtige side, ikke kun mediebiblioteket. Test telefon og computer, zoom ind, blokér midlertidigt billeder og prøv en langsom forbindelse, hvis browseren tilbyder det. Det vigtige motiv skal forblive synligt, siden skal give mening uden billedet, og indholdet må ikke hoppe under indlæsning.

En mindre oplevelsesvirksomhed kan for eksempel bruge samme kajakfoto på seks sprog. Teamet gemmer en original, laver et bredt og et smalt udsnit, eksporterer passende størrelser, skriver naturlig alt-tekst til hvert sprog og tjekker bookingen på mobilen. Processen dokumenteres og genbruges til næste tur.