Wat is het beste afbeeldingsformaat voor een website?

"Beste formaat" is de verkeerde vraag zolang je niet weet wat voor afbeelding het is. Een website bevat enkele zeer verschillende soorten afbeeldingen en elk daarvan heeft een duidelijke winnaar:

• Foto's (producten, mensen, plaatsen): een formaat met kwaliteitsverlies. AVIF is het kleinst, WebP is de veilige moderne standaard en JPG is de reserve die elke browser kan weergeven.
• Logo's, pictogrammen en illustraties: SVG. Dit zijn vectorafbeeldingen, waardoor ze op elk scherm en elk formaat scherp blijven en het bestand meestal zeer klein is. Val alleen terug op een pixelformaat wanneer een platform SVG weigert.
• Schermafbeeldingen, UI-afbeeldingen en alles met transparantie: PNG of WebP zonder kwaliteitsverlies. Effen kleuren en scherpe randen zijn precies wat verliesvrije formaten goed comprimeren.
• Korte animaties: geanimeerde WebP of AVIF in plaats van GIF, dat tot een klein kleurenpalet beperkt is en veel grotere bestanden oplevert.
• De favicon: een ICO-bestand, idealiter naast een versie in SVG of PNG – lees hoe je een favicon van een afbeelding maakt.

De klassieke fout is een foto die als PNG wordt opgeslagen. PNG bewaart elke pixel zonder kwaliteitsverlies, wat perfect is voor een logo en rampzalig voor een foto: het bestand wordt meerdere keren zo groot als een JPG zonder zichtbaar voordeel.

Bij foto's hangt de keuze af van de mate waarin je op nieuwere browsers kunt vertrouwen:

• AVIF comprimeert het best: bij gebruikelijke webkwaliteit is het ongeveer 50% kleiner dan JPEG en 20–30% kleiner dan WebP, met HDR en een breed kleurengamma als je die nodig hebt. Chrome, Firefox en Safari geven het allemaal weer (Safari sinds versie 16.4, in 2023). De nadelen zijn de trage codering, vooral bij grote afbeeldingen, en de beperkte ondersteuning in desktopsoftware en oudere apparaten.
• WebP is de pragmatische standaard: 25–35% kleiner dan JPEG bij dezelfde visuele kwaliteit, met transparantie, en sinds 2020 ondersteund door elke gangbare browser. Sommige desktopapps en oudere hulpmiddelen kunnen het nog steeds niet openen. Dat is van belang voor het bestand dat je aan een ontwerper geeft, niet voor het bestand dat je bezoekers aanbiedt.
• JPG is de universele reserve. Het is het minst efficiënte van de drie, maar een JPG die rond kwaliteit 75–82 wordt opgeslagen, is op een scherm doorgaans niet van het origineel te onderscheiden en alles op het web kan het weergeven.

De beste configuratie biedt AVIF aan browsers die het begrijpen, WebP aan de rest en bewaart een JPG voor al het overige. Kies je liever één formaat, dan bereik je met WebP en een JPG als reserve vrijwel iedereen. De rechtstreekse vergelijkingen staan in WebP versus AVIF en WebP versus JPG; kijk voor afbeeldingen in plaats van foto's bij PNG versus JPG.

Zodra je het doelformaat kent, verloopt de conversie snel en verlaat niets je apparaat. De afbeeldingsconverter van EditItAll werkt volledig in je browser:

1. Open de converter en voeg je afbeeldingen toe – één bestand of de inhoud van een hele map. Batches worden samen verwerkt.
2. Kies het uitvoerformaat: WebP of AVIF voor foto's en PNG voor afbeeldingen die transparantie nodig hebben. Er zijn rechtstreekse routes voor veelvoorkomende taken: JPG naar WebP, PNG naar WebP, JPG naar AVIF en PNG naar AVIF.
3. Stel de kwaliteit in. Er is geen veld voor een doelgrootte: de grootte is een resultaat. Elk bestand toont zijn grootte voor en na de verwerking, zodat je de schuifregelaar kunt bijstellen totdat zowel het getal als de afbeelding er goed uitziet.
4. Download de resultaten afzonderlijk of als één ZIP.

Er wordt niets geüpload – nadat de pagina is geladen, kun je de internetverbinding verbreken en blijven converteren – en EXIF- en GPS-metadata worden uit elke geëxporteerde afbeelding verwijderd, zodat een productfoto niet onthult waar die is gemaakt. Het is gratis, zonder account en zonder watermerk. Heb je al het juiste formaat en hoeft het bestand alleen kleiner te worden? Ga direct naar de afbeeldingscompressor. En als een platform een pixelversie van een vectorlogo vereist, rendert SVG naar PNG die op elk formaat dat je kiest.

Het juiste formaat kiezen is de moeite waard, maar drie gewoonten besparen meer bytes dan een overstap van JPG naar AVIF ooit zal doen:

• Pas de afbeelding aan de werkelijk getoonde afmetingen aan. Een camerafoto is vele malen breder dan de ruimte die deze op een pagina inneemt en al die extra pixels worden gedownload en weggegooid. De afbeeldingshulpmiddelen van EditItAll hebben precies hiervoor een optionele limiet voor de maximale afmetingen.
• Comprimeer één keer, vanaf het origineel. Elke opslag met kwaliteitsverlies verwijdert iets meer detail. Bewaar het origineel, exporteer daaruit de webversie en sla een JPG niet in een keten opnieuw op als WebP en vervolgens als AVIF.
• Bied moderne formaten aan met een reserve. Bied eerst AVIF of WebP aan en laat oudere browsers terugvallen op JPG of PNG, zodat geen enkele bezoeker ooit een kapotte afbeelding ziet.

Als een snelheidsrapport zegt dat je "afbeeldingen efficiënt moet coderen" of "afbeeldingen in formaten van de volgende generatie moet aanbieden", is dit precies wat ermee wordt bedoeld: de waarschuwing over het efficiënt coderen van afbeeldingen oplossen behandelt het hele proces en JPEG comprimeren voor het web bespreekt de kwaliteitsschuifregelaar uitgebreid. Meer handleidingen over formaten staan in de verzameling afbeeldingen converteren.