Zet je foto's en afbeeldingen erin voor WebP-, AVIF- en JPG-kopieën op de breedtes die je pagina's nodig hebben, met cameragegevens verwijderd. Zie hoeveel kleiner elke is, download ze allemaal als .zip en plak de srcset-code. Je afbeeldingen verlaten dit apparaat nooit. Het is gratis.
Hoe je afbeeldingen voor een website optimaliseert, stap voor stap
- Kies afbeeldingen of zet ze op de pagina neer. JPG-, PNG-, WebP-, AVIF- en GIF-bestanden werken.
- Vink de Breedtes aan die je wilt, van 480 tot 2560. Afbeeldingen worden nooit groter gemaakt dan het origineel.
- Kies de Formaten: AVIF, WebP, een JPG-terugval en PNG voor transparante afbeeldingen.
- Stel de Kwaliteit, het sizes-attribuut en de Afbeeldingenmap op je site in en druk op Opnieuw met deze instellingen als je ze wijzigt.
- Vergelijk Voor en Na en druk dan op Alles downloaden (.zip).
- Kopieer de picture-code voor elke afbeelding en plak hem in je pagina.
Waarom meerdere breedtes?
Een telefoon heeft niet dezelfde foto van 2000 pixels nodig als een grote monitor. Met srcset geef je meerdere breedtes op en kiest de browser de kleinste die op dat scherm nog scherp is. Het sizes-attribuut vertelt hoe breed de afbeelding wordt getoond, zodat hij kan kiezen voordat de pagina klaar is met opmaken.
AVIF, WebP of JPG?
AVIF is meestal het kleinst, WebP komt dicht erachter en werkt in elke huidige browser en JPG is de veilige terugval. De picture-code biedt ze in die volgorde aan, zodat elke browser de beste neemt die hij begrijpt. Transparante afbeeldingen krijgen een PNG-terugval in plaats van JPG zodat de transparantie behouden blijft. Als een formaat grijs is, kan deze browser het niet maken; de andere formaten werken nog.
Wat er wordt verwijderd
Elke afbeelding wordt opnieuw getekend en opgeslagen, dus cameragegevens, gps-locatie, bewerkingsgeschiedenis en ingesloten kleurprofielen worden weggelaten. Foto's die gedraaid zijn genomen worden eerst rechtgezet. Een kwaliteit rond 75 tot 82 is een goede balans voor foto's; afbeeldingen met scherpe randen kunnen er iets hoger beter uitzien.
Waarom het ertoe doet
- Kleinere afbeeldingen laden pagina's sneller, vooral op telefoons.
- Snellere pagina's zijn makkelijker te gebruiken en scoren vaak beter in zoekresultaten.
- Het verwijderen van locatiegegevens beschermt de privacy van de mensen en plaatsen in je foto's.
- Afbeeldingen op het juiste formaat besparen bandbreedte voor jou en je bezoekers.
Wie gebruikt het
Bloggers, winkeliers, fotografen en ontwikkelaars die afbeeldingen willen die scherp zijn en snel laden. Gebruik de afbeeldingscompressor voor één afbeelding op een bepaalde bestandsgrootte en de afbeeldingenconverter om een bestandstype te wijzigen.
Vragen
Welke kwaliteit moet ik kiezen?
Rond 75 tot 82 is een goede balans voor foto's. Verhoog het iets voor afbeeldingen met scherpe randen.
Heb ik AVIF nodig als ik WebP heb?
AVIF is meestal kleiner, en de picture-code valt terug op WebP en JPG voor browsers die het niet kunnen tonen.
Worden mijn afbeeldingen geüpload?
Nee. Ze worden in je browser verwerkt.