Den här artikeln går igenom det du behöver veta om hur du förbereder bilder för webben. Den listar de rekommenderade bildstorlekarna för Sitebuilder och visar hur du sparar bilder korrekt för att de ska vara optimerade.
Bildstorlek och format
Den maximala bildstorleken du kan använda i Sitebuilder är 5 MB. För att ladda upp större bilder kan du behöva uppgradera.
Följande filformat accepteras: .jpg, .jpeg, .png och .gif. Läs mer om bildformat i artikeln Välj bildformat.
Bilder i innehållet
Rekommenderad bredd för bilder i Artikel- och Textblocken är 1200 px.
Obs! Utrymmet runt bilden kan variera beroende på skärmstorlek.
Bilder i fullbredd
I vissa block kan du ersätta blockets bakgrund och lägga till bilder som täcker hela skärmens bredd. Rekommenderad bredd för bilder i fullbredd är minst 1920 px, så att de ser bra ut på alla enheter.
Fördefinierade beskärningsrutnät
När du laddar upp en bild kan du vilja ändra placering, fokuspunkt eller rutnät runt den. Funktionerna för beskärning och fokuspunkt hjälper dig att placera bilden snyggt i blocket utan att förstöra designen. Läs mer i artikeln Anpassa dina bilder.
Obs! Se till att bildernas upplösning är tillräckligt hög så att de inte blir suddiga när du zoomar in.
Bildstorlekar för din webbplats
De rekommenderade storlekarna kanske inte alltid passar dina behov. Sitebuilder anpassar dock automatiskt bildernas storlek efter blockets design så att webbplatsen får ett professionellt utseende.
Bilder för Retina-skärmar
För Retina-enheter behöver du dubbla bildens pixeldensitet. Det betyder att du behöver bilder dubbelt så stora för Retina-enheter för att de ska bli skarpa. Om bildens utrymme är 750×500 px ska bilden du laddar upp vara 1500×1000 px för Retina. På icke-Retina-enheter visas bilden i sin vanliga storlek.
Bildernas filstorlek
Att ladda upp tunga och oanpassade bilder gör att sidan blir långsam och försämrar användarupplevelsen. Tänk på vilket filformat du använder (JPG, PNG eller GIF) och spara bilderna i rätt färgformat, vilket är sRGB för webben.
När du exporterar för webben i ett externt redigeringsverktyg som Adobe Photoshop, välj en exportkvalitet på 65-75 procent. Det ger en bra balans mellan kvalitet och filstorlek.
Du kan använda externa verktyg för att minska filstorleken, exempelvis JPEG Mini eller TinyPNG.
Namnge dina bildfiler
Se till att bildfilernas namn är beskrivande. Använd endast latinska bokstäver, siffror, understreck och bindestreck. Undvik frågetecken, mellanslag och procenttecken eftersom de skapar SEO-ovänliga filnamn.
Bästa praxis vid bilduppladdning
- Stora, oanpassade bilder skapar inte bara problem för användarupplevelsen utan leder också till långsamma laddningstider, högre avvisningsfrekvens och sämre placeringar i sökmotorer. Du kan testa webbplatsens hastighet med GTmetrix.
- För horisontella bilder, försök att ta bredare bilder än vanligt för att undvika att viktigt innehåll beskärs.
- Om du förbereder bilder för Galleriblocket, se till att de har samma höjd, oavsett om de är horisontella eller vertikala.
