Vanliga misstag:Är dina bilder rätt för webben?
Vanliga misstag:Är dina bilder rätt för webben?
Det finns några misstag som återkommer när folk producerar webbplatser, applikationer och innehåll för internet. Många CMS-uppladdare och widgetar för att dela på sociala medier har lärt oss att vi bara kan dra och släppa en fil och att internets små feer fixar resten. Förväntningen är att när du laddar upp en bild sköts saker som webboptimerad upplösning och storlek automatiskt. Det kan stämma, men i många fall gör det inte det, och det är viktigt att vi dubbelkollar. Ofta får vi bättre resultat om vi storleksanpassar bilderna korrekt innan vi delar dem. Här delar jag några fallgropar att se upp för, utan att bli alltför tekniskt.
Att publicera bilder som är för stora
En bild som är onödigt stor gör din webbplats betydligt långsammare. Lägg till några stora bilder och sidan tar för lång tid att ladda – besökare tröttnar på att vänta och går vidare till något annat. Det påverkar även din ranking, eftersom Google nedprioriterar långsamma sidor, särskilt på mobil.
Säg att du har en bild du ska publicera på sajten – den kan komma från din kamera, en bildbyrå, en fotograf, eller ha skickats till dig av en chef eller kund. Det spelar ingen roll varifrån den kommer eller vad källan säger, kontrollera alltid storleken. Din filstorlek bör mätas i KB (kilobyte) och inte i MB (megabyte), och helst vara under 100 KB. Bildens bredd bör inte vara bredare än det maximala utrymme den ska visas i.
På en Mac kan du kontrollera filstorleken i Finder: under "Arkiv" och sedan "Visa information" när filen är markerad.
Information om bildmått finns tillgänglig i förhandsvisningen av en fil i ett Finder-fönster.
Om du kontrollerar en bild som redan är publicerad på en sajt kan du inspektera sidan genom att högerklicka på bilden och välja "Inspect". För Safari måste webbinspektören slås på. Detta fungerar även om du drar och släpper en bild i din webbläsare.
Om bildens naturliga pixelmått är större än visningsytan finns utrymme för optimering genom att storleksanpassa bildens bredd. Om bilden har laddats upp som ett högupplöst foto blir de naturliga måtten mycket större, och bilden bör ersättas med en version på 72 pixlar per tum (för enkelhetens skull lämnar vi retina-stöd till en annan gång).
Observera att Studio Elsa använder source-taggen för att leverera olika bilder responsivt. Vi kan gå djupare in på det i ett framtida inlägg, men här är en referens för hur responsiv bildleverans fungerar.
Behöver du hjälp med innehåll och struktur?
Om du finslipar innehåll för tydlighet och genomslag kan vi hjälpa dig göra det lättare att läsa och lättare att använda.
Starta något