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

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

Om zoveel mogelijk verschillende displays met één afbeelding te kunnen plaatsen, 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 die geschaald zijn afhankelijk van het weergaveapparaat, of het nu desktop, tablet of mobiel is.

Presenteren van geschaalde afbeeldingen op WordPress en Joomla met CSS

Hoeveel ruimte nemen afbeeldingen in op webpagina's? Er zijn geen vaste regels, maar gezien hun belang en alomtegenwoordigheid, is het antwoord zeker veel. Als u afbeeldingen weergeeft die u toch zult herschalen, is het alleen maar zuinig om uw WordPress- of Joomla-gebruikers van dienst te zijn met 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 ImageRecycle kunt u bij het uploaden automatisch grote afbeeldingen verkleinen tot een maximale hoogte of breedte.

Een aanvulling op herschaling is compressie, die de beeldgrootte optimaliseert zonder in te boeten aan kwaliteit. Met compressie met verlies kunt u de beeldruimte tot 80% beperken. Dit geldt niet alleen voor de originele afbeeldingen, maar ook voor de afbeeldingen die door WordPress zijn aangepast. 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 ImageRecycle kunt u afbeeldingen van hoge kwaliteit hebben die zich aanpassen aan de apparaten van uw lezers.