Jos Klever Web Support

Onderhoud en ondersteuning WordPress websites

Nieuwendaal 24
3985AD Werkhoven
+31 6 10 83 40 84
KvK: 62385968
BTW-id: NL001998334B31

  • Nieuws
  • Over Jos
  • Diensten
    • Onderhoud
    • Gehackte website opschonen
    • Verhuizingen
    • Website omzetten naar HTTPS
    • Domeinregistratie
  • Partners
  • Beoordelingen
  • Duurzaamheid
  • Contact

Afbeeldingen optimaliseren op je website

8 april 2017 door Jos Klever

Regelmatig kom ik websites tegen, met afbeeldingen die veel groter op de server staan opgeslagen, dan dat ze op de website worden weergegeven. Dit heeft 2 grote gevolgen:

  • Vertraging bij het laden van de site
  • Meer schijfruimte op de server nodig om de website op te slaan en daarmee natuurlijk ook grotere backups

Natuurlijk is het het beste om afbeeldingen al te optimaliseren met bijvoorbeeld Adobe Photoshop voordat je ze op de site zet, maar zelfs dan blijken ze nog wel eens an de grote kant te zijn. Het komt echter vaker voor dat je geen Photoshop tot je beschikking hebt of er blijken al heel veel te grote afbeeldingen op de site te staan en je wil ze niet allemaal handmatig gaan optimaliseren en vervangen. Daarom zijn er een paar handige plugins, die het je een stuk makkelijker kunnen maken.

Hopelijk is het niet nodig om te zeggen, maar zorg uiteraard dat je een goede backup hebt, voordat je aan de slag gaat!

Imsanity

Afbeeldingen die in te grote afmetingen zijn geüpload naar de site, bijvoorbeeld rechtstreeks vanaf een camera zonder eerst te verkleinen zijn misschien wel 10 megapixels (of nog veel groter), wat neer komt op een afmeting van 3648 x 2736 pixels. De meeste afbeeldingen in pagina’s of berichten worden echter niet groter getoond dan bijvoorbeeld 1024 pixels breed. Dat zou al ruim een factor 10 schelen qua bestandsgrootte.

Om alle bestaande afbeeldingen in een bulkverwerking te verkleinen, kun je deze plugin gebruiken. Zorg na de installatie dat je de maximale afmetingen instelt via Instellingen – Imsanity:

Wanneer je afbeeldingen die eigenlijk in de 3e categorie vallen eerst uploadt in de media bibliotheek, dan zou je die instellingen (bij de 2e categorie) ook op 1920 x 1920 kunnen laten staan.

Na een bulk optimalisatie zou je de instelling voor pagina’s/berichten kunnen aanpassen naar 1024 x 1024 of naar de breedte van je content.

Sla de wijzigingen op en klik onderaan de pagina op “Begin met het verkleinen van alle afbeeldingen”. Dit proces kan afhankelijk van het aantal te verwerken afbeeldingen en de snelheid van de server best een tijd duren, maar je kunt de voortgang volgen.

Wanneer je na afloop deze plugin actief laat, dan worden voortaan ook alle nieuwe afbeeldingen automatisch geoptimaliseerd.

Imsanity

PNG to JPG

Afbeeldingen heb je in verschillende soorten. Naast foto’s heb je ook nog zogenaamde vectorafbeeldingen zoals logo’s en iconen of afbeeldingen met transparantie. Voor foto’s is JPG het beste bestandsformaat, terwijl de andere types vaak baat kunnen hebben bij een PNG afbeelding. Helaas zie ik ook vaak foto’s als PNG afbeeldingen op sites staan. Deze zijn daardoor echter een stuk  groter. We moeten ze dus omzetten naar JPG. Ook dat kan geautomatiseerd, al heeft het mijn voorkeur om het deels handmatig te doen, maar wel via de site. Met de plugin PNG to JPG is dit makkelijk.

Ga na de installatie naar Media – PNG to JPG, en verwijder het vinkje bij het bewaren van de originele PNG bestanden op de server, omdat je anders geen ruimte vrij maakt:

Kies “Convert existing PNGs”. Wacht totdat de hele site is gescand op aanwezige PNG afbeeldingen. Je kan een afbeelding aanklikken voor een vergroting, waar je ook snel kan zien of er transparantie in de afbeelding zit. Betreft het gewoon een foto zonder transparantie, dan kun je deze omzetten naar JPG door de foto aan te vinken en zodra je klaar bent met selecteren te kiezen voor “Convert selected to JPG”.

Er vanuit gaande dat je voortaan het juiste bestandsformaat kiest voor afbeeldingen, kun je deze plugin weer verwijderen, zodra je klaar bent met het omzetten.

PNG to JPG

reSmush.it

Afgezien van de afmetingen kun je afbeeldingen ook comprimeren door overbodige informatie uit het bestand te verwijderen en zo nodig de kwaliteit iets te verlagen, zonder dat dit direct zichtbaar is voor het menselijk oog. Daar komt deze plugin om de hoek kijken.

Via Media – reSmush.it kun je de instellingen aanpassen. Ik zou adviseren om de standaard instellingen te gebruiken, maar alleen een vinkje te plaatsen bij “Bewaar geen backups”, mits je zelf uiteraard een backup hebt en daar geen extra ruimte aan wilt verspillen.

Om alle bestaande afbeeldingen te optimaliseren klik je op dezelfde pagina op de knop “Optimaliseer alle afbeeldingen”. Wil je slechts enkele afbeeldingen optimaliseren, dan kan dat ook via Media – Bibliotheek door bij een specifieke afbeelding op “Optimaliseren” te klikken.

reSmush.it : The original free image compressor and optimizer plugin

EWWW Image Optimizer

Deze plugin heb ik voorheen ook gebruikt, maar persoonlijk vind ik reSmush.it nu fijner werken. Voor de volledigheid laat ik deze voorlopig nog wel in mijn instructie staan.

Bij deze plugin kun je nog best wel wat instellingen naar wens aanpassen, maar de standaard instellingen voldoen over het algemeen wel, dus we gaan meteen naar Media – Bulk Optimaliseer. Klik vervolgens op “Scan voor niet geoptimaliseerde afbeeldingen”, waarna het aantal afbeeldingen getoond wordt dat is gevonden. Klik op Start optimalisatie en alles gaat verder vanzelf.

Ook deze plugin kun je geactiveerd laten om nieuwe afbeeldingen bij het uploaden automatisch te optimaliseren.

EWWW Image Optimizer

Categorie: Voorpagina, WordPress

Email en sociale media

  • Mail
  • Facebook
  • Mastodon
  • GitHub

Categorieën

  • Algemeen (3)
  • Beveiliging (5)
  • Geen categorie (1)
  • Social media (1)
  • Storingen en werkzaamheden (6)
  • Voorpagina (3)
  • WordPress (14)

Laatste berichten op Facebook

Jos Klever Web Support
Jos Klever Web Supportmaandag, april 28th, 2025 at 4:40pm
UPDATE: De storing zou verholpen moeten zijn en de server is weer bereikbaar.

Op dit moment is er een stroomstoring in het datacenter waar mijn server draait. Hierdoor zijn websites en mailboxen tijdelijk niet bereikbaar. Hopelijk is het snel hersteld.
Voortgang is te volgen op
noc.serverius.net
2Bekijk op Facebook
Jos Klever Web Support
Jos Klever Web Supportvrijdag, december 27th, 2024 at 2:18pm
🌳 Het jaar is weer bijna voorbij, dus net als vorig jaar heb ik de balans even opgemaakt om te kijken hoeveel #WordPress websites ik in onderhoud heb. Per onderhouden website zal ik 1 euro en wanneer ik ze ook host zelfs 2 euro doneren voor het aanplanten van bomen.
Hiermee draag ik een steentje bij herstel van de natuur, aangezien websites immers ook energie kosten en daarmee de natuur belasten.
Aantal sites in onderhoud: 325
Aantal sites die ik daarvan ook host: 160
Totaal: 485
Voor € 5,- kan een boom geplant worden, dus daarmee kom ik op 97 bomen voor €485,-.
De helft zal in Nederland geplant worden en de andere helft bij een project in Indonesië. Meer informatie kan gevonden worden op de website.
Hierbij wens ik ook meteen iedereen een fijne jaarwisseling en het beste voor het nieuwe jaar! 🍾🥂🎉
#klimaat #natuur
joskleverwebsupport.nl
255Bekijk op Facebook
Jos Klever Web Support
Jos Klever Web Supportdinsdag, november 19th, 2024 at 11:09am
⚠️Mollie lijkt ongevraagd Klarna te hebben geactiveerd

Ik zie via collega's meldingen binnen komen, dat Mollie op webshops Klarna zou hebben geactiveerd, zonder dat eigenaars dit hebben aangevraagd. Webshops die dit betreft zouden via mail bevestiging hier van hebben gehad. Voor veel shops is dit ongewenst, aangezien Klarna ook 3% commissie rekent over de betaling.

Heb je hier ook bericht van gehad? Laat het me even weten, zodat we dit op de site kunnen uitschakelen en kunnen onderzoeken hoe dit heeft kunnen gebeuren.

Een support topic is te vinden en volgen op
Jos Klever Web Support
Unwanted automatically activation of Klarna
Unwanted automatically activation of Klarna Dave Loodts (@davelo) 34 minutes ago Hi, today we were very surprised to see that Mollie automatically activated the Klarna payment method on the majorit…
24Bekijk op Facebook

Laatste berichten op Mastodon

Loading Mastodon feed...

Volg me op Mastodon voor meer berichten.

Jos heeft mij ontzettend goed geholpen om mijn wordpress site weer op orde te krijgen want het had nogal achterstallig onderhoud. Hij heeft mij echt de hele tijd op de hoogte gehouden wat hij ging doen via FB berichten en dat vond ik heel erg fijn. Ik snap nu ook waarom bepaalde dingen niet goed werkten. Hij is echt een expert en van mij krijgt hij een dikke 10.

Ina Wuite Avatar Ina Wuite
3 november 2015

Copyright © 2015–2025 · Jos Klever Web Support

Beheer cookie toestemming
Wij gebruiken cookies om onze website en onze service te optimaliseren.
Functionele cookies Altijd actief
De technische opslag of toegang is strikt noodzakelijk voor het legitieme doel het gebruik mogelijk te maken van een specifieke dienst waarom de abonnee of gebruiker uitdrukkelijk heeft gevraagd, of met als enig doel de uitvoering van de transmissie van een communicatie over een elektronisch communicatienetwerk.
Voorkeuren
De technische opslag of toegang is noodzakelijk voor het legitieme doel voorkeuren op te slaan die niet door de abonnee of gebruiker zijn aangevraagd.
Statistieken
De technische opslag of toegang die uitsluitend voor statistische doeleinden wordt gebruikt. De technische opslag of toegang die uitsluitend wordt gebruikt voor anonieme statistische doeleinden. Zonder dagvaarding, vrijwillige naleving door uw Internet Service Provider, of aanvullende gegevens van een derde partij, kan informatie die alleen voor dit doel wordt opgeslagen of opgehaald gewoonlijk niet worden gebruikt om je te identificeren.
Marketing
De technische opslag of toegang is nodig om gebruikersprofielen op te stellen voor het verzenden van reclame, of om de gebruiker op een website of over verschillende websites te volgen voor soortgelijke marketingdoeleinden.
Beheer opties Beheer diensten Beheer {vendor_count} leveranciers Lees meer over deze doeleinden
Bekijk voorkeuren
{title} {title} {title}