Servera korrekt skalade bilder på din WordPress eller Joomla webbplats

Ta vilken bild som helst på din WordPress- eller Joomla-blogg. Om du betygsätter kvalitet är oddsen att bilden är tillräckligt stor för att den ska skalas ned för att passa på dina läsares skrivbordsenheter, än mindre på mobila enheter. Kvaliteten är bra och bra, men fall som den här kommer till ett rejäl pris.

För att rymma så många olika skärmar som möjligt med en enda bild måste du använda en stor bild. I sin tur översätter det till stora filer som måste laddas ner i sin helhet även på små enheter. Det finns en lösning: att betjäna bilder skalade beroende på displayenhet, vare sig skrivbord, surfplatta eller mobil.

Serverar 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 allestädes närhet är svaret definitivt mycket. Om du betjänar bilder som du ändå kommer att räkna om ändå, är det bara vettigt att vara ekonomisk och betjäna dina WordPress- eller Joomla-användare med bilder som redan har skalats ner 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 specificera 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 ImageRecycle kan 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 ImageRecycle omskalning och optimering kan du ha högkvalitativa bilder som anpassar sig till dina läsares enheter.