Skapa bilder för WordPress

Vi har skapat en guide för hur du arbetar med bilder för WordPress.

Varför är det viktigt med optimerade bilder för WordPress?

• För att webbplatsen ska ladda snabbt.
• För att sökmotoroptimeringen ska bli optimal.
• För att det ska vara enkelt och tydligt att arbeta med sidor för dig som administratör.

1. Justera bildens pixelstorlek

För att bilden ska ladda snabbt i webbläsaren så bör den vara så liten som möjligt, både vad gäller bredd och höjd i pixlar men även storleken i kilobyte eller megabyte.

Börja med att öppna bilden i Photoshop och beskär den så som du vill ha den. Gå sedan in under ”Bild –> Bildstorlek” (Image –> Image Size på engelska) och justera bredden så att bilden får exakt den storlek som du vill ha bilden i på din webbplats. Om du inte har tillgång till Adobe Photoshop går det lika bra att göra dessa steg i Pixlr som är som Photoshop direkt i webbläsaren.

Exempel på bra bildstorlekar

• Utvald bild i ett inlägg: 1080×1080 px
• Produktbild på en produkt i Woo: 1080×1080 px
• Stor fullbreddsbild på startsidan tex. i en slider: 1992×1328 px
• Stor liggande bild i ett inlägg eller på en vanlig sida: 1600×1200 px

När storleksändringen är klart är det dags att spara ut en ny version av bilden.

2. Justera bildens kilobyte-storlek

Målet är att bildens storlek ska vara mindre är 300 kb, dvs. 0,3 Mb, men gärna under 200 kb. Detta gör du i två steg. Det första steget gör du i Photoshop.

Välj ”Fil –> Exportera –> Exportera som…” (File –> Export –> Export As… på engelska). I rutan Format till höger väljer du JPG om det är ett foto och PNG som det är en illustration eller screen shot. I rutan Kvalitet/Quality sätter du ett värde mellan 40-70% så att bildens storlek blir den du vill ha. Storleken ser du till vänster.

I detta fall satte vi Kvalitet till 70%, då ändrades storleken från 640 kb ner till 209 kb.

Klicka sedan på den blå knappen (i nedre högra hörnet) ”Exportera” (Export på engelska).

3. Välja ett bra filnamn på bilden

När du klickar på knappen Exportera får du upp en ruta där du skriver in filnamnet på bilden. Här ska du tänka på vad dina besökare googlar på så att bilden blir sökmotoroptimerad. Om du tex. jobbar med en produktbild så kan filnamnet blir så här ”varumarke-produktkategori-produktnamn-farg.jpg” och i en tillämpning då kunna bli ”nike-loparsko-pegasus-vit-gron.jpg”. Det som är viktigt här är även som du ser att å och ä byts mot a, ö byts mot o och mellanslag byts mot bindestreck, detta för att det då funkar 100 % i alla olika webbläsare.

4. Komprimera bilden ytterligare

För att bilden ska blir redo att ladda upp så komprimerar du den ytterligare med hjälp av gratisverktyget TinyPNG. Gå till tinypng.com och dra/släpp bilden in på sidan och den komprimeras automatiskt.

Som du ser så komprimerades bilden ytterligare 79% och gick från 520 kb till 108 kb i detta fall.

5. Ladda upp bilden i WordPress

Nu är du redo att ladda upp bilden i WordPress, gå in i mediaarkivet och dra in bilden som du laddat ner från TinyPNG. Dubbelkolla så att -1 eller -2 inte lagts till i filnamnet innan du laddar upp den.

När du laddat upp bilden så klicka på den för att få upp inställningarna. Här justerar du rubrik och Alt-text så att dessa blir i klartext dvs skapa-bilder-for-wordpress ändrar du till Skapa bilder för WordPress. Detta gör du för att ytterligare förbättra sökmotoroptimeringen och även förbättra tillgängligheten.

Nu är bilden redo att användas!