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

Ta valfri bild på din WordPress- eller Joomla-blogg. Om du betygsätter kvalitet är oddsen 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 och bra, men fall som denna kommer till ett rejält pris.

För att få plats med så många olika skärmar som möjligt med en enda bild måste du använda en stor. Det leder i sin tur till 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 stationär dator, surfplatta eller mobil.

Servera skalade bilder på WordPress och Joomla med CSS

Hur mycket utrymme tar bilder på webbsidor? Det finns inga hårda och snabba regler, men med tanke på deras betydelse och överallt är svaret definitivt mycket. Om du visar bilder som du ändå kommer att skala om är det bara meningsfullt att vara ekonomisk och betjäna dina WordPress- eller Joomla-användare med bilder som redan är nedskalade för att påskynda laddningstiderna för din webbplats.

CSS är till för att hjälpa till med en uppsättning relativt okända, men ovärderliga attribut: srcset , storlekar 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å storleken på visningsporten.

Den srcset kompletterar den vanliga src flik. Som attributnamnet antyder, istället för att ange en enskild bild, använder du den för att ange en lista med skalade bilder och bredden när de ska användas. Används tillsammans med det är attributet storlekar , som du kan definiera när bilder ska visas baserat på visningsportens bredd.

Du kan läsa mer om dessa attribut här , men den goda nyheten är att WordPress de senaste åren omskalar automatiskt dina bilder och serverar lämpliga storlekar för din läsekrets. Resultatet är häpnadsväckande: en porträttbild med 511Kb reduceras till 42Kb på mobila enheter.

Automatisk omskalning och optimering med ImageRecycle

När det gäller bildstorlekar, desto mindre desto bättre, så länge kvaliteten inte äventyras. Ä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 ändra skalning och komprimera bilder.

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

Omskalning är särskilt användbart om du befinner dig att använda stockbilder i din WordPress- eller Joomla-blogg. Dessa bilder är ofta oproportionerligt stora för att ta hänsyn till all användning, inklusive tryckta medier. På webben är det mycket osannolikt att du någonsin skulle behöva använda hela deras upplösning. Med ImageRecyclekan du automatiskt ändra storlek på stora bilder till maximal höjd eller bredd när de laddas upp.

Komplettering av skalning är komprimering, vilket optimerar bildstorleken utan att offra kvaliteten. Med förlust av komprimering kan du begränsa bildutrymmet med upp till 80%. Detta gäller inte bara originalbilderna utan även de bilder som omskalats av WordPress. Återigen kan ImageRecycle göra detta automatiskt åt dig.

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