Waarom zien de afbeeldingen op mijn website er wazig uit?

Zoek uit waar het beeld onscherp wordt

Een afbeelding wordt gemaakt, geëxporteerd, geüpload, automatisch verwerkt en weergegeven. Zoek de eerste stap waar detail verdwijnt en verander één instelling tegelijk.

Open het origineel op 100%, daarna het geüploade bestand en vervolgens de afbeelding die de gepubliceerde pagina laadt. Vergelijk hetzelfde oog, etiket of woord. Miniaturen verbergen verschillen; sterk inzoomen toont ook bij goede foto’s pixels. Is het origineel bewogen of verkeerd scherpgesteld, kies een betere bron of maak een nieuwe foto. Een slechte export moet je eerst herstellen.

Koppel het probleem aan de volgende controle

Controleer wat de pagina werkelijk laadt

Een CMS kan het grote origineel bewaren terwijl een blok of thema een miniatuur toont. Open de afbeeldingsaanvraag in het netwerkpaneel van de browsertools. Controleer het bestand, de pixelafmetingen en de ruimte die het op de pagina inneemt.

Een miniatuur van 300 pixels wordt uitgerekt in een artikelkolom van 900 pixels. Het volledige origineel kan onnodig groot zijn: selecteer liever een passende tussenmaat in het blok of sjabloon dan de miniatuur opnieuw te comprimeren. De gekozen bron kan met de vensterbreedte veranderen. Test telefoon en desktop; lees onze gids voor responsieve afbeeldingen en de MDN-uitleg over bronkeuze en pixeldichtheid.

Kies genoeg pixels voor de weergave

Vergelijk voor een foto van 600 CSS-pixels breed bijvoorbeeld bestanden van 600 en 1200 pixels, ook op een telefoon met hoge pixeldichtheid. Controleer scherpte én bestandsgrootte. Dit zijn testvarianten, geen vaste norm.

Maak met de afbeeldingsresizer een kopie van een voldoende groot origineel en vergrendel de verhoudingen. Vergroten van 300 naar 1200 pixels levert geen nieuwe fotodetails op. Zie geschikte afbeeldingsafmetingen voor websites. Een krappe uitsnede rond een klein gezicht vermindert eveneens het aantal beschikbare pixels; controleer de afmetingen na het bijsnijden.

Controleer compressie en kleine tekst apart

Blokkerige kleurverlopen, uitgesmeerde texturen en ruis rond letters kunnen op te sterke compressie met verlies wijzen. Exporteer opnieuw vanuit de beste bron, met dezelfde afmetingen en minder compressie. Een beschadigde JPG opslaan als PNG herstelt niets.

Lees de kleinste relevante tekst in een screenshot of diagram op de bedoelde weergavegrootte. Vergelijk PNG met je huidige export via de JPG-versus-PNG-gids. Te kleine tekst vraagt soms om een nieuw ontwerp. Bewaar aparte varianten vanuit het origineel, met afmetingen en formaat in de naam, in plaats van downloads met verlies telkens verder te converteren.

100% betekent hier de werkelijke pixelgrootte in een afbeeldingsviewer: één afbeeldingspixel wordt als één schermpixel getoond. De paginazoom van de browser is een aparte instelling.

Voorbeeld: een scherpe upload wordt een wazige artikelafbeelding

Je foto van 2400 × 1600 is lokaal scherp, maar wazig in een blok van 600 pixels. De pagina laadt een miniatuur van 300 × 200. Dit is een voorbeeld van een diagnose, geen gemeten website-resultaat.

1. Bewaar het origineel en bevestig dat de pagina de miniatuur gebruikt.
2. Selecteer een geschikte grotere versie in het blok of sjabloon.
3. Vergelijk 600 × 400 en 1200 × 800 op dezelfde weergavebreedte.
4. Controleer telefoon, desktop en de werkelijk geladen bestandsgroottes.
5. Behoud de kleinste variant die belangrijke details toont.

De oplossing is een passende versie. De miniatuur verder comprimeren voegt geen detail toe. Blijft de oude afbeelding zichtbaar, controleer het opgevraagde adres en vernieuw de betreffende cache voordat je opnieuw exporteert.

Veelgestelde vragen

Maakt een andere DPI-waarde mijn afbeelding scherper?

Alleen het resolutielabel wijzigen voegt geen pixels toe. Controleer pixelafmetingen, weergave en geladen versie. Zie DPI, PPI en pixels.

Lost WebP onscherpte op?

Een ander formaat herstelt verdwenen details niet. Begin met het scherpe origineel en vergelijk kwaliteit en grootte.

Waarom ziet de mediabibliotheek er wel scherp uit?

De bibliotheek en pagina kunnen verschillende versies op verschillende groottes tonen. Vergelijk het gepubliceerde bestand met de bekeken preview.