Att anpassa bilder för webben är viktigt av flera anledningar. Filstorlek, upplösning och filnamn är några av anledningarna till att anpassa bilder för webben.

Jag ska här ge dig några tips på hur du gör en grundläggande anpassning av bilder för webben. Det är som sagt viktigt att anpassa bilder för webben av ett flertal anledningar. Det är exempelvis viktigt för att få ned storleken på bilderna, vilket innebär kortare laddningstid för sidan som helhet. Det är även viktigt att döpa och tagga bilden så relevant som möjligt för ökad synlighet på bland annat Google.

• Se gärna först till att bilden har färgrymden RGB och inte CMYK som är avsett för tryck. Med RGB får du bättre färgåtergivning på skärmen.
• När man öppnar en obehandlad bild direkt från kameran har den en storlek som oftast är onödigt stor för att visas på en datorskärm. Bilden med katten ovan är nedskalad från 4000×2667 pixlar till 630×415 pixlar. Kolumnen här på bloggen är inte så mycket bredare än 630 px, vilket gör det onödigt att ha en större bild som bara är tung att ladda. Ändra alltså bildens dimensioner till något mer lämpligt.
• I Photoshop kan man välja ”Spara för webb”. Om man inte ändrat storleken innan kan man göra det där. Man kan även välja att sänka bildkvaliteten något. Försämringen av upplevelsen är oftast minimal om man bara sänker kvaliteten något, från 100 ned till cirka 70-80. Det gör hur som helst en hel del för att minska filstorleken på bilden. Inne på ”Spara för webb” kan du även välja att bilden ska laddas ner direkt och gradvis bli tydligare genom att kryssa i rutan ”Progressive”. Här kan du också kontrollera att bilden har färgrymden sRGB.
• Ge bilden ett relevant filnamn. Handlar det om en flyttfirma i Göteborg på bilden så döp den till ”flyttfirma-goteborg.jpg” eller liknande. Googles bildsökmotor använder filnamn som en faktor när den letar upp bilder.
• Alt-tagga bilden. Detta för att sökmotorn ska veta vad bilden handlar om och att besökare med kommunikationshjälpmedel eller bildvisning avstängd ska kunna veta vad bilden handlar om. Exempel: <img src="bilden.jpg" alt="Detta är bilden">
• Bädda in bilden i den nya HTML5-taggen <figure> och ge bilden en relevant bildtext med taggen <figcaption>.