Ett praktiskt bildflöde för småföretagets webbplats

Skriv vad varje bild ska hjälpa besökaren att förstå eller göra. Ett pensionat behöver kanske visa utsikten från ett visst rum, ett byggföretag behöver visa ett färdigt arbete och en konsult behöver ett trovärdigt porträtt nära formuläret för offertförfrågan. “Göra sidan snygg” ger för lite vägledning.

Skapa en enkel bildlista med sida, motiv, syfte, stående eller liggande format, ansvarig och källa. Spara det orörda originalet separat och publicera bara bearbetade kopior. Då slipper ni upprepade kvalitetsförluster och kan göra en ny beskärning när designen förändras.

Välj bilden utifrån platsen där den ska visas. En bred toppbild, ett kvadratiskt medarbetarporträtt och ett detaljerat produktfoto kräver olika utsnitt. Ta bort tomma ytor, men beskär inte bort entrén, ansiktet, materialet eller den detalj som kunden behöver bedöma.

Kontrollera utsnittet på en smal mobil och en bärbar dator. Ett liggande restaurangfoto kan bli en intetsägande remsa på telefonen. Då kan en extra mobilversion med maten och gästerna närmare mitten vara bättre. Motivet är sant i båda versionerna, men kompositionen anpassas efter utrymmet.

Behåll originalet och exportera en kopia som ligger nära den största faktiska visningsstorleken. Ladda inte upp en fullstor kamerabild för ett litet kort. JPEG, WebP och AVIF passar ofta foton; PNG är praktiskt för transparens och skarpa grafiska kanter, medan SVG lämpar sig för logotyper och enkel vektorgrafik. Inget format är bäst för allt.

Granska komprimeringen i ansikten, bokstäver, produktkanter, toningar och mörka partier. Minska filen tills den är tydligt mindre men fortfarande ser bra ut i avsedd storlek. Google Search stöder bland annat JPEG, PNG, WebP, SVG och AVIF och rekommenderar att filändelsen motsvarar det verkliga formatet.

Att visa en stor bild i liten storlek betyder inte att telefonen laddar ner en liten fil. En responsiv webbplats kan erbjuda flera bredder med srcset och sizes, så att webbläsaren väljer efter skärm och layout. Med picture kan utvecklaren även erbjuda en alternativ beskärning eller ett modernt format med reserv.

Webbplattformen eller utvecklaren sköter vanligtvis detta. Fråga om uppladdade bilder storleksanpassas automatiskt, vilka bredder som skapas och om någon mall råkar leverera originalet. Behåll ett vanligt src-värde som reserv, eftersom Google påpekar att vissa webbläsare och sökrobotar använder det.

Byt filnamn före uppladdning. havsutsikt-dubbelrum-gotland.webp säger mer än IMG_4821.webp. Google beskriver filnamnet som en lätt ledtråd; texten nära bilden, bildtexten och alt-texten ger mer sammanhang. Ett tydligt namn hjälper dessutom teamet att hitta rätt utan att fyllas med sökord.

Alt-texten förmedlar bildens funktion till den som inte ser den. W3C rekommenderar en kort beskrivning av den viktiga informationen, en beskrivning av handlingen när bilden är en länk eller knapp och ett tomt alt-värde för ren dekoration. Samma foto kan därför behöva annan alt-text i ett galleri än på en sida om tillgänglig entré.

Ange bildens bredd och höjd så att webbläsaren reserverar plats innan filen är hämtad. MDN förklarar att detta hindrar texten runt bilden från att hoppa vid inläsning. Bilden kan ändå vara flexibel, eftersom måtten talar om vilket proportionerligt utrymme som behövs.

Bilder längre ned på sidan kan ofta använda lazy loading och vänta tills besökaren närmar sig dem. Använd inte detta slentrianmässigt på den stora toppbilden. web.dev varnar för att fördröjning av en bild nära sidans början kan göra den märkbart sen. Prioritera inte heller alla bilder samtidigt.

Kontrollera filnamn, alt-text, bildtext, omgivande text och länkmål i varje språkversion. Google rekommenderar att filnamn översätts när bilden lokaliseras. En svensk sida kan använda dubbelrum-havsutsikt.webp och den engelska sea-view-double-room.webp. Håll webbadresser korta och undvik tecken som publiceringssystemet hanterar dåligt.

Lägg inte viktiga priser, öppettider, instruktioner eller knappar inne i fotot. Bildtext är svårare att översätta, förstora, hitta och uppdatera. Om en grafik måste innehålla ord bör varje språk få en kontrollerad version och den centrala informationen även finnas som riktig sidtext.

Förhandsgranska den riktiga sidan, inte bara mediabiblioteket. Testa mobil och dator, zooma, blockera bilder tillfälligt och prova långsam anslutning om webbläsaren kan simulera den. Huvudmotivet ska synas, sidan ska gå att förstå utan bilden och innehållet ska inte hoppa när den laddas.

Ett aktivitetsföretag kan exempelvis använda samma kajakfoto på sex språk. Teamet sparar ett original, gör ett brett och ett smalt utsnitt, exporterar lämpliga storlekar, skriver naturlig alt-text för varje språk och kontrollerar bokningen på telefon. Rutinen dokumenteras och återanvänds för nästa tur.