Bloggen/ Afbeelding
Afbeelding · Praktische gids

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.

NeerzettenFabiano Freitas· · 2 minuten lezen
Redactionele illustratie van beeldcompressie voor websites: minder gewicht zonder dat dit ten koste gaat van de foto
FileBito redactionele illustratie

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

Drie stappen naar beeldcompressie voor websites: minder gewicht zonder dat dit ten koste gaat van de foto
Stappen en aandachtspunten bij het beoordelen van dit type bestand.

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

Technische referentie: beeldformaten, compressie en transparantie (MDN).

Foto door Fabiano Freitas
Over Fabiano Freitas

Fabiano Freitas heeft een diploma in Information Technology Management en schrijft over technologie toegepast op het dagelijks leven, digitale hulpmiddelen en productiviteit. Bij FileBito publiceert het praktische richtlijnen over PDF, afbeeldingen, data en conversies, met aandacht voor privacy, bestandskwaliteit en controleresultaten.

← Bekijk alle artikelen