Hoe Afbeeldingen voor het Web te Optimaliseren met Squoosh.app

Je weet waarschijnlijk al over beeldoptimalisatie.

Het is bedoeld om foto’s op je site te comprimeren, zodat pagina’s niet met een gletsjersnelheid laden.

Tot nu toe heb je het hele idee min of meer genegeerd. Eerlijk gezegd — het maakt niet veel uit totdat je site volledig gevormd is.

Maar nu is het moment gekomen om iets te doen. Je aartsvijand… euh, we bedoelen… je dichtstbijzijnde concurrent verslaat je site volledig in de prestatieoorlogen. Het is tijd om terug te vechten.

Squoosh is een van de beste tools die je tot je beschikking hebt. Het is gratis, open source en eenvoudig in gebruik.

In deze handleiding gaan we kijken hoe je Squoosh gebruikt om afbeeldingen te comprimeren en je laadtijden te verminderen. Laten we beginnen!

Hoe Afbeeldingen Te Optimaliseren Met Squoosh in 30 Seconden

Laten we meteen ter zake komen.

Je kunt heel snel beginnen met het optimaliseren van afbeeldingen voor je site.

Ga naar https://squoosh.app.

Klik op de grote roze vlek bovenaan de pagina en selecteer de afbeelding die je wilt comprimeren.

Je komt dan in een voorbeeldscherm terecht, met een instellingenpaneel rechtsonder.

Hier kun je ervoor kiezen om je afbeelding te verkleinen, het kleurenpalet te verminderen, de kwaliteit te veranderen en je voorkeursuitvoerbestandstype te selecteren.

Hieronder zie je een teller die aangeeft hoeveel kleiner je nieuwe bestand zal zijn.

Wanneer je verschillende opties selecteert, kun je de schuifregelaar in het midden van je scherm verplaatsen om het effect op de beeldkwaliteit te zien. Links zie je een ingezoomde weergave van je originele afbeelding; rechts is een voorvertoning van je gecomprimeerde versie.

Ziet het er goed uit? Download je gecomprimeerde afbeelding door op de blauwe blob rechtsonder te tikken. Deze is klaar om aan je website toe te voegen.

Boem, klaar.

Professionele Tip: Wil je de boel versnellen voor de volgende afbeelding? Tik op het kleine “tandwieltje” icoon in het bedieningspaneel. Dit zal je huidige instellingen opslaan als een voorinstelling, die je later kunt laden door op het andere tandwielicoon te tikken.

Squoosh Beter Leren Kennen

Dat is de korte versie, maar er is nog veel meer over Squoosh.

Dit open-source beeldcompressiehulpmiddel is daadwerkelijk ontwikkeld door de mensen bij Google. Het is beschikbaar als een webapp en als een browser-add-on voor Chrome.

Als je technisch bent ingesteld, kun je ook Squoosh van GitHub downloaden en het offline uitvoeren via de opdrachtregel.

Squoosh ondersteunt PNG, JPG, TIFF, GIF, en vele andere formaten. Elke versie is gratis te gebruiken, en de app verzorgt compressie lokaal. Dat is goed nieuws voor de privacy, want afbeeldingen verlaten nooit je apparaat.

Leren Hoe Je Squoosh Als Een Pro Gebruikt

Het andere geweldige aan Squoosh is dat het veel controle biedt. Je moet gewoon weten hoe je het bedieningspaneel moet navigeren.

Laten we snel een rondleiding doen.

Wanneer je voor het eerst een afbeelding laadt in Squoosh, zie je slechts vier opties op het bedieningspaneel:

Formaat Wijzigen

Als je van plan bent een afbeelding te gebruiken voor een miniatuur, heb je geen volledige resolutie nodig. Je kunt deze schakelaar omzetten om de afbeeldingsgrootte te wijzigen.

Voer het aantal pixels in dat je wilt, maar laat de standaardopties geselecteerd tenzij je een goede reden hebt. Zorg ervoor dat “Behoud Beeldverhouding” geselecteerd is om vervorming te voorkomen!

Verminder Palet

Veel afbeeldingen bevatten eigenlijk niet zoveel kleuren. Met deze optie kun je tinten weggooien om de bestandsgrootte te verminderen.

Die “Dithering” schuifregelaar? Het creëert in wezen een ruispatroon om het verminderde kleurenpalet te verbergen.

Opmerking: Deze techniek wordt het beste gebruikt voor ontwerpen in plaats van foto’s, aangezien foto’s kunnen eindigen als slechte fotokopieën.

Indeling

Onder het label “Comprimeren” kun je een uitvoerformaat voor je afbeelding selecteren. De opties vallen in twee hoofdcategorieën.

• Lossy (bijv. JPG, GIF): Deze formaten verwijderen kleine delen van je afbeelding om ruimte te besparen. Over het algemeen merk je geen verschil, tenzij je iets wilt met een echt hoge resolutie.
• Lossless (bijv. PNG, AVIF): Daarentegen vinden lossless formaten manieren om de bestandsgrootte te verminderen zonder de kwaliteit van je afbeelding te beïnvloeden.

Als algemene regel geldt dat lossy prima is voor eenvoudige grafieken, terwijl lossless beter is voor scherpe iconen en gedetailleerde foto’s.

Kwaliteit

Als je een lossy formaat kiest, zie je ook deze schuifregelaar. Deze loopt van 0 (je afbeelding platdrukken) tot 100 (geen verandering).

Voordat je jouw afbeelding opslaat, raden we je aan deze schuifregelaar te verplaatsen en het effect in het voorbeeldgebied te bekijken. Om een mooie, kleine bestand te krijgen, verplaats de schuifregelaar zo ver mogelijk naar links zonder lelijke artefacten te creëren.

Als je converteert naar WebP, zie je ook een “Inspanning” schuifregelaar. Dit regelt hoe grondig Squoosh je afbeelding analyseert voordat wordt besloten hoe de compressie toe te passen. Kies een hoger nummer als je details wilt behouden.

Geavanceerde Instellingen

Afhankelijk van het door jou geselecteerde uitvoerformaat, heb je mogelijk toegang tot meer opties onder het tabblad “Geavanceerde instellingen”.

Tenzij je een Ph.D. hebt in beeldbewerking, kun je deze instellingen beter vermijden.

Snelle Tips Om Meer Uit Squoosh Te Halen

Over het algemeen is Squoosh super eenvoudig in gebruik. En eerlijk gezegd bevat de bovenstaande sectie alles wat je echt moet weten over de app.

Maar we zien je, lezer. Je wilt een god van afbeeldingscompressie worden, nietwaar?

Nou, hier zijn enkele professionele tips die je zullen helpen die onsterfelijke status te bereiken.

• Slepen en neerzetten: Maak je niet druk om het bestandsmenu. Sleep je afbeelding gewoon rechtstreeks in Squoosh.
• Ken je formaten: Gebruik WebP voor moderne browsers, MozJPEG voor foto’s, en OptiPNG voor grafische afbeeldingen. Onthoud, AVIF is de nieuwe speler; controleer welke browsers dit kunnen verwerken.
• Grootte is belangrijk: Comprimeer voor kwaliteit, niet alleen voor bestandsgrootte. Als je afbeelding van een meesterwerk naar een kleuterschoolproject gaat, doe dan een stap terug en pas die instellingen aan.
• Inspanning telt: Draai die inspanningsregelaar voor PNG’s en WebP omhoog om elke laatste bit uit de bestandsgrootte te persen zonder de kwaliteit dramatisch te beïnvloeden.
• “Pallet Verminderen” is je vriend: Hoeveel verschillende kleuren bevat je afbeelding? Als het vrij simpel is, kun je veel ruimte besparen door de “Pallet Verminderen” regelaar naar links te bewegen.

Onthoud, elke MB die je bespaart betekent minder wachttijd voor je gebruikers!

Hoe Beheer Je Website Afbeeldingen Voor Betere Prestaties

Hoewel Squoosh je afbeeldingen kan verkleinen naar een meer beheersbare grootte, is het geen oplossing voor alles.

Volg deze richtlijnen om ervoor te zorgen dat je gecomprimeerde afbeeldingen de prestatieverbetering leveren waarop je hoopt!

• Gebruik Een CDN: Content delivery networks (CDNs) zijn geoptimaliseerd voor media, en ze verminderen de druk op de servers van je host.
• Denk Goed Na Over Bestandstypen: Het is gemakkelijk om alle afbeeldingen hetzelfde te maken. Maar je keuze van bestandstype moet overeenkomen met de vereisten van elke afbeelding op je site.
• Verwijder Onnodige Metadata: Heeft je afbeelding locatie- en camerainformatie nodig om mee te slepen? Waarschijnlijk niet.
• Probeer Sprites Te Gebruiken: In plaats van één grote afbeelding met een herhalend patroon te gebruiken, kun je misschien meerdere keren een kleine sprite gebruiken. Dat zou de zaken echt kunnen versnellen!

Als je benieuwd bent naar alle manieren waarop je afbeeldingsoptimalisatie kunt toepassen, staat onze blog vol met nuttige handleidingen. Hier zijn enkele van de hoogtepunten:

• Vaarwel, JPG: Hier Is Hoe Je Afbeeldingen Optimaliseert Voor Het Moderne Web (WebP, SVG, en Meer)
• Hoe Los Je 16 Veelvoorkomende Afbeeldingsproblemen Op In WordPress
• Veelvoorkomende WordPress Afbeelding Uploadproblemen En Hoe Je Ze Oplost (5 Methoden)

Squoosh Alternatieven: De Beste Afbeeldingscompressietools

Squoosh is een geweldig startpunt voor het comprimeren en optimaliseren van afbeeldingen voor je website. Er zijn echter ook andere opties:

• TinyPNG: Deze webapp comprimeert direct afbeeldingen terwijl de indrukwekkende kwaliteit behouden blijft. Het is gratis voor batchuploads van 20 afbeeldingen of minder; je kunt meer ontgrendelen voor $39 per maand.
• ShortPixel: Als je een WordPress-website hebt, laat deze plugin je afbeeldingen comprimeren rechtstreeks vanuit je admin-gebied. Het is gratis voor maximaal 100 afbeeldingen per maand.
• ImageOptim: Speciaal voor Mac-gebruikers. Deze open-source app laat je batches van afbeeldingen op je computer comprimeren. En het is helemaal gratis!
• Kraken.io: Dit krachtige hulpmiddel voor afbeeldingscompressie werkt vrijwel zoals Squoosh, zij het zonder de mooie voorvertoning. Oh, en het is alleen gratis voor bestanden tot 1MB groot.
• JPEGmini: Werk je veel met foto’s van hoge kwaliteit? Met een snelle slepen-en-neerzetten laat deze desktop-app je de bestandsgrootte van JPG’s tot wel 80% reduceren.

Laat Je Site Vandaag Nog Soepeler Lopen

Beelden optimaliseren is een klus. Maar het is de inspanning waard als je pagina’s bliksemsnel laden. Bovendien is het niet te veel moeite als je een tool zoals Squoosh hebt.

Natuurlijk zijn afbeeldingen niet de enige oorzaak van trage paginalading. Je hostingplan kan de schuldige zijn.

Wil je iets dat een betrouwbaardere prestatie biedt? Bij DreamHost komen al onze plannen met 100% gegarandeerde uptime en onbeperkte bandbreedte. Dat betekent dat je site nooit zal wankelen onder druk.

Wil je het proberen? Meld je vandaag nog aan om het verschil te voelen!