En praktisk bildearbeidsflyt for småbedriftens nettsted

Skriv ned hva hvert bilde skal hjelpe den besøkende med å forstå eller gjøre. En hytteutleier kan vise den faktiske utsikten, et verksted kan dokumentere utført arbeid, og en rådgiver kan plassere et tillitvekkende portrett ved skjemaet for tilbudsforespørsel. “Pynte siden” er et for uklart mål.

Lag en kort bildeliste med side, motiv, formål, stående eller liggende retning, ansvarlig og kilde. Behold den urørte originalen i en egen mappe, og publiser bare klargjorte kopier. Da unngår dere gjentatt kvalitetstap og kan lage et nytt utsnitt når designet endres.

Velg bildet ut fra plassen der det skal stå. Et bredt toppbilde, et kvadratisk medarbeiderportrett og et detaljert produktfoto krever ulike utsnitt. Fjern tomme områder, men ikke skjær bort inngangen, ansiktet, materialet eller detaljen kunden trenger for å vurdere tilbudet.

Kontroller utsnittet på en smal mobil og en bærbar PC. Et liggende restaurantbilde kan bli en intetsigende stripe på telefonen. Da kan en ekstra mobilvariant med retten og bordet nærmere midten fungere bedre. Motivet forblir ærlig, men komposisjonen tilpasses plassen.

Behold kildefilen, og eksporter en kopi nær den største størrelsen bildet faktisk skal vises i. Ikke last opp et fullt kamerabilde til et lite kort. JPEG, WebP og AVIF kan passe til fotografier; PNG er nyttig ved gjennomsiktighet og skarpe grafiske kanter, mens SVG passer til logoer og enkel vektorgrafikk. Ingen formater er best til alt.

Vurder komprimeringen på ansikter, bokstaver, produktkanter, fargeoverganger og mørke partier. Gjør filen tydelig mindre uten synlige skader i riktig visningsstørrelse. Google Søk støtter blant annet JPEG, PNG, WebP, SVG og AVIF og anbefaler at filendelsen samsvarer med den faktiske filtypen.

En stor fil blir ikke mindre å laste ned selv om den vises smalt på telefonen. Et responsivt nettsted kan tilby flere bredder med srcset og sizes, slik at nettleseren velger etter skjerm og oppsett. Med picture kan utvikleren også tilby et annet utsnitt eller et moderne format med reserve.

Nettstedets system eller utvikler håndterer vanligvis denne delen. Spør om opplastede bilder får automatiske størrelser, hvilke bredder som opprettes, og om en sidemal ved en feil leverer originalen. Behold en vanlig src-verdi som reserve, fordi Google påpeker at noen nettlesere og søkeroboter bruker den.

Endre filnavnet før opplasting. dobbeltrom-havutsikt-lofoten.webp sier mer enn IMG_4821.webp. Google omtaler filnavnet som et lett signal, mens teksten rundt bildet, bildeteksten og den alternative teksten gir mer sammenheng. Navnet skal også gjøre mediebiblioteket ryddig, ikke fylles med søkeord.

Alternativ tekst, ofte kalt alt-tekst, formidler bildets funksjon til den som ikke ser det. W3C anbefaler en kort beskrivelse av den viktige informasjonen, handlingen når bildet brukes som lenke eller knapp, og en tom alt-verdi for ren dekorasjon. Det samme fotoet kan derfor trenge annen tekst i et galleri enn på en side om trinnfri inngang.

Oppgi bildets bredde og høyde slik at nettleseren kan reservere plass før filen er lastet. MDN forklarer at dette hindrer teksten rundt bildet i å hoppe under innlasting. Bildet kan fortsatt tilpasse seg, fordi målene forteller nettleseren hvilket sideforhold det har.

Bilder lenger ned på siden kan ofte bruke utsatt lasting og vente til den besøkende nærmer seg dem. Ikke bruk dette automatisk på det store toppbildet. web.dev advarer om at utsettelse av et bilde nær toppen kan gjøre det merkbart forsinket. Ikke marker alle bilder som høy prioritet heller.

Gå gjennom filnavn, alternativ tekst, bildetekst, teksten rundt og lenkemålet i hver språkversjon. Google anbefaler også å oversette filnavn når bilder lokaliseres. En norsk side kan bruke dobbeltrom-havutsikt.webp, mens den engelske bruker sea-view-double-room.webp. Hold nettadressene korte og unngå tegn publiseringssystemet håndterer dårlig.

Ikke plasser viktige priser, åpningstider, instruksjoner eller knapper inne i et foto. Tekst i bilder er vanskeligere å oversette, forstørre, finne og oppdatere. Hvis en grafikk må inneholde ord, bør hvert språk få en kontrollert variant, og hovedinformasjonen bør gjentas som vanlig tekst på siden.

Forhåndsvis den faktiske siden, ikke bare mediebiblioteket. Test mobil og datamaskin, zoom inn, blokker bilder midlertidig og prøv en treg forbindelse hvis nettleseren tilbyr det. Hovedmotivet skal være synlig, siden skal gi mening uten bildet, og innholdet skal ikke hoppe mens filen lastes.

Et lite opplevelsesselskap kan for eksempel bruke samme kajakkbilde på seks språk. Teamet lagrer én original, lager et bredt og et smalt utsnitt, eksporterer passende størrelser, skriver naturlig alt-tekst på hvert språk og sjekker bestillingen på mobilen. Rutinen dokumenteres og brukes på neste tur.