UW BEELD OPTIMALISEREN
Een beeldbestand wordt bepaald door verschillende attributen.
Van belang voor ons zijn resolutie, hoogte, breedte, compressie en bestandsformaat.
De resolutie
De regel voor resolutie, uitgedrukt in dpi, is eenvoudig:
De grootte van het beeld aanpassen
Voor de grootte van het beeld moet rekening worden gehouden met het weergavemedium. Als u bijvoorbeeld een logo wilt importeren, hoeft u geen afbeelding van meer dan 500 pixels breed te uploaden.
Als algemene regel voor foto’s raden wij aan nooit een breedte van meer dan 1200 pixels aan te houden.
Hoewel sommige schermen veel grotere weergavemedia bieden, rechtvaardigt de kwaliteitswinst de langere laadtijd niet. Vergeet niet dat de meeste gebruikers uw site op hun smartphone raadplegen!
Wij raden u aan nooit afbeeldingen groter dan 150kb te uploaden naar WordPress.
Hoe de grootte aanpassen?
Dit kan niet genoeg gezegd worden: u moet niet vertrouwen op WordPress of een hercompressieplugin om de grootte van uw afbeeldingen te verminderen. Als uw foto’s meer dan 4000 pixels breed zijn met een gewicht van 150MB, zal geen enkele plugin effectief zijn om het gewicht onder de door ons aanbevolen 150kb te brengen.
Het beste betaalde gereedschap om je foto’s te bewerken is nog steeds photoshop. Om te exporteren voor het web, kies bestand->export->opslaan voor web (Geërfd).
Met dit hulpmiddel kunt u de beeldgrootte, het exportformaat en de compressiekwaliteit instellen. Telkens wanneer u een instelling wijzigt, toont de tool linksonder de foto het geschatte gewicht van de afbeelding.
Op Mac OsX: het voorbeeldprogramma
Wanneer u uw afbeelding opent op de Mac, beschikt u al over een reeks hulpmiddelen om het formaat van de afbeelding aan te passen. U kunt uw afbeelding bijsnijden en de grootte ervan aanpassen met het menu Gereedschappen-> Grootte aanpassen. Als u met JPEG’s werkt, kunt u ook de compressieverhouding instellen. Hoewel niet zo compleet als Photoshop, is deze optie handig om uw afbeeldingen snel te exporteren.
En op Windows: Het verfgereedschap
Niet super compleet, het Paint gereedschap kan ook gebruikt worden om foto’s te verkleinen, maar in dit geval wenden wij ons liever tot gratis beeldbewerkingssoftware zoals het onvermijdelijke Gimp.
WordPress gebruiken om de foto te verkleinen
Wanneer je een afbeelding toevoegt aan WordPress, wordt deze automatisch aangepast in meerdere versies van verschillende afmetingen. U kunt kiezen tussen het originele beeldformaat, een gemiddeld formaat en een miniatuur.
Hernoem de bestandsnaam
Het is essentieel om uw bestand te hernoemen. Waarom? Omdat Google uw afbeeldingen indexeert. En een bestand met de naam IMG10349.jpg zal hem niet echt aanspreken. Wij raden u aan zoveel mogelijk trefwoorden in uw bestandsnamen op te nemen.
Voeg een attribuut toe aan uw afbeeldingen
Wanneer je een afbeelding toevoegt aan WordPress, is het mogelijk om beschrijvingen toe te voegen, evenals alternatieve tekst voor het geval de afbeelding niet laadt. Aangezien Google erg gesteld is op deze gegevens, zou het zonde zijn ze niet op te nemen. Dus als je een afbeelding hebt toegevoegd aan WordPress, vergeet dan niet de velden in de rechterkolom in te vullen: alternatieve tekst, titel, beschrijving, bijschrift. U hoeft niet voor elk van deze parameters een andere tekst op te geven.
Het bestandsformaat
De keuze van het bestandsformaat is van grote invloed op het gewicht van het uiteindelijke beeld.
Het JPEG-formaat
Het JPEG-formaat is perfect geschikt voor foto’s met veel detail, nuance en kleur. Dit is het meest gebruikte formaat voor foto’s.
Het PNG-formaat
Het PNG-formaat beheert, in tegenstelling tot JPEG, de transparantie en is daarom ideaal voor het invoegen van een logo, een pictogram, enz. Het is een zeer doeltreffend formaat voor eenvoudige afbeeldingen, met weinig nuance en detail.
Het SVG-formaat
Het SVG-formaat is een vectorformaat, zoals de AI-bestanden in Illustrator. Het beeld wordt beschreven in termen van vectoren, waardoor het beeld naar believen kan worden aangepast zonder kwaliteitsverlies, maar ook om de bestandsgrootte te minimaliseren. Dit formaat kan echter de veiligheid van uw site verzwakken en wordt niet door WordPress ondersteund.
Het GIF-formaat
Het GIF-formaat, gepopulariseerd door hetzelfde op het internet, kan een alternatief zijn voor het JPEG-formaat en wordt vooral gebruikt voor zijn animatiemogelijkheden.
Compressie
De compressie is erop gericht de kwaliteit van het beeld te maximaliseren en tegelijkertijd de bestandsgrootte zo laag mogelijk te houden.
Het is sterk aanbevolen dat je de grootte van je afbeeldingen onder de 150kb houdt, zelfs wanneer je een plugin gebruikt die afbeeldingen automatisch hercomprimeert.
150Kb lijkt misschien niet veel in onze wereld van gigabytes. Maar vergeet niet dat uw site meerdere afbeeldingen zal bevatten, en door ze allemaal op te tellen, kunt u snel uitkomen op een pagina die meerdere megabytes weegt.
De meeste mainstream hostingproviders kunnen eenvoudigweg niet voldoende prestaties leveren met pagina’s die megabytes groot zijn.
Niet te vergeten dat 4G-verbindingen op smartphones trager zijn dan WiFi-verbindingen, dus een te zware site kan lang duren om te laden.
Optimaliseer je afbeeldingen automatisch: de Imagify plugin
Allereerst moet je in gedachten houden dat geen enkele plugin wonderen zal verrichten bij het verkleinen van je afbeeldingen. Als je een ruwe foto van 150MB verstuurt, zal geen enkele plugin je toestaan om onder de 150kb te gaan.
Alleen met een optimalisatie via Photoshop, Gimp of de in uw besturingssysteem geïntegreerde hulpmiddelen kunt u uw beelden correct comprimeren.
Dat gezegd hebbende, is het niet nutteloos om een compressieplugin aan uw website toe te voegen om een paar extra Kb te winnen.
Onze voorkeur gaat uit naar Imagify, dat vrij eenvoudig te leren is en het werk doet voor een redelijke prijs. U kunt per maand betalen of GB-pakketten kopen wanneer u een grote stroom beelden te verwerken hebt. De gratis versie van de plugin laat toe om 25mb/maand te hercomprimeren. De interface is intuïtief en alle processen draaien op de achtergrond, zodat u zich geen zorgen hoeft te maken.
Hoe weet u welke afbeeldingen uw site vertragen?
Wanneer u met WordPress werkt, raden wij u aan Google Chrome te gebruiken. Deze browser heeft een reeks hulpmiddelen die u helpen begrijpen hoe uw site werkt.
Ga naar het menu View->Options for Developers -> Development Tools.
U krijgt dan een paneel te zien dat u allerlei opties biedt om uw site te controleren. Het tabblad waarin wij geïnteresseerd zijn heet “Lighthouse”, omdat u daarmee een volledige diagnostische test kunt uitvoeren.
Klik op ‘Genereer rapport’ om het rapport voor uw site te krijgen. U ontvangt dan een nota over de verschillende aspecten van uw site en aanbevelingen voor het beheer van uw beelden.
Nous voici à la fin de notre tutoriel sur le redimensionnement des images pour WordPress. Si vous avez des questions ou si quelque chose n’est pas clair, n’hésitez pas à nous contacter!