Afbeeldingen zijn een van de belangrijkste elementen van een fatsoenlijke website. Ze trekken de aandacht van bezoekers, maken uw inhoud meer deelbaar en dwingen uw gebruikers tot actie (zoals het kopen van uw producten).

Als u echter afbeeldingen met een hoge resolutie toevoegt, of afbeeldingen met een grote bestandsgrootte, kan uw website traag worden en een slechte gebruikerservaring bieden voor de eindgebruiker. Er is echt geen excuus om een ​​slechte gebruikerservaring te bieden met de overvloed aan tools die er zijn om u te helpen uw afbeeldingen te comprimeren zonder merkbaar kwaliteitsverlies en zelfs het proces voor u te automatiseren.

In dit artikel laat ik je verschillende manieren zien om afbeeldingen te optimaliseren voor gebruik op het web en meer specifiek op WordPress-websites.

Kies de juiste bestandsindeling

JPEG en PNG zijn twee van de meest populaire afbeeldingsbestandsindelingen op het web. JPEG is een gecomprimeerde indeling die meestal wordt gebruikt voor foto's met veel kleuren, terwijl PNG's een stuk beter zijn voor foto's met tekst, illustraties, logo's, schermafbeeldingen en transparante afbeeldingen. Een andere veelgebruikte indeling is de GIF die het best geschikt is voor afbeeldingen met weinig kleuren of afbeeldingen met grote gebieden met dezelfde kleur. GIF wordt tegenwoordig meestal gebruikt voor geanimeerde afbeeldingen op internet.

Met de meeste software voor beeldbewerking kunt u uw bestand in veel verschillende indelingen opslaan. Als u het juiste formaat kiest, weet u zeker dat u een zo scherp mogelijk beeld krijgt, wat de gebruikerservaring op uw website zou verbeteren.

Gebruik de juiste maat en resolutie

U moet voorzichtig zijn bij het toevoegen van afbeeldingen aan uw site. Het wordt als de beste methode beschouwd om uw afbeeldingen op dezelfde breedte en hoogte op te slaan als deze op de website en op de kleinste bestandsgrootte mogelijk zullen zijn zonder de kwaliteit te verliezen.

Comprimeer uw afbeeldingen voordat u uploadt

Er zijn veel tools beschikbaar die je helpen je afbeeldingen te comprimeren voordat je ze naar je server uploadt. Photoshop heeft bijvoorbeeld een handige functie 'opslaan voor web en apparaten' waarmee u de indeling en kwaliteitsinstellingen kunt kiezen. U ziet ook de bestandsgrootte van uw afbeelding wanneer u een bepaalde instelling toepast. Andere hulpmiddelen voor beeldmanipulatie zoals GIMP bieden vergelijkbare opties.

Online compressietools bestaan ​​ook, zoals Picresize, Kraken.io en TinyPNG, waar u uw hoge resolutie afbeeldingen kunt uploaden, optimaliseren en het gecomprimeerde formaat downloaden voor gebruik op het web.

Afbeeldingen comprimeren na het uploaden

Hiervoor bestaan ​​verschillende plug-ins en een van de meer populaire is WP Smush, waarmee u JPEG-, PNG- of GIF-indelingen afzonderlijk of in bulk kunt optimaliseren met behulp van speciale servers. Het haalt eenvoudig metadata en ongebruikte kleuren uit de bestanden om de bestandsgrootte te verlagen. Met de gratis versie bent u beperkt tot afbeeldingen van 1 MB en minder, maar u kunt deze beperking verwijderen door een upgrade uit te voeren naar de Pro-versie die maximaal 5 MB kan bevatten.

Een andere geweldige plug-in met vergelijkbare functies is EWWW Image Optimizer, die u kan helpen bij het converteren van uw afbeeldingen naar het formaat dat de laagst mogelijke bestandsgrootte produceert.

Er zijn andere beschikbaar in de WordPress-repository, dus voel je vrij om te verkennen. Dat zijn de twee die ik eerder heb gebruikt, en ze werken allebei goed, dus ze moeten ook goed genoeg voor je zijn.

Tag je afbeeldingen op de juiste manier

Afgezien van het formaat van uw afbeeldingen, is een goede manier om een ​​goede ervaring op uw website te bieden, door uw afbeeldingen correct te taggen. Dit betekent altijd dat u het alt- kenmerk gebruikt voor het geval uw afbeelding niet kan worden geladen of voor schermlezers, zodat uw bezoekers een tekstuele beschrijving van de afbeelding krijgen. Het helpt ook bij het indexeren van afbeeldingen van zoekmachines op uw website en kan u een aanzienlijke hoeveelheid zoekverkeer opleveren.

Het toevoegen van bijschriften waar nodig is een andere geweldige manier om bezoekers van uw website de afbeelding beter te laten begrijpen. Serring van juiste beschrijvende title-tags en bestandsnamen van afbeeldingen helpt op dezelfde manier. Dus in plaats van uw afbeeldingen op te slaan als ' FXSCSUYE.jpg ', gebruikt u een beschrijvende titel en naam met zoekwoorden die relevant zijn voor uw onderwerp en website. Dit is ook goed vanuit een SEO-standpunt.

Trage voortgang

Lazy Loading is een techniek die door veel websites wordt gebruikt om bandbreedte te besparen door alleen afbeeldingen te laden wanneer een gebruiker scrolt naar het weergaveframe van de afbeelding. De eerste paar afbeeldingen worden onmiddellijk geladen, maar anderen wachten tot de gebruiker in de buurt van de afbeelding is voordat deze wordt geladen. Door deze functie aan uw website toe te voegen, bespaart u bandbreedte voor u en uw gebruiker en verbetert u de snelheid van uw webpagina's. BJ Lazy Load is een geweldige plug-in om Lazy Loading toe te voegen aan je WordPress-website.

Gebruik een Content Delivary Network

Het gebruik van een Content Delivery Network (CDN) vermindert de belasting van uw server aanzienlijk en verhoogt de prestaties van uw website. Een CDN zal eenvoudig middelen bedienen van de server die zich het dichtst bij de locatie bevindt van de gebruiker die erom vraagt. Als een bezoeker uit Beijing bijvoorbeeld een afbeelding aanvraagt ​​en het CDN dat u gebruikt een server heeft in Seoul en Sydney, wordt de afbeelding weergegeven vanaf de server in Seoul.

MaxCDN is een hoogst gewaardeerde CDN die je kunt proberen, en er zijn andere zoals CloudFlare, CDN.net en meer.

Bottom Line

Het optimaliseren van afbeeldingen voor gebruik op het web is een van de grootste manieren om de laadtijd en algehele gebruikerservaring van uw website te verbeteren. Als u andere optimalisatietechnieken heeft die u wilt delen, kunt u dit doen in de onderstaande opmerkingen.