Zorg voor correct geschaalde afbeeldingen op uw WordPress- of Joomla-website

Neem bijvoorbeeld een willekeurige afbeelding op je WordPress- of Joomla-blog. Als je waarde hecht aan kwaliteit, is de kans groot dat de afbeelding zo groot is dat deze verkleind moet worden om op de desktops van je lezers te passen, laat staan ​​op mobiele apparaten. Kwaliteit is belangrijk, maar dit soort problemen brengt hoge kosten met zich mee.

Om met één afbeelding zoveel mogelijk verschillende schermen te kunnen weergeven, moet je een grote afbeelding gebruiken. Dat betekent echter dat de bestanden groot zijn en zelfs op kleinere apparaten volledig gedownload moeten worden. Er is een oplossing: afbeeldingen schalen afhankelijk van het weergaveapparaat, of dat nu een desktop, tablet of mobiele telefoon is.

Afbeeldingen op schaal weergeven in WordPress en Joomla met CSS

Hoeveel ruimte nemen afbeeldingen in beslag op webpagina's? Er zijn geen vaste regels, maar gezien hun belang en alomtegenwoordigheid is het antwoord ongetwijfeld: veel. Als je afbeeldingen gebruikt die je uiteindelijk toch weer gaat verkleinen, is het logisch om zuinig te zijn en je WordPress- of Joomla-gebruikers afbeeldingen te tonen die al verkleind zijn om de laadtijden van je website te versnellen.

CSS biedt een aantal relatief onbekende, maar onmisbare attributen: ` srcset` , `sizes` en `media` . Met deze attributen – die door de meeste moderne webbrowsers worden ondersteund – kun je specificeren welke afbeeldingsversies moeten worden weergegeven, afhankelijk van de grootte van het scherm.

Het `srcset`- vormt een aanvulling op het gebruikelijke `src`- tabblad. Zoals de naam al aangeeft, gebruik je het niet om één enkele afbeelding te specificeren, maar om een ​​lijst met geschaalde afbeeldingen en de breedte waarop elke afbeelding moet worden weergegeven, op te geven. Het wordt in combinatie hiermee gebruikt met het ` sizes`- attribuut, waarmee je kunt definiëren wanneer afbeeldingen moeten worden weergegeven op basis van de breedte van de viewport.

hier meer lezen over deze eigenschappen , maar het goede nieuws is dat WordPress de afgelopen jaren je afbeeldingen automatisch schaalt en de juiste formaten aan je lezers toont. Het resultaat is verbluffend: een afbeelding in portretformaat van 511 kB wordt op mobiele apparaten teruggebracht tot 42 kB.

Automatische herschaling en optimalisatie met ImageRecycle

Wat betreft afbeeldingsgroottes geldt: hoe kleiner, hoe beter, zolang de kwaliteit maar niet in het gedrang komt. Hoewel WordPress je hierbij helpt met srcset , kun je zelf nog meer doen om de afbeeldingsgrootte te minimaliseren, met name door afbeeldingen te herschalen en te comprimeren.

ImageRecycle is een plugin die afbeeldingen tegelijkertijd kan verkleinen en comprimeren, en is beschikbaar voor zowel WordPress als Joomla. Het beste van alles is dat je ImageRecycle kunt gebruiken om afbeeldingen automatisch te verkleinen en te comprimeren.

Het verkleinen van afbeeldingen is vooral handig als je stockfoto's gebruikt in je WordPress- of Joomla-blog. Deze afbeeldingen zijn vaak onevenredig groot voor alle toepassingen, inclusief printmedia. Op het web is het zeer onwaarschijnlijk dat je ooit hun volledige resolutie nodig hebt. Met ImageRecyclekun je grote afbeeldingen automatisch verkleinen tot een maximale hoogte of breedte bij het uploaden.

Naast het verkleinen van afbeeldingen is er ook compressie, waarmee de bestandsgrootte wordt geoptimaliseerd zonder kwaliteitsverlies. Met compressie met kwaliteitsverlies kunt u de bestandsgrootte van afbeeldingen tot wel 80% verkleinen. Dit geldt niet alleen voor de originele afbeeldingen, maar ook voor de afbeeldingen die door WordPress worden verkleind. Ook dit kan ImageRecycle automatisch voor u doen.

Wat voor jou misschien maar een paar extra kilobytes lijken, kan voor je lezers kostbare tijdverlies betekenen. Het goede nieuws is dat je geen concessies hoeft te doen aan de kwaliteit om sneller te laden. Door slimmer gebruik te maken van CSS en de schaal- en optimalisatiefuncties van ImageRecycle, kun je afbeeldingen van hoge kwaliteit hebben die zich aanpassen aan de apparaten van je lezers.