Afbeelding van groot naar klein worden wazig

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ben Pastoor

Ben Pastoor

22/10/2020 23:12:41
Quote Anchor link
Hallo,


Op mijn site heb ik PNG afbeeldingen staan die 1000x1000 zijn. Google heeft een nieuwe tool die je site vitaliteit controleert op o.a. snelheid.
Op basis hiervan worden tips gegeven. Google geeft aan dat de afbeeldingen groot zijn en dit zeer veel invloed heeft op de laadtijd.

Zei geven ook aan dat als je een <img> element hebt van bijvoorbeeld 230x230 dat je afbeelding dan ook het beste 230x230 kan zijn zodat je niet teveel met resizen te maken hebt.

Deze info heb ik tot mij genomen en heb daarom wat verschillende formaten geprogrammeerd die meteen gemaakt worden bij het uploaden.
Voor de desktop versie zijn ze iets groter dan de mobile versie en heb daarom gebruik gemaakt van
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<picture>
    <source srcset="mobile_image.png" media="(max-width: 599px)">
    <img src="desktop.png"/>
</picture>

Echter mijn verkleinde afbeeldingen zijn wazig en het ziet niet meer uit.
Heeft er iemand tips waarom dit gebeurt? Ik snap als je van klein naar groot gaat het blokkerig word maar waarom van groot naar klein wazig?
Gewijzigd op 23/10/2020 01:20:58 door - Ariën -
 
PHP hulp

PHP hulp

27/11/2020 09:48:12
 
- Ariën -
Beheerder

- Ariën -

23/10/2020 01:21:36
Quote Anchor link
Ik heb het topic verhuisd naar het juiste forum.
 
Ozzie PHP

Ozzie PHP

23/10/2020 01:48:46
Quote Anchor link
Het zou handig zijn als je een online voorbeeld kunt laten zien. De meesten van ons hebben geen glazen bol ;)
 
Thomas van den Heuvel

Thomas van den Heuvel

23/10/2020 11:42:35
Quote Anchor link
Ik zou allereerst proberen uit te sluiten dat dit niet gewoon aan de kwaliteit van de gegenereerde afbeeldingen ligt. Heb je deze in afzondering (gewoon rechtstreeks, buiten een browser om) bekeken? Is dit de hoogst mogelijke kwaliteit waarmee je de afbeelding op de gewenste resolutie genereert? Hoe ziet deze code hiervoor uit?

Dan zou ik je stelling toetsen dat als je "van klein naar groot gaat de afbeelding blokkerig wordt". Misschien heeft een browser wel een soort van filter zodat als je een afbeelding op een grotere afmeting weergeeft dan dat deze daadwerkelijk heeft, dat de browser dit probeert te compenseren door de pixels uit te smeren, wat een mogelijk tweede verklaring voor "wazige afbeeldingen" kan zijn omdat je een afbeelding groter probeert weer te geven dan dat deze daadwerkelijk is.

(en ook dat laatste is iets wat je na zou kunnen gaan: geeft de browser de afbeelding op de juiste grootte weer, of is deze groter of kleiner waardoor mogelijk de eerder genoemde filter in werking treedt)

Meestal is het handig dat als je een bepaald probleem hebt waarvoor je geen verklaring hebt om je aannames (even) te laten varen en gewoon simpelweg nagaat / uitzoekt wat er daadwerkelijk gebeurt. Totdat je een oorzaak hebt heeft het ook geen zin om te opereren vanuit deze aannames omdat je gewoon (nog) niet weet wat er (precies) misgaat. Dit laatste kan ook een belemmering vormen bij het vinden van de oorzaak omdat je dan door een gekleurde bril kijkt waardoor je wellicht denkt "het kan nooit aan X of Y liggen". Blijkt het na verloop van tijd toch meestal iets met X of Y (of allebei) te maken te hebben :p.
 
Jop B

Jop B

23/10/2020 13:43:25
Quote Anchor link
Als je een afbeelding gaat verkleinen dan word het aantal pixels ook minder en voor een vloeiende / scherpe afbeelding heb je pixels nodig.

Heb je je ook al eens verdiept in lazy loading? Een betere kwaliteit afbeelding is nu eenmaal groter en dat gaat weer ten koste van je laadtijd.
Maar met lazy loading laad je de afbeelding pas als het element in beeld komt, bijvoorbeeld 25%.

Grote sites als bijvoorbeeld BOL gebruiken deze techniek omdat dit om heel wat afbeelding gaat.
 
Ad Fundum

Ad Fundum

24/10/2020 18:09:57
Quote Anchor link
De scherpte van een afbeelding wordt enkel bepaald door de korrelgrootte. In gerasteriseerde digitale afbeeldingen zoals plaatjes op internet (GIF, JPG, PNG,..) is dat gelijk aan het aantal beeldpunten of pixels. Tot zover niets nieuws.

Maar wat wel relatief nieuw is, is dat met de komst van retina-schermen pixels niet langer pixels zijn. Vaak is het aantal pixels ('device pixels') van een retinascherm groter dan wat je hebt opgegeven in CSS ('CSS pixels'), waardoor een afbeelding kollerig (of wazig, als de grafische chip ze uitsmeert) over kan komen.

De oplossing is om de korrelgrootte te vergroten, zeg te verdubbelen voor mobiele browsers. Dan zou je dus uitkomen op afbeeldingen van 460x460 beeldpunten.

Meer info:
https://fronteers.nl/congres/2012/sessions/a-pixel-is-not-a-pixel-peter-paul-koch
https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
 
Ozzie PHP

Ozzie PHP

24/10/2020 18:16:57
Quote Anchor link
Het lijkt me handiger als de topic starter eerst eens met een voorbeeldje komt, voordat hier allerlei theorieën worden geuit enkel op basis van een opmerking "m'n plaatjes zijn wazig".
 
Thomas van den Heuvel

Thomas van den Heuvel

25/10/2020 00:10:00
Quote Anchor link
Misschien is het een kwestie van de bril een keer poetsen :).
 
Ozzie PHP

Ozzie PHP

25/10/2020 02:26:57
Quote Anchor link
Thomas van den Heuvel op 25/10/2020 00:10:00:
Misschien is het een kwestie van de bril een keer poetsen :).

:-)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.