Beeldcompressie voor websites: minder gewicht zonder dat dit ten koste gaat van de foto
Kies resolutie, kwaliteit en afbeeldingsformaat om de grootte van foto's op webpagina's te verkleinen zonder tekst en randen te vervagen.

Het openen van een receptenpagina kost tijd, omdat elke foto rechtstreeks vanuit de camera wordt verzonden en meerdere megabytes weegt. De lezer hoeft het eten alleen duidelijk in de breedte van de mobiele telefoon te zien. Het verminderen van het bestandsgewicht kan de ervaring transformeren, zolang de compressie maar op basis van criteria wordt uitgevoerd.
Afmetingen gaan vóór het kwaliteitspercentage
Als de afbeelding 800 pixels op de pagina beslaat, is er geen reden om altijd de 6000 pixelversie te publiceren. Eerst het formaat wijzigen vermindert de kwaliteit vaak meer dan agressief aandraaien. GebruikAfbeelding comprimerenom het te passen en zowel de afmeting als het uiteindelijke gewicht te observeren.
JPEG en WebP werken goed op foto's; PNG heeft de neiging logischer te zijn in afbeeldingen of afbeeldingen met transparantie. De keuze hangt af van de vereiste inhoud en compatibiliteit. Een afbeelding met kleine aantallen kan er slecht uitzien bij aanvaardbare compressieniveaus voor landschappen.
De test moet plaatsvinden waar het beeld verschijnt

Vergelijk origineel en gecomprimeerd op volledige grootte op de pagina, waar relevant op lichte en donkere schermen. Bekijk gezichten, productranden, verlopen en inline letters. De meest voorkomende gebreken zijn zichtbare blokken, dubbele contouren en vlekken in uniforme gebieden.
Namen, versies en verantwoordelijkheid
Gebruik beschrijvende bestandsnamen, zoalscake-chocolade-plak.webpen alternatieve tekst die de inhoud beschrijft voor degenen die de foto niet kunnen zien. Bewaar de originele versie in uw bibliotheek. Als u veel afbeeldingen publiceert, standaardiseer dan de breedten en vergelijk het laden op een trage verbinding. Goed comprimeren is de kleinste versie vinden die prettig en begrijpelijk blijft.
Het paginagewicht is de som van de afbeeldingen
Een foto verkleind van 3 MB naar 280 KB levert een belangrijke besparing op, maar voor een galerij met twintig afbeeldingen van dit formaat zijn nog steeds enkele megabytes nodig. Bekijk de set: omslagformaat, thumbnails, artikelafbeeldingen en versie voor grotere schermen. Als u in elke ruimte dezelfde grote foto plaatst, verspilt u bezoekersgegevens. Wanneer het platform responsieve afbeeldingen ondersteunt, zorg dan voor versies die evenredig zijn aan de weergavegrootte.
Vermijd ook opeenvolgende compressies tijdens de bewerking. Als iemand een reeds verkleinde JPEG opslaat en de volgende editor deze opnieuw comprimeert, stapelt het verlies zich op. Bewaar een kwaliteitskopie van de originele foto, met een naam en organisatie zodat u deze maanden later kunt terugvinden. Op deze manier kunt u nieuwe formaten genereren als de lay-out verandert, zonder afhankelijk te zijn van bestanden die al details verloren hebben.
Lees ook
- Verwijder de achtergrond van de productfoto zonder randen en details te wissen
- Hoe u de achtergrond uit een afbeelding verwijdert en de bijsnijdranden verbetert
- PNG, JPG of WebP: welk formaat moet je in welke situatie gebruiken?
Technische referentie: beeldformaten, compressie en transparantie (MDN).