[HTML] Foto's en afbeeldingen op een webpagina

[Buur75]

Beste mensen, een wellicht erg algemene vraag, maar wat is tegenwoordig de gebruikelijke manier om een foto op een website te plaatsen? Lees even verder waar ik tegenaan loop:

Ik zie steeds vaker dat het fotobestand wat betreft het aantal pixels vele malen groter is, dan op de website wordt getoond. De browser moet dan het werk doen van het 'resizen', en dat doet hij blijkbaar goed, maar dit lijkt me toch niet echt de bedoeling? Ik zie regelmatig Wordpress-sites waar foto's in zijn geplaatst die rechtstreeks van de mobiele telefoon komen, en op misschien slechts een kwart van hun originele formaat vertoond (hoeven te) worden!

Toen ik nog voor mijn werk websitejes maakte (dat was in 1965) zorgden we er voor dat de foto net zo groot was als de viewspace, dus, was een kolom met een foto daarin 500 pixels breed, dan maakte je die foto zelf 500 pixels breed en die vertoonde je op de website met een <img>-tag.

Ik snap echter dat een website van nu niet hetzelfde is als vroeger. Je hebt nu te maken met een oneindige variatie aan schermresoluties, mede dankzij mobiele apparaten, waardoor een website-design vanzelfsprekend 'responsive' moet zijn, en dan heb ik het nog niet eens over schermen met een hogere pixel-dichtheid, zoals retina displays.

Hoe krijg je het tegenwoordig voor elkaar om bijvoorbeeld foto's op een fotoportfolio-website op een retina-scherm er prachtig uit te laten zien, zonder dat de website-versie van diezelfde site gelijk je halve databundel opmaakt, terwijl het grootste gedeelte van die data helemaal niet getoond wordt?

Ik heb er veel over gelezen, maar ik weet niet wat tegenwoordig de gangbare methode is. Dit zijn mogelijke oplossingen:

- Kan dit alleen met mediaqueries?
- Gebruikt men tegenwoordig het srcset-attribuut van de img-tag? En dan met of zonder het sizes-attribuut?
- Gebruikt men tegenwoordig de <picture>-tage met <source>-tags daar in?
- ... (andere mogelijkheid?)

En:
- Hoeveel verschillende versies van de afbeelding moet ik maken voor een foto die ik full-screen wil tonen (wat is gebruikelijk, of bepaal ik dat zelf)?

Ik ben benieuwd,,,!

[MAX3400]

Volgens mij zoek je naar iets als thumbnails?

of
En pas als je erop klikt, opent het volledige (grote) bestand?

En in bijna alle gevallen: dit is server-side. Dus iemand zet een bestand op de server; die gaat "alvast" automatisch de kleine versies genereren en middels de bijbehorende code/gallery, kan je dus snel de kleine plaatjes als portfolio / produkten vermelden.

[Buur75]

Die ken ik, ik snap wat je bedoelt, dat is inderdaad de oplossing voor al die wordpress-sites die ik heb gezien, maar ik bedoel iets anders. Misschien moet ik mijn vraag eenvoudiger stellen:

Stel ik wil meerdere schermvullende foto's die je na elkaar te zien krijgt. Voor een desktopcomputer met een groot retinascherm is het wellicht niet erg om een foto van meer dan een Megabyte te downloaden, maar op een mobiel apparaat met een beperkte databundel, eventueel slechte internet-verbinding en een kleiner scherm is dat te veel. Als ik daar een schermvullende foto wil tonen, heb ik minder pixels nodig, dus ik bied ook een kleinere versie aan, die op dat scherm beeldvullend is. Maar hoe? Welke html-tags of andere functionaliteit gebruik ik daarvoor? Een script? Mediaqueries? Is er een regel voor het aantal verschillende resolutie-versies dat je aanbiedt voor een schermvullende foto?
Tot nu toe ben ik hier gekomen, maar ik wil weten wat tegenwoordig de standaard manier is.

[RobIII]

Buur75 schreef op dinsdag 21 december 2021 @ 16:23:
maar ik wil weten wat tegenwoordig de standaard manier is.

Er is (zoals zo vaak in softwareontwikkeling) geen 'standaard' manier of "dé manier". Kies de manier die het best bij jou aansluit / waar je je het beste bij voelt / wat het beste past in jouw project.

[Johnny]

Ja, het gebruik van srcset attributen en <picture> elementen is tegenwoordig de "standaard" manier. De reden is voor schermen met hogere pixeldichtheid en schaling (voornamelijk Apple Retina schermen). En ja het is erg onhandig dat je dan op je server tig versies van dezelfde afbeelding moet hebben, en je HTML code daar veel langer door wordt en de browser dan alsnog een afbeelding binnenhaalt die onnodig groot is.

Deze manier verbruikt dus meer opslagruimte op de server, dataverkeer voor transport en rekenkracht op de client dan noodzakelijk is zijn om een afbeelding met een bepaalde hoeveelheid detail weer te geven omdat bij het schalen op de client een deel wordt uitgefilterd.

Kan dat dan niet beter en efficiënter? Ja, in theorie wel. Ongeveer 20 jaar geleden was er veel interesse in nieuwe progressieve afbeeldingsformaten op basis van Pyramid representation en afgeleide technieken.

Daarmee met slechts één bestand op de server naar een deel naar de browser kan sturen; hoe meer je van dat bestand stuurt hoe meer detail de afbeelding bevat. Maar dit vereist ondersteuning in de webserver en de browser die onderling moeten afstemmen hoeveel data nodig is op basis van de gewenste weergavegrootte. Het implementeren hiervan kan in potentie het web sneller, energiezuiniger maken en tegelijkertijd betere afbeeldingskwaliteit bieden. Helaas heeft het geen prioriteit bij de internetgiganten. Google is niet verder gekomen dan WEBP wat niet veel beter is dan standaard JPEG en Apple heeft HEIC wat ook niet veel meer is dan een efficiëntere compressie op basis van H.265 (HEVC) video.

Het voordeel van de nieuwe <picture> element is wel dat je nu een alternatieve afbeelding kan meegeven dus een nieuw afbeeldingsformaat zou kunnen introduceren met een fallback naar JPEG er bij. De patenten van JPEG 2000 verlopen binnenkort verlopen dus ligt het voor de hand dat we uiteindelijk wel progressieve afbeeldingen gaan gebruiken.

[DJMaze]

Johnny schreef op dinsdag 21 december 2021 @ 17:10:
Ja, het gebruik van srcset attributen en <picture> elementen is tegenwoordig de "standaard" manier. De reden is voor schermen met hogere pixeldichtheid en schaling (voornamelijk Apple Retina schermen). En ja het is erg onhandig dat je dan op je server tig versies van dezelfde afbeelding moet hebben, en je HTML code daar veel langer door wordt en de browser dan alsnog een afbeelding binnenhaalt die onnodig groot is.

En dan praat je nog niet over 2x zoveel ivm nieuw foto formaat dat beter is dan jpeg
Ik doel dan op: WebP