Afbeelding van groot naar klein worden wazig
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)
1
2
3
4
2
3
4
<picture>
<source srcset="mobile_image.png" media="(max-width: 599px)">
<img src="desktop.png"/>
</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 -
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.
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.
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
Thomas van den Heuvel op 25/10/2020 00:10:00:
Misschien is het een kwestie van de bril een keer poetsen :).
:-)