Site icon Xponent

Så här gör du med bilder i WordPress


Bildhanteringen i WordPress kan upplevas som oerhört enkel och rättfram. Du laddar upp bilder i ditt mediabibliotek, väljer storlek och placering, kanske skriver en bildtext och sedan inget mer. Men tyvärr, det räcker inte; det finns en hel del att tänka på när det gäller bildhanteringen på din webbplats.

Vad gör WordPress?

Först: det är viktigt att förstå vad som händer i WordPress när du laddar upp en bild. Den uppladdade bilden sparas i sin originalstorlek och därefter skapas ett antal mindre kopior av din bild. Dessa kopior görs efter ett eller flera "recept" som bestämmer vilka storlekar som skall göras. Det första receptet hittar du under Inställningar - Media…


Receptet ovan innehåller tre olika storlekar: 150 x 150, 300 x 300 och 1024 x 1024. Av din originalbild görs då tre kopior enligt detta recept.

Här är ett exempel. Den uppladdade bilden är i original 1400 x 900 pixlar, utifrån denna görs alla kopiorna i tur och ordning.

Beskuren och nedskalad till 150 x 150 pixlar
Nedskalad till 300 x 188 pixlar
Nedskalad till 1024 x 640 pixlar

Du har nu fyra olika storlekar att välja på när du skall lägga in bilder i dina inlägg eller sidor. De fyra storlekarna är dels din originalbild, samt de tre kopiorna gjorda enligt receptet, tillsammans fyra olika storlekar som kallas Miniatyr, Medium, Stor och Full storlek.

En viktig detalj att minnas är att WordPress bara kan göra de kopiestorlekar som är mindre än originalbilden. Så i vårt exempel skulle inte storleken Stor kunnat göras om originalbilden var t.ex. 1000 x 600 pixlar stor då den storleken är mindre än 1024 bred.

Tumregeln är därför att alltid ladda upp stora bilder, vi brukar säga att ladda inte upp bilder mindre än 1400 pixlar breda. Det finns givetvis tillfällen då man inte har någon tillräckligt stor bild att använda, då får man använda de storlekar som WordPress kan göra av ditt original.

Fler recept kan finnas…

Det kan till din WordPress sajt också finnas kompletterande recept för olika bildstorlekar som ditt tema behöver för att kunna visa bilder på olika ställen i din design. Dessa recept återfinns i filen "functions.php" som följde med ditt tema. Vårt tema på xponent.se har fem kompletterande bildstorlekar som görs varje gång en bild laddas upp. Den del av funktionsfilen som är vårt recept ser ut så här:

//* Add new image sizes
add_image_size( 'featured-content-lg', 1200, 600, TRUE );
add_image_size( 'featured-content-sm', 600, 400, TRUE );
add_image_size( 'featured-content-th', 600, 600, TRUE );
add_image_size( 'portfolio-thumbnail', 348, 240, TRUE );
add_image_size( 'featured-for-pages', 768, 384, TRUE );

En av dessa storlekar används bland annat på samlingsidan för WordPress-tips. Skulle vi välja en för liten bild till ett av våra WordPress-tips skulle designen på samlingssidan inte se bra ut och därför ser vi alltid till att den bild vi väljer är tillräckligt stor.

Vad kan du göra?

Förutom att komma ihåg att ladda upp tillräckligt stora bilder är det en hel del du kan göra. Alla bilder heter något, kommer de rakt ur din kamera eller telefon heter de kanske DSC7209.jpg. Ett sådant namn säger ingenting och det är här du kan göra något viktigt; att se till att bilden hjälper din sökmotoroptimering.

Sveriges riksdagshus i strålande solsken

Bilden ovan heter till exempel sveriges-riksdagshus-i-stralande-solsken.jpg och det är något en sökmotor begriper. Om den sedan också får en smart bildtext gör du sökmotorerna extra nöjda. Slutligen, ge den en beskrivande Alt text så har du gjort precis allt rätt (Alt texten hjälper de som har begränsad eller ingen syn alls).

Så här ser det ut i mediabiblioteket när du klickat på en bild

Så det du skall göra innan du laddar upp din bild är att se till att den har ett bra namn och begripligt namn, ett namn som även sökmotorer begriper. När du ger bilden namn skall du inte använda Å, Ä eller Ö i namnet, inte använda mellanslag utan ersätta dem med bindestreck.

När du laddat upp den ger du den gärna en bildtext och en Alt text.

Regler för namngivning
  • Använd inte å, ä eller ö i namnet, utan ersätt med a, a och o
    (använd enbart tecken ur det engelska alfabetet)
  • Använd endast gemener
  • Använd inte mellanslag i namnet, utan välj istället ett bindestreck
  • Använd inte skiljetecken utom bindestreck och punkt
    (punkt enbart för filändelser .jpg .png .svg osv.)
  • Tänk på sökbarheten när du väljer namnet

Du kan ha lärt dig att istället för bindestreck använda understreck, det är fel. Understreck (_) uppfattas som inget mellanslag alls. Därför skulle vår bild sveriges-riksdagshus-i-stralande-solsken.jpg uppfattas som "sverigesriksdagshusistralandesolsken" om vi namngav bilden som sveriges_riksdagshus_i_stralande_solsken.jpg. Så därför kom-i-håg, bindestreck istället för mellanslag.

Läs även Bindestreck eller understreck

Sammanfattning
  1. Ladda upp tillräckligt stora bilder
  2. WordPress skapar flera mindre kopior åt dig enligt ett eller flera recept
  3. Ge dina bilder begripliga namn innan du laddar upp dem
  4. Tänk på namngivningsreglerna
CMYK fungerar inte på webben, spara därför alla bilder i RGB

Hur fungerar de inte? Enkelt uttryckt så blir färgåtergivningen allt annat än korrekt och i Internet Explorer så visas de inte alls. Det du behöver göra är att öppna bilderna i PhotoShop eller annat bildprogram och konvertera dem till färgläge RGB. Sedan sparar du om de konverterade bilderna som JPG- eller PNG-filer.

Dessutom så kan du få ett http-fel om du försöker ladda upp en CMYK-bild till WordPress.

Exit mobile version