Visa korrekt skalade bilder på din WordPress- eller Joomla-webbplats

Ta vilken bild som helst på din WordPress- eller Joomla-blogg. Om du värderar kvalitet är chansen stor att bilden är tillräckligt stor för att den måste skalas ner för att passa på dina läsares stationära enheter, än mindre på mobila enheter. Kvalitet är väl bra, men fall som det här har ett rejält pris.

För att kunna visa så många olika skärmar som möjligt med en enda bild måste man använda en stor bild. Det innebär i sin tur stora filer som måste laddas ner i sin helhet även på små enheter. Det finns en lösning: att visa bilder skalade beroende på visningsenheten, oavsett om det är dator, surfplatta eller mobil.

Visa skalade bilder på WordPress och Joomla med CSS

Hur mycket plats tar bilder upp på webbsidor? Det finns inga hårda regler, men med tanke på deras betydelse och allestädesnärvaro är svaret definitivt mycket. Om du visar bilder som du ändå kommer att behöva skala om, är det bara klokt att vara ekonomisk och visa dina WordPress- eller Joomla-användare bilder som redan är nedskalade för att snabba upp din webbplats laddningstider.

CSS finns där för att hjälpa till med en uppsättning relativt okända, men ovärderliga attribut: srcset , sizes och media . Dessa attribut – som alla stöds av de flesta moderna webbläsare – låter dig ange vilka bildversioner som ska visas beroende på visningsportens storlek.

srcset kompletterar den vanliga src- . Som attributnamnet antyder, istället för att ange en enda bild, använder du den för att ange en lista med skalade bilder och bredden när varje bild ska användas. Tillsammans med den används sizes , med vilket du kan definiera när bilder ska visas baserat på visningsbredden.

Du kan läsa mer om dessa attribut här , men den goda nyheten är att WordPress under de senaste åren automatiskt skalar om dina bilder och visar dina läsare i lämpliga storlekar. Resultatet är häpnadsväckande: en porträttbild med 511 kb reduceras till 42 kb på mobila enheter.

Automatisk omskalning och optimering med ImageRecycle

När det gäller bildstorlekar, ju mindre desto bättre, så länge kvaliteten inte komprometteras. Även om WordPress hjälper dig genom att använda srcset , finns det mer du kan göra för att minimera bildstorlekar, särskilt genom att skala om och komprimera bilder.

ImageRecycle är ett plugin som kan skala om och komprimera bilder åt dig samtidigt, och är tillgängligt på både WordPress och Joomla. Bäst av allt är att du kan använda ImageRecycle för att skala om och komprimera bilder automatiskt.

Att skala om bilder är särskilt användbart om du använder stockbilder i din WordPress- eller Joomla-blogg. Dessa bilder är ofta oproportionerligt stora för att täcka all användning, inklusive tryckta medier. På webben är det högst osannolikt att du någonsin skulle behöva använda hela deras upplösning. Med ImageRecyclekan du automatiskt skala ner stora bilder till en maximal höjd eller bredd vid uppladdning.

Som ett komplement till omskalning finns komprimering, vilket optimerar bildstorleken utan att offra kvaliteten. Med förlustbringande komprimering kan du minska bildutrymmet med upp till 80 %. Detta gäller inte bara originalbilderna, utan även bilder som har omskalats av WordPress. Återigen kan ImageRecycle göra detta automatiskt åt dig.

Det du ser som några extra kilobyte kan innebära värdefull förlorad tid för dina läsare. Den goda nyheten är att du inte behöver offra kvalitet för laddningstider. Med smartare användning av CSS och ImageRecycleomskalning och optimering kan du få högkvalitativa bilder som anpassar sig till dina läsares enheter.