Responsive design en kwaliteit afbeeldingen

[Emiel L]

Een paar dagen geleden heb ik mijn nieuwe website (zie signature) online gezet. Het is een voor mij grotendeels experimenteel ding; het back-end is gebouwd op nodejs en nginx, het front-end is grotendeels dynamisch, uiteraard met de nodige javascript. Het was een leerzame oefening voor me; alle web-ervaring die ik hiervoor had bestond uit wat PHP en fixed-size web spul. Anyway...

Ik heb voor de site de keuze gemaakt deze volledig responsive op te bouwen, dus de layout schaalt waar mogelijk mee met de schermgrootte. Afbeeldingen worden allemaal op een goede (lees: veel te grote resolutie) aangeboden, waardoor het er op moderne mobiele apparaten met een hoge resolutie en op mijn retina macbook pro superstrak uitziet. Ik was dus helemaal happy met het resultaat 😃

Nu wil het toeval dat ik ook af en toe actief ben in de diverse fotografie-topics op dit forum en ik daar m'n plaatjes voor geïnteresseerde kijkers graag ook groot wil aanbieden. Maar ik wil weer niet dat zo iemand door de afbeelding heen moet scrollen; hij wordt nu dus geschaald naar de grootte van het beeldscherm. Wederom, op m'n eigen spullenboel ziet dat er superstrak uit.

Nu heb ik gepoogd deze foto van m'n hond in het dierentopic te plaatsen en al snel kwam de feedback dat hij 'erg onscherp' zou zijn. Nou is de foto niet perfect, maar 'erg onscherp' is hij ook weer niet. Het blijkt dat sommige combinaties van browsers (bijvoorbeeld firefox op windows 7) een niet optimaal resultaat geven.

Dus nu de crux van dit hele verhaal: Wat zijn de best practices om afbeeldingen wel responsive te kunnen aanbieden en tegelijk een goede weergavekwaliteit te leveren? Ik kan afbeeldingen op de server wel schalen, maar als het anders kan (in verband met caching) doe ik het liever anders...

Hints? Tips?

[Fiber]

Linkje naar 'deze foto van m'n hond in het dierentopic'...?

[Emiel L]

Emiel L in "[Verzamel] Dieren - Deel 3"

[Fiber]

Niks mis mee hier. (Google Chrome op een Macbook Air.)

[Emiel L]

Nee, inderdaad. Op een Mac met chrome en safari gaat alles prima. Firefox op de Mac is al wat minder en de meest negatieve feedback komt uit de hoek Windows/Firefox. Helaas heb ik die combinatie zelf niet (het Windows deel ontbreekt), dus heb nog niet zelf gezien hoe erg het is...

[Fiber]

Klinkt dus als een Firefox gerelateerd probleem...

[Mils]

Windows / IE 11

Ziet er prima uit.

[Ramon]

Ik zou een screenshot willen maken van de foto op Firefox 28 op Windows 8.1, maar imgur.com kan die filesize niet handlen (png) of is down ofzo. Maar het ziet er prima uit, zelfde in IE11. Misschien zit er in een bepaalde versie van Firefox een fout waardoor de javascript die de vergrootte thumb-size versie niet vervangt voor de full-size versie?

Maar als we het over responsive design hebben. Het is natuurlijk niet de bedoeling om ieder apparaat dezelfde resolutie foto te sturen. Een telefoon met een schermresolutie van 800*480 of zelfs 1280*720 heeft niets aan een afbeelding van 2560*1707 pixels. Sterker nog het is alleen maar nadelig want het duurt langer voordat de pagina geladen is en het kost meer dataverkeer. Ook het 24" scherm met een resolutie van 1920*1200 wat aangesloten is op mijn desktop heeft niets aan een foto met die hoge resolutie.

Wat jij als website bouwer dus moet doen is uitlezen welke resolutie een bezoeker heeft en de desbetreffende passende resolutie van jouw foto's naar die bezoeker sturen. En dan de foto op zo'n manier weergeven dat de browser niet zelf hoeft te schalen.

[Emiel L]

Ramon schreef op zaterdag 22 februari 2014 @ 21:49:
Maar als we het over responsive design hebben. Het is natuurlijk niet de bedoeling om ieder apparaat dezelfde resolutie foto te sturen. Een telefoon met een schermresolutie van 800*480 of zelfs 1280*720 heeft niets aan een afbeelding van 2560*1707 pixels. Sterker nog het is alleen maar nadelig want het duurt langer voordat de pagina geladen is en het kost meer dataverkeer. Ook het 24" scherm met een resolutie van 1920*1200 wat aangesloten is op mijn desktop heeft niets aan een foto met die hoge resolutie.

Wat jij als website bouwer dus moet doen is uitlezen welke resolutie een bezoeker heeft en de desbetreffende passende resolutie van jouw foto's naar die bezoeker sturen. En dan de foto op zo'n manier weergeven dat de browser niet zelf hoeft te schalen.

Dat ben ik met je eens, binnen bepaalde grenzen. Omlaag schalen vanaf een veel te hoge resolutie geeft een mooier resultaat dan omlaag schalen van een iets te hoge resolutie. Natuurlijk zijn de voorbeelden die je aanhaalt helemaal valide, en daar is zeker nog een optimalisatieslag te maken. Gezien de enorme hoeveelheden mogelijkheden qua resoluties en schermafmetingen van browsers is het onmogelijk om in elke mogelijke resolutie afbeeldingen neer te zetten. Wel mogelijk is op de server de afbeeldingen te schalen en dat gegenereerde resultaat op te sturen. Maar wat dan als de gebruiker zijn scherm resized? En wat gaat dat met de performance van m'n server doen... vanuit nodejs met imagemagick duurt het ongeveer 300ms om een op maat gegenereerde afbeelding te genereren. Het downloaden van een te grote afbeelding is meestal sneller.

Maargoed... valide punten en afwegingen om te maken. One size fits all is nog niet een optimale oplossing.

[Ramon]

Uiteraard moet je niet omhoog gaan schalen, daar had niemand het over toch?

Wat betreft resolutie die je target kan je prima een doorsnede pakken van de meest gebruikte resoluties, die vind je door bijvoorbeeld op http://gs.statcounter.com/ te kijken.

Op het moment dat jij een afbeelding upload dan laat je de server de afbeelding naar alle vooringestelde resoluties scalen en voor die resoluties pas je je site aan, zodat je site de bij de resolutie horende afbeelding toont. Je kan er dan altijd nog voor kiezen om voor alle andere [onbekende] resoluties alsnog de full-size afbeelding te tonen.

[_Thanatos_]

Wat ik tegenwoordig doe voor afbeeldingen die niet-fullscreen hoeven, dus in een laptop content voorkomen: de afbeelding opslaan op 2-3x de resolutie die hij moet gaan hebben op 96dpi (de meeste desktops) en dan opslaan met 0% JPEG kwaliteit. That's right, 0%.

De desktops schalen em dan zo ver terug dat je nagenoeg geen verschil ziet (wat betekent: prima genoeg voor web) en op een mobiel zijn de pixels zo klein dat je de artefacten niet ziet, maar de hogere resolutie wel. En als bonus kan een foto zomaar de helft minder bytes groot worden.

[FotW]

Emiel L schreef op zaterdag 22 februari 2014 @ 21:25:
Nee, inderdaad. Op een Mac met chrome en safari gaat alles prima. Firefox op de Mac is al wat minder en de meest negatieve feedback komt uit de hoek Windows/Firefox. Helaas heb ik die combinatie zelf niet (het Windows deel ontbreekt), dus heb nog niet zelf gezien hoe erg het is...

Ik dacht al dat het aan mij lag, ik weet niet hoe je voor elkaar krijgt (dit heb ik werkelijk nog nooit gezien) maar je hele site schaalt op Windows (7, Firefox, IE10 en Chrome) dus inclusief tekst. Ik heb geprobeerd het te debuggen maar dit lijkt mij aan de serverkant mis te gaan.

Ter illustratie:

[ Voor 5% gewijzigd door FotW op 24-02-2014 09:39 ]

[Orion84]

Mils schreef op zaterdag 22 februari 2014 @ 21:45:
Windows / IE 11

Ziet er prima uit.

Ik (de oorspronkelijke 'klager') heb het net ook even in IE 9 geprobeerd en die gedraagt zich duidelijk anders. Firefox (in elk geval onder win7) heeft de neiging om bij het schalen een tamelijk soft resultaat op te leveren. IE 9 geeft wel een scherp resultaat, wellicht zelfs wat te 'scherp', ik zie de nodige aliassing verschijnen.

Het suffe is, dat als ik in Firefox "view background image" doe, de scaling zich anders gedraagt en de scherpte wel behouden lijkt te blijven (en zonder de aliassing die ik bij IE 9 zie).

Ik heb even wat screenshots gemaakt (bewust met een extra klein browser window om het effect wat duidelijker zichtbaar te maken).

Firefox (erg soft):


Firefox view background image (niet of nauwelijks verlies aan scherpte):


IE 9 (geen verlies aan scherpte, maar wel wat aliassing):


Wellicht dat IE 10 en/of 11 dit al weer wat beter doen?

[Emiel L]

FotW schreef op maandag 24 februari 2014 @ 09:34:
[...]
Ik dacht al dat het aan mij lag, ik weet niet hoe je voor elkaar krijgt (dit heb ik werkelijk nog nooit gezien) maar je hele site schaalt op Windows (7, Firefox, IE10 en Chrome) dus inclusief tekst. Ik heb geprobeerd het te debuggen maar dit lijkt mij aan de serverkant mis te gaan.

Nice 😃. De tekst schaalt met een paar media queries, vooral om op mobiele devices niet zo (relatief) achterlijk groot te worden. De standaard font size van Windows is al wat aan de kleine kant, en met een kleiner browserscherm wordt 't kriebelig klein.

[Emiel L]

Orion84 schreef op maandag 24 februari 2014 @ 09:54:
[...]

Ik (de oorspronkelijke 'klager') heb het net ook even in IE 9 geprobeerd en die gedraagt zich duidelijk anders. Firefox (in elk geval onder win7) heeft de neiging om bij het schalen een tamelijk soft resultaat op te leveren. IE 9 geeft wel een scherp resultaat, wellicht zelfs wat te 'scherp', ik zie de nodige aliassing verschijnen.

Het suffe is, dat als ik in Firefox "view background image" doe, de scaling zich anders gedraagt en de scherpte wel behouden lijkt te blijven (en zonder de aliassing die ik bij IE 9 zie).

Ik heb even wat screenshots gemaakt (bewust met een extra klein browser window om het effect wat duidelijker zichtbaar te maken).

Firefox (erg soft):
[afbeelding]

Wellicht dat IE 10 en/of 11 dit al weer wat beter doen?

Die eerste kan ik op de mac met firefox ook reproduceren, maar dat lukt niet bij alle browservensterafmetingen. Soms is het haarscherp, en soms zo soft als op de screenshot. Het is een wat apart fenomeen.

[Bosmonster]

Dat is nu eenmaal hoe de browsers hun afbeeldingen schalen. Dat heeft niks te maken met responsive en is al helemaal niet iets waar je iets aan wilt gaan doen als developer.

Enige waar je enigszins rekening mee kunt houden als developer is dat je, waar mogelijk, afbeeldingen wel in verhouding schaalt. Dus een 100x100 afbeelding wordt 50x50 en niet 63x63. Maar met een fluid design is dat simpelweg niet altijd mogelijk, zeker niet voor content-afbeeldingen.

Verder trouwens een tip: Maak je tekst niet zoveel kleiner op mobiel. Responsive is dat je site zich aanpast aan de schermgrootte, niet dat je simpelweg gewoon je hele site, inclusief tekst, 1-op-1 gaan lopen schalen Redelijk voorbeeld (iets overdone, maar geeft wel een goed beeld van de mogelijkheden): http://www.smashingmagazine.com/

[ Voor 72% gewijzigd door Bosmonster op 24-02-2014 10:43 ]

[Emiel L]

Ik heb e.e.a nu aangepast. Voor de grote weergave wordt in javascript gekeken naar de grootte van de browser, en hiervoor wordt op de server een nieuwe afbeelding gegenereerd en weergegeven. Voor retina devices zou een dubbele resolutie versie gegenereerd moeten worden, hoop ik 😃

Mocht de javascript 't niet doen, dan krijg je eerst nog de thumbnail versie (die voor veel devices ook al voldoende resolutie heeft) te zien...

[ Voor 20% gewijzigd door Emiel L op 24-02-2014 12:26 ]

[Bosmonster]

Voor de grote weergave wordt in javascript gekeken naar de grootte van de browser, en hiervoor wordt op de server een nieuwe afbeelding gegenereerd en weergegeven.

Serverside responsive!

[ Voor 80% gewijzigd door Bosmonster op 24-02-2014 13:24 ]