Hoe werkt Shortpixel? En waarom zijn kleine afbeeldingen voor je website beter?

ShortPixel is een WordPress-plugin die je afbeeldingen kleiner maakt zonder dat je bezoeker er iets van ziet. Je installeert hem, hij werkt je bestaande mediabibliotheek af, en alles wat je daarna uploadt gaat automatisch door de mangel.

De reden om dat te doen is simpel. Afbeeldingen zijn op vrijwel elke site het zwaarste onderdeel van een pagina. Een startpagina van vier megabyte bestaat zelden uit tekst.

Waarom afbeeldingen de grootste snelheidswinst opleveren

Tel op een gemiddelde bedrijfssite eens bij elkaar op wat er binnenkomt. Je stijlblad is een paar tientallen kilobytes, je scripts wat meer, je lettertypen ook. En dan staat er in de kop één foto die in zijn eentje zwaarder is dan al het voorgaande bij elkaar.

Dat verschil is geen detail. Op een telefoon met een matige verbinding buiten de stad komt zo'n foto er per stuk in. De bezoeker kijkt intussen naar een wit vlak.

Google meet dat ook, en wel via Largest Contentful Paint: de tijd tot het grootste element in beeld staat. Op de meeste sites is dat grootste element een afbeelding. Verklein die afbeelding en je verbetert precies het cijfer waarop je wordt beoordeeld. De andere twee waarden uit die set gaan over reactiesnelheid en over verspringende opmaak, en die verbeter je met andere maatregelen. Wat er verder speelt op een klein scherm staat in het artikel over je website optimaliseren voor mobiel.

Er is een tweede reden die niemand noemt. Een lichte site is goedkoper in dataverkeer, je back-ups zijn kleiner en je herstelt sneller als er iets misgaat. Bij een site met tienduizend zware afbeeldingen loopt dat op.

Wat ShortPixel precies doet

De plugin stuurt je afbeelding naar de servers van ShortPixel, laat hem daar comprimeren en zet het resultaat terug op je site. Je originele bestand blijft bewaard in een aparte map, dus je kunt altijd terug naar de uitgangssituatie.

Dat comprimeren gebeurt dus niet op jouw server. Dat is een voordeel, want het kost jouw hosting geen rekenkracht, en het is een aandachtspunt, want je bestanden gaan bij het optimaliseren de deur uit. Voor gewone websitebeelden is dat geen bezwaar. Werk je met beeldmateriaal dat niet buiten de deur mag komen, kies dan een plugin die het werk op je eigen server doet.

Naast de mediabibliotheek kan hij ook mappen buiten WordPress meenemen, bijvoorbeeld beelden die je thema of je paginabouwer los heeft neergezet. Die vergeet je anders, en juist daar zitten vaak de zwaarste bestanden.

Verliesloos, verliesgevend en het middenformaat

Je kiest zelf hoe hard er geknepen mag worden, en dat is de belangrijkste keuze in de hele plugin.

• Lossless. Verliesloos. Er gaat geen enkel beeldpunt verloren; wat eraf gaat is overbodige informatie in het bestand, zoals cameragegevens en inefficiënt opgeslagen kleur. De besparing is het kleinst.
• Glossy. Een tussenvorm van ShortPixel zelf. Er verdwijnt informatie, maar zo weinig dat je het naast het origineel niet ziet. Voor fotografie waar je op afgerekend wordt is dit de veilige keuze.
• Lossy. Verliesgevend. Er wordt echt informatie weggegooid, vooral kleurdetail waar het oog toch slecht in is. De besparing is fors en op een scherm zie je het verschil niet.

Verliesgevende compressie werkt door het beeld op te delen in blokjes en per blokje de fijnste variaties af te ronden. Hoe harder je knijpt, hoe grover die afronding. Bij een foto van een gezicht of een landschap merk je dat pas heel laat. Bij een schermafdruk met tekst of een logo met scherpe randen zie je meteen vuil rond de lijnen.

Mijn advies: zet lossy aan voor je hele bibliotheek en maak een uitzondering voor je logo, je pictogrammen en beelden met tekst erin. Twijfel je over je productfoto's, dan is glossy het compromis.

WebP en AVIF, het onderdeel dat het meeste oplevert

Dit is de instelling die vaak uit staat en die meer scheelt dan de compressie zelf.

ShortPixel kan naast je jpg of png een extra versie maken in WebP of AVIF. Dat zijn nieuwere bestandsformaten die bij dezelfde kwaliteit veel kleiner zijn, omdat ze rekentechnieken uit videocompressie gebruiken. WebP komt van Google en wordt sinds Safari 14 in 2020 door alle browsers begrepen. AVIF is de opvolger, nog wat kleiner en wat trager om te maken, en die wordt sinds Safari 16 in 2022 breed ondersteund. Wat er precies in die formaten zit staat in het artikel over webp-afbeeldingen en het artikel over avif-afbeeldingen.

WordPress kan er zelf ook mee overweg. Sinds versie 5.8 uit 2021 mag je WebP uploaden en sinds versie 6.5 uit 2024 ook AVIF. Wat WordPress niet doet, is die versies automatisch voor je maken. Er was een plan om dat vanaf versie 6.1 wel te doen, maar dat is voor de uitgave weer geschrapt. Daarom heb je hier een plugin of je hosting voor nodig.

Hoe die nieuwe versies bij de bezoeker komen

Een WebP-bestand maken is één ding. Zorgen dat de juiste bezoeker de juiste versie krijgt is een ander ding, en daar gaat het regelmatig mis.

Er zijn twee routes. De eerste is dat de plugin je HTML aanpast en elke afbeelding in een blokje zet met daarin alle beschikbare varianten. De browser kiest zelf de eerste die hij begrijpt. Dit werkt overal en is de veiligste keuze.

De tweede route is een regel in je serverconfiguratie die kijkt wat de browser zegt te accepteren en op basis daarvan een ander bestand teruggeeft onder dezelfde naam. Sneller en netter, maar gevoelig voor caching. Zit er een cachelaag of een CDN tussen die dat onderscheid niet doorgeeft, dan krijgt de ene bezoeker het bestand dat voor de andere was bedoeld. Het gevolg is een pagina met kapotte afbeeldingen bij een deel van je publiek, en jij ziet het niet omdat het bij jou goed gaat.

Merk je dat, kies dan de eerste route. Het scheelt een paar kilobytes en het bespaart je een raadsel.

WordPress maakt van elke upload een stuk of tien bestanden

Dit is de reden dat mensen schrikken van hun creditverbruik.

Upload je één foto, dan maakt WordPress daar automatisch verkleinde varianten van: een miniatuur, een middelgrote, een grote, en daarnaast alle maten die je thema en je paginabouwer nodig hebben. Dat gebeurt zodat een telefoon een kleiner bestand kan ophalen dan een breed scherm, wat op zich prima werkt. Zie het artikel over responsive webdesign voor hoe dat kiezen in zijn werk gaat.

Het gevolg is dat één upload al snel acht tot vijftien bestanden op je schijf zet. Wil je dat je site echt sneller wordt, dan moeten die varianten ook mee in de optimalisatie, want dat zijn juist de bestanden die bezoekers krijgen. In ShortPixel is dat een vinkje, en elk meegenomen formaat kost een credit.

WordPress heeft sinds versie 5.3 uit 2019 al één rem ingebouwd: upload je iets breder dan 2560 pixels, dan wordt er automatisch een verkleinde versie gemaakt die als hoofdbestand wordt gebruikt. Dat is een prettige bodem, alleen is 2560 pixels voor de meeste sites nog steeds veel te breed.

De instellingen die het meeste opleveren

Vier dingen om na te lopen zodra de plugin draait.

Verkleinen bij het uploaden. Zet een maximale breedte van bijvoorbeeld tweeduizend pixels. Dit scheelt meer dan alle compressie samen, want er is altijd iemand die een foto van 6000 pixels breed naar binnen sleept.

Alle afgeleide formaten meenemen. Zonder dit vinkje optimaliseer je het bestand dat vrijwel niemand krijgt.

WebP of AVIF aanzetten, inclusief levering. Alleen aanvinken dat ze gemaakt worden is niet genoeg; er moet ook een leveringsmethode aan staan.

Uitzonderingen voor je logo en je pictogrammen. Die staan het beste als svg op je site, want dat blijft scherp op elk scherm en is meestal maar een paar kilobytes. WordPress staat het uploaden van svg niet zomaar toe, omdat er scripts in zo'n bestand kunnen zitten. Regel dat via je thema of laat je bouwer het doen.

Wat het kost en hoe de credits werken

Je betaalt per verwerkte afbeelding en elk afgeleid formaat telt als een eigen afbeelding. Een site met duizend uploads kost dus al snel acht- tot vijftienduizend credits voor de eerste ronde.

Er is een gratis laag van honderd afbeeldingen per maand. Dat is genoeg voor een site waar af en toe iets bij komt, en te weinig voor de inhaalslag op een bestaande bibliotheek.

Voor die inhaalslag koop je een eenmalig pakket credits dat niet verloopt. Plaats je maandelijks veel, dan is een abonnement handiger. Kijk voor de actuele bedragen op hun eigen site, want die veranderen en ik ga hier geen prijs neerzetten die volgend jaar niet meer klopt.

Let op één ding bij de eerste ronde: raken je credits halverwege op, dan heb je een site met half geoptimaliseerde beelden. Dat is niet erg, maar je meting klopt dan niet en je denkt dat het weinig oplevert.

Hetzelfde regelen bij je hosting

Sommige hostingpartijen bieden beeldoptimalisatie als onderdeel van hun pakket aan, meestal via de cachemodule op de server.

Dat werkt zo: het originele bestand blijft ongemoeid op je schijf staan, en bij het uitleveren maakt de server er een kleinere of modernere versie van die hij in een cache bewaart. Je mediabibliotheek verandert dus niet.

Het voordeel is dat je niets hoeft te installeren en er geen credits aan te pas komen. Het nadeel is dat je vastzit aan die hosting. Verhuis je, dan staan al je originelen er nog in volle grootte en begint het van voren af aan. Wat je verder van een hostingpartij mag verwachten staat in het artikel over webhosting.

Hetzelfde regelen via een CDN

De derde route legt het werk bij het netwerk dat je bestanden uitlevert.

Een CDN heeft servers op meerdere plekken en levert je afbeeldingen vanaf de dichtstbijzijnde. De meeste van die netwerken kunnen het beeld onderweg ook comprimeren en omzetten naar WebP of AVIF, en sommige kunnen hem zelfs op maat snijden voor het scherm dat erom vraagt. Bij Cloudflare zit die functie in de betaalde pakketten.

Dit is de snelste route, want de bezoeker haalt het bestand dichtbij op en krijgt precies de maat die past. Het is ook de route met de meeste afhankelijkheid. Stopt je abonnement, dan valt de optimalisatie weg en heb je nog steeds dezelfde zware bestanden op je server staan.

Welke van de drie routes je kiest

Het verschil zit in de vraag waar het bestand kleiner wordt.

Bij een plugin verandert het bestand op je schijf. Dat is blijvend, het gaat mee in je back-up en het werkt overal, ook als je later verhuist. Je betaalt eenmalig en je bent er vanaf.

Bij hosting en CDN blijft het origineel groot en gebeurt het verkleinen onderweg. Dat is comfortabeler en je zit eraan vast zolang je klant bent.

Voor een gewone bedrijfssite kies ik de plugin, en dan het liefst met een eenmalig creditpakket. Je regelt het één keer goed en het blijft staan. Draai je een webshop met duizenden productfoto's die dagelijks wisselen, dan wint een CDN het op alle punten.

Wat je vooral niet doet is twee routes tegelijk aanzetten. Een plugin die WebP maakt en een CDN die er nog een keer overheen gaat levert dubbel werk, wazige beelden en een cache die je niet meer kunt volgen.

Wat compressie niet oplost

Een perfect gecomprimeerde afbeelding van 3000 pixels breed in een vak van 600 pixels blijft verspilling. Je stuurt vijfentwintig keer zoveel beeldpunten als er getoond worden. Het juiste formaat kiezen gaat vóór comprimeren.

Achtergrondafbeeldingen uit je thema of paginabouwer krijgen geen automatische varianten mee, omdat ze in het stijlblad staan en niet in de HTML. Die moet je zelf op maat aanleveren.

Verder: geef je afbeeldingen altijd een hoogte en breedte mee, anders verspringt je pagina tijdens het laden en dat telt tegen je. WordPress laadt afbeeldingen onder de vouw sinds versie 5.5 uit 2020 pas als ze in beeld komen, en slaat sinds versie 6.3 de eerste afbeelding daarbij over zodat je koptekstbeeld voorrang krijgt. Dat werkt goed, maar het maakt een zware foto niet licht.

Waar het misgaat

Te hard geknepen op de verkeerde bestanden. Schermafdrukken, tekeningen en beelden met tekst krijgen vuil rond de randen. Kleurverlopen gaan strepen vertonen. Loop na de eerste ronde een handvol pagina's na op een groot scherm.

Transparantie kwijt. Zet een png met een doorzichtige achtergrond nooit om naar jpg. Dat formaat kent geen transparantie, dus de doorzichtige delen worden zwart of wit.

Geen back-up gemaakt. De plugin bewaart je originelen, maar dat is geen back-up van je site. Maak er een voordat je duizenden bestanden aanpast. Wat daar verder bij komt kijken staat in het artikel over het beveiligen van WordPress.

Originelen weggegooid om schijfruimte te winnen. Begrijpelijk, en daarna kun je nooit meer terug naar een andere instelling. Bewaar ze minstens tot je zeker weet dat je tevreden bent.

Twee beeldplugins die elkaar in de weg zitten. Kies er één en verwijder de andere volledig, inclusief de regels die hij in je serverconfiguratie heeft achtergelaten.

Meten voor en na

Draai je startpagina en je zwaarste pagina door PageSpeed Insights voordat je begint en noteer de uitkomst. Doe het daarna nog een keer. Zonder die nulmeting weet je niet wat het opleverde en ga je op je gevoel af.

Kijk daarbij naar twee soorten cijfers. De labmeting is een test die op dat moment wordt uitgevoerd en die schommelt. De veldgegevens komen van echte bezoekers over de afgelopen periode en die bewegen pas na weken. Schrik dus niet als je veldcijfers de dag na je optimalisatie nog hetzelfde zijn.

De eerlijkste controle is het tabblad met netwerkverkeer in je browser. Zet de cache uit, herlaad je pagina en kijk hoeveel er in totaal binnenkomt en welk bestand het grootst is. Dat getal is waar je het voor doet.

Veelgestelde vragen over ShortPixel en het verkleinen van afbeeldingen

Wat doet ShortPixel precies?

ShortPixel verkleint de bestandsgrootte van je afbeeldingen door overbodige gegevens weg te halen en het beeld efficiënter op te slaan. Hij doet dat voor je bestaande mediabibliotheek en automatisch voor alles wat je daarna uploadt.

Daarnaast kan hij een extra versie in WebP of AVIF maken en die uitleveren aan browsers die het aankunnen.

Is ShortPixel gratis?

Er is een gratis laag van honderd afbeeldingen per maand. Voor een site waar af en toe een bericht bij komt is dat genoeg.

Voor de eerste ronde over een bestaande site heb je meer nodig, want elk afgeleid formaat telt als een aparte afbeelding. Daarvoor koop je een eenmalig pakket credits dat niet verloopt.

Hoeveel credits heb ik nodig?

Reken op acht tot vijftien credits per geüploade foto, want WordPress maakt van elke upload een reeks kleinere varianten en die tellen allemaal mee.

De plugin laat voordat je begint zien hoeveel bestanden er in je bibliotheek staan. Neem dat aantal als uitgangspunt en niet het aantal foto's dat je denkt te hebben.

Wat is het verschil tussen lossy, glossy en lossless?

Lossless gooit geen beeldinformatie weg en levert de kleinste besparing op. Lossy gooit wel informatie weg en levert de grootste besparing. Glossy zit ertussenin en is van ShortPixel zelf.

Voor de meeste websites is lossy de juiste keuze. Voor fotografie waar detail telt is glossy een veilig compromis.

Verlies ik kwaliteit als ik mijn afbeeldingen comprimeer?

Bij verliesgevende compressie technisch wel, zichtbaar meestal niet. Op een scherm van 96 beeldpunten per centimeter, bekeken op normale afstand, zie je het verschil bij foto's niet.

Waar je het wel ziet is bij scherpe randen: logo's, pictogrammen, schermafdrukken en tekst in een afbeelding. Sluit die uit van de zware instelling.

Kan ik de compressie ongedaan maken?

Ja, zolang je de originelen hebt laten bewaren. In de instellingen zit een knop om alles terug te zetten, en daarna kun je met een andere instelling opnieuw beginnen.

Heb je de originelen verwijderd om schijfruimte te besparen, dan is de weg terug afgesloten. Doe dat pas als je zeker weet dat je tevreden bent.

Moet ik WebP of AVIF gebruiken?

Zet ze allebei aan als de plugin dat toelaat. De browser kiest zelf de eerste die hij begrijpt, dus AVIF gaat naar wie het aankan en WebP naar de rest.

Moet je kiezen, neem dan WebP. Dat wordt al langer overal ondersteund en levert al het grootste deel van de winst op.

Werkt WebP in alle browsers?

Ja, in alle browsers die nog updates krijgen. De laatste die het niet kon was Safari, en dat is opgelost in Safari 14 uit 2020.

Krijg je toch meldingen van bezoekers die kapotte afbeeldingen zien, dan ligt het niet aan het formaat maar aan de manier waarop je site kiest welke versie hij uitlevert.

Wat is beter, ShortPixel of Imagify?

Ze doen hetzelfde en het verschil zit in het prijsmodel en de bediening. Smush en EWWW zijn twee andere die er in Nederland veel worden gebruikt.

Welke je kiest is minder belangrijk dan dat je er één gebruikt en hem goed instelt. Een verkeerd ingestelde dure plugin verliest van een goed ingestelde gratis plugin.

Heb ik dit nog nodig als mijn hosting of mijn CDN al afbeeldingen optimaliseert?

Nee, en je moet het dan ook niet dubbel doen. Twee lagen die allebei WebP maken leveren rare uitkomsten op en een cache die je niet meer kunt volgen.

Denk er wel aan dat bij hosting en CDN je originele bestanden groot blijven. Stap je over of stop je met dat abonnement, dan is de winst in één klap weg.

Hoe groot mag een afbeelding op mijn website zijn?

Voor een foto over de volle breedte houd ik tweehonderd tot vierhonderd kilobyte aan als bovengrens. Voor een gewone afbeelding in een tekst is honderd kilobyte ruim.

In afmetingen: laat niets breder dan tweeduizend pixels op je site staan, tenzij je een beeldbank of een fotoportfolio hebt.

In welk formaat kan ik mijn foto's het beste uploaden?

Jpg voor foto's, png alleen als je transparantie nodig hebt, en svg voor logo's en pictogrammen. Upload liever niet zelf al WebP, want dan heb je geen bruikbaar origineel meer om later mee te werken.

Vermijd tiff, bmp en bestanden die rechtstreeks uit een camera komen. Die zijn niet voor het web bedoeld.

Helpt het verkleinen van afbeeldingen voor SEO?

Indirect. Laadtijd is een van de signalen die Google meeweegt, en het element dat je snelheid bepaalt is meestal een afbeelding.

Het grotere effect zit bij je bezoekers. Een pagina die snel staat wordt verder gelezen, en dat gedrag werkt harder voor je dan het signaal zelf. Vergeet daarnaast je alt-teksten niet, want dat is de kant van afbeeldingen waar zoekmachines echt iets van lezen.

Wat doe ik met de afbeeldingen die er al op staan?

Die draai je in één keer door de plugin heen. Dat heet een bulkoptimalisatie en die loopt op de achtergrond door terwijl je iets anders doet.

Bij een site met duizenden bestanden duurt dat uren. Zorg dat je genoeg credits hebt voordat je begint en maak eerst een back-up van je bestanden en je database. Controleer daarna een paar pagina's met de hand voordat je concludeert dat het goed is gegaan.