Serveer goed geschaalde afbeeldingen op uw WordPress- of Joomla-website

Neem een ​​willekeurige afbeelding op uw WordPress- of Joomla-blog. Als je kwaliteit beoordeelt, is de kans groot dat de afbeelding groot genoeg is om te worden verkleind om op de desktopapparaten van je lezers te passen, laat staan ​​op mobiele apparaten. Kwaliteit is allemaal goed en wel, maar gevallen zoals deze hebben een flinke prijs.

Om zoveel mogelijk verschillende displays met één afbeelding te kunnen homevesten, moet je een grote gebruiken. Dat vertaalt zich op zijn beurt in grote bestanden die zelfs op kleine apparaten in hun geheel moeten worden gedownload. Er is een oplossing: afbeeldingen weergeven op schaal, afhankelijk van het weergaveapparaat, of het nu desktop, tablet of mobiel is.

Geschaalde afbeeldingen weergeven op WordPress en Joomla met CSS

Hoeveel ruimte nemen afbeeldingen in webpagina's in? Er zijn geen vaste regels, maar gezien hun belang en alomtegenwoordigheid is het antwoord beslist veel. Als u afbeeldingen aanbiedt die u uiteindelijk toch zult moeten herschalen, is het alleen maar logisch om zuinig te zijn en uw WordPress- of Joomla-gebruikers te voorzien van afbeeldingen die al zijn verkleind om de laadtijden van uw website te versnellen.

CSS is er om te helpen met een reeks relatief onbekende, maar onschatbare attributen: de srcset , maten en media . Met deze kenmerken - die allemaal worden ondersteund door de meeste moderne webbrowsers - kunt u specificeren welke afbeeldingsversies moeten worden weergegeven, afhankelijk van de grootte van de viewport.

De srcset vormt een aanvulling op het gebruikelijke src- tabblad. Zoals de attribuutnaam aangeeft, gebruikt u deze in plaats van een enkele afbeelding op te geven, een lijst met geschaalde afbeeldingen en de breedte wanneer elk moet worden gebruikt. In combinatie hiermee wordt het attribuut maten gebruikt , waarmee u kunt definiëren wanneer afbeeldingen moeten worden weergegeven op basis van de viewport-breedte.

U kunt meer lezen over deze attributen hier , maar het goede nieuws is dat in de afgelopen jaren, WordPress herschaalt automatisch uw afbeeldingen en geeft de meest geschikte maten om uw lezerspubliek. Het resultaat is verbluffend: een staande afbeelding met 511 KB wordt verkleind tot 42 KB op mobiele apparaten.

Automatische schaalaanpassing en optimalisatie met ImageRecycle

Als het gaat om beeldformaten, hoe kleiner hoe beter, zolang de kwaliteit maar niet wordt aangetast. Hoewel WordPress u helpt door srcset te gebruiken , kunt u meer doen om de afbeeldingsgrootte te minimaliseren, met name door afbeeldingen opnieuw te schalen en te comprimeren.

ImageRecycle is een plug-in die tegelijkertijd afbeeldingen voor u kan herschalen en comprimeren, en is beschikbaar op zowel WordPress als Joomla. Het beste van alles is dat u ImageRecycle kunt gebruiken om afbeeldingen automatisch ImageRecycle te schalen en te comprimeren.

Herschalen is vooral handig als u merkt dat u stockfoto's in uw WordPress- of Joomla-blog gebruikt. Deze afbeeldingen zijn vaak onevenredig groot voor alle toepassingen, inclusief printmedia. Op internet is het hoogst onwaarschijnlijk dat u ooit hun volledige resolutie zou moeten gebruiken. Met ImageRecyclekunt u bij het uploaden automatisch grote afbeeldingen verkleinen tot een maximale hoogte of breedte.

Als aanvulling op het herschalen is er compressie, die de afbeeldingsgrootte optimaliseert zonder dat dit ten koste gaat van de kwaliteit. Met compressie met verlies kunt u de beeldruimte tot wel 80% beperken. Dit geldt niet alleen voor de originele afbeeldingen, maar ook voor de afbeeldingen die door WordPress opnieuw zijn geschaald. Nogmaals, ImageRecycle kan dit automatisch voor u doen.

Wat u ziet als een paar kilobytes extra, kan voor uw lezers kostbare tijdverlies betekenen. Het goede nieuws is dat u geen kwaliteit hoeft op te offeren voor laadtijden. Met slimmer gebruik van CSS en de herschaling en optimalisatie van ImageRecyclekunt u afbeeldingen van hoge kwaliteit hebben die zich aanpassen aan de apparaten van uw lezers.