Zijn er standaard afbeelding afmetingen in webdevelopment?

[HollowGamer]

Mijn vraag
Hopelijk is mijn vraag niet de vaag, maar ik zie een beetje door de bomen het bos niet meer.

Ik kom bijvoorbeeld de volgende links:
http://tim-stanley.com/po...-web-digital-image-sizes/ (oud)
https://www.mainstreethos...a-image-size-cheat-sheet/ (social-media gericht)

Zijn er standaard afmetingen? Of aan te raden afmetingen?
Ik wil graag thumbnails maken van bijvoorbeeld video's, maar ook voor profielen bijvoorbeeld.
Deze worden ook gebruikt op een mobiel/tablet en die zou ik graag laten mee schalen met het device.

Relevante software en hardware die ik gebruik
Laravel 7
Vue

Wat ik al gevonden of geprobeerd heb
- Zoekmachine: niet echt heel duidelijk

[TERW_DAN]

Bij mijn weten zijn er niet echt standaarden voor, meer gewoon best practices. Sowieso zou ik kijken wat er lekker in je design past. Heb jij een thumbnail van 160x90 pixels voor je video, dan zou ik je afbeelding ook dat formaat maken.
En je kunt natuurlijk altijd afwijkende formaten pakken voor verschillende devices. Dan kun je op mobiel wat grootte inleveren, die je op een desktop wel kunt gebruiken.

[HollowGamer]

TERW_DAN schreef op woensdag 9 september 2020 @ 14:05:
[..]

En je kunt natuurlijk altijd afwijkende formaten pakken voor verschillende devices. Dan kun je op mobiel wat grootte inleveren, die je op een desktop wel kunt gebruiken.

Wordt dit veel gedaan? Kan je met CSS3 tegenwoordig niet goed schalen? Ik gebruik een aantal frontend frameworks en daar lijken de afbeeldingen mee te schalen en kan je ook een ratio opgeven.

[TERW_DAN]

Je kunt prima schalen, maar de vraag is hoe optimaal dat werkt. Als al je afbeeldingen op desktop fullscreen als achtergrond wil hebben, maar mobiel kleiner wil weergeven, dan is het de moeite om daar aparte afbeeldingen voor te pakken.
Iets waar je prima het <picture> element voor kan gebruiken.

Of het veel gedaan wordt weet ik niet. Er zijn genoeg websites waarbij een plaatje van 2000x2000 pixels gewoon gecropped wordt naar 100x100 pixels (bij wijze van spreken), maar je voor die 100x100 pixels wel gewoon een 4MB foto aan het binnen hengelen bent. Da's de wat extreme versie, maar het gebeurt niet overal netjes.

[Sadieka]

Dit is een afweging tussen de bestandsgrootte van de afbeelding en de laadtijd van je webpagina die je zelf zult moeten maken. Een afbeelding van 1000x1000 zal een grotere bestandsgrote hebben dan een afbeelding van 100x100. Als je de afbeelding altijd toont op 100x100 kun je deze dus beter eerst zelf verkleinen. zodat de gebruiker een kleiner bestand hoeft te downloaden.

Het verschil is bestandsgrootte tussen een afbeelding van 100x100 en 200x200 is natuurlijk een stuk kleiner, stel je gebruikt beide formaten dan kun je overwegen 1 afbeelding van 200x200 te genereren en deze met CSS te verkleinen naar 100x100. Hier zul je je eigen keuzes in moeten maken afhankelijk van jouw toepassing.

[ Voor 4% gewijzigd door Sadieka op 09-09-2020 14:19 ]

[Johnny]

Het ideaal, waar jij naar zoekt zou zijn dat afbeeldingen exact met dezelfde resolutie van het beeldscherm worden weergegeven. Dan heb je maximale kwaliteit tegenover minimale overhead.

Het probleem is dat je meerdere resoluties, DPI's, scherm/vensterformaten moet ondersteunen op het web. En je niet van tevoren weet wat je bezoeker heeft.

De theoretische oplossing is een afbeeldingformaat wat progressief word ingeladen en je webserver en browser samen beslissen wanneer er voldoende afbeelding is binnengehaald en dan stoppen.

De praktijk is dat je JPG en PNG hebt waarbij dat niet kan. Je moet dus zelf een doelresolutie kiezen (bijvooorbeeld 1920x1080 full HD) die voor de meeste gebruikers wel OK is en daar je afbeeldingen op afstemmen zonder dat ze te groot worden dat de boel traag wordt.

Dan heb je tegenwoordig ook nog het srcset attribuut voor afbeeldingen voor displays met hoge DPI's (vooral Apple apparaten). Hiermee kan je dan een hogere resolutie serveren, maar je moet dan wel op je webserver beschikbaar hebben en het is vervelend om handmatig van iedere afbeelding meerdere versies te maken dus dat moet je dan weer automatiseren.

[PainkillA]

Johnny schreef op woensdag 9 september 2020 @ 14:23:
Het ideaal, waar jij naar zoekt zou zijn dat afbeeldingen exact met dezelfde resolutie van het beeldscherm worden weergegeven. Dan heb je maximale kwaliteit tegenover minimale overhead.

Het probleem is dat je meerdere resoluties, DPI's, scherm/vensterformaten moet ondersteunen op het web. En je niet van tevoren weet wat je bezoeker heeft.

De theoretische oplossing is een afbeeldingformaat wat progressief word ingeladen en je webserver en browser samen beslissen wanneer er voldoende afbeelding is binnengehaald en dan stoppen.

De praktijk is dat je JPG en PNG hebt waarbij dat niet kan. Je moet dus zelf een doelresolutie kiezen (bijvooorbeeld 1920x1080 full HD) die voor de meeste gebruikers wel OK is en daar je afbeeldingen op afstemmen zonder dat ze te groot worden dat de boel traag wordt.

Dan heb je tegenwoordig ook nog het srcset attribuut voor afbeeldingen voor displays met hoge DPI's (vooral Apple apparaten). Hiermee kan je dan een hogere resolutie serveren, maar je moet dan wel op je webserver beschikbaar hebben en het is vervelend om handmatig van iedere afbeelding meerdere versies te maken dus dat moet je dan weer automatiseren.

opzich klopt alles wat je zegt maar `displays met hoge DPI's (vooral Apple apparaten).` geld eigenlijk eerder andersom tegenwoordig. gold eigenlijk alleen 5 tot 10 jaar geleden.

Android toestellen hebben vaak een hogere pixel dichtheid.

iphone11 = 458ppi
samsung s10 = 540ppi

1 of 2 generaties terug heb je het over

iphone 8 = 326ppi
samsung s8 = 570ppi

[Matis]

Waar je mogelijk naar op zoek bent, is functionaliteit zoals bijvoorbeeld Fastly ze aanbiedt: https://docs.fastly.com/en/guides/resizing-images
https://www.fastly.com/pr...rmance/image-optimization

[ Voor 21% gewijzigd door Matis op 09-09-2020 15:41 ]

[armageddon_2k1]

Er zijn toch gewoon manieren om optimaal responsive images te maken met verschillende source-sets?
https://developer.mozilla...bedding/Responsive_images

Afhankelijk van de window-size en DPI worden er andere plaatjes binnen gehaald. Je hebt dan ook weer tooltjes die de source-sets voor je maken.

[Ed Vertijsment]

Tip 1: kijk naar: wat je use zegt dat je nodig hebt.
Tip 2: whatever je nodig hebt: x2 (want high-res schermen)
Tip 3: Als er geen format is, gebruik een verhouding: Wikipedia: Aspect ratio (image).

[Johnny]

PainkillA schreef op woensdag 9 september 2020 @ 15:10:
[...]


opzich klopt alles wat je zegt maar `displays met hoge DPI's (vooral Apple apparaten).` geld eigenlijk eerder andersom tegenwoordig. gold eigenlijk alleen 5 tot 10 jaar geleden.

Android toestellen hebben vaak een hogere pixel dichtheid.

iphone11 = 458ppi
samsung s10 = 540ppi

1 of 2 generaties terug heb je het over

iphone 8 = 326ppi
samsung s8 = 570ppi

Ik zeg apparaten omdat ik ook tablets/laptops/desktop computers mee bedoel.

armageddon_2k1 schreef op woensdag 9 september 2020 @ 17:00:
Er zijn toch gewoon manieren om optimaal responsive images te maken met verschillende source-sets?
https://developer.mozilla...bedding/Responsive_images

Afhankelijk van de window-size en DPI worden er andere plaatjes binnen gehaald. Je hebt dan ook weer tooltjes die de source-sets voor je maken.

Dit is inderdaad het beste mogelijke op het moment, en voor webdevelopers ook normaal en helemaal geweldig dat dit nu mogelijk is. Maar voor iemand die nieuw is met webdevelopment is het compleet gestoord dat we na 30 jaar technologische ontwikkeling tooltjes hebben die op de server afbeeldingen resizen naar een groot aantal formaten en dan in de HTML diverse links moeten plaatsen linken zodat dat gebruiker altijd een afbeelding krijgt die nooit precies de juiste resolutie heeft en dat dit als "optimaal" wordt gezien.

[Postman]

Nou ja gestoord... Het blijft een statisch bestand, hoe zie je het voor je dat dit voor iedereen perfect weergegeven wordt en ook nog eens niet te groot is.

Er is trouwens wel een oplossing: SVG (en andere vector formaten).

[DJMaze]

armageddon_2k1 schreef op woensdag 9 september 2020 @ 17:00:
Er zijn toch gewoon manieren om optimaal responsive images te maken met verschillende source-sets?
https://developer.mozilla...bedding/Responsive_images

Afhankelijk van de window-size en DPI worden er andere plaatjes binnen gehaald. Je hebt dan ook weer tooltjes die de source-sets voor je maken.

Maar die ziet niet of ie de jpeg of webp moet laden. Webp is beter, maar niet elke browser ondersteunt het.
Wek dan met <figure>

[Wolfos]

Voor advertenties in ieder geval wel.

[ Voor 12% gewijzigd door Wolfos op 11-09-2020 09:03 ]

[Johnny]

Postman schreef op donderdag 10 september 2020 @ 20:52:
Nou ja gestoord... Het blijft een statisch bestand, hoe zie je het voor je dat dit voor iedereen perfect weergegeven wordt en ook nog eens niet te groot is.

Er is trouwens wel een oplossing: SVG (en andere vector formaten).

Er zijn een hoop rasterformaten die progressieve weergave ondersteunen. Zelfs JPEG heeft deze mogelijkheid al 27 jaar. Sindsdien zijn er wel betere afbeeldingsformaten ontwikkeld (op basis van wavelets met meerdere resoluties via Pyramid representation zoals JPEG2000) maar moderne webbrowsers ondersteunen dit niet.

Als je een hoge resolutie progressieve afbeelding serveert en slechts een kwart, de helft of driekwart van de afbeelding doorstuurt is het resultaat een afbeelding met een lagere resolutie.

Het vooraf genereren van thumbnails/responsive/retina varianten gebeurde 25 jaar geleden niet. Internet was enkel op een desktopcomputer met VGA resolutie of iets hoger en de verbinding was meestal traag. Men was al blij dat er afbeeldingen waren, soms maakte men thumbnails. Tegenwoordig heb je een enorme diversiteit aan weergaves en verbindgingsnelheden. Je moet nu vaak bijna 10 varianten per afbeelding maken, en is de noodzaak voor progressieve afbeeldingsformaten een stuk hoger.

[ Voor 7% gewijzigd door Johnny op 11-09-2020 09:50 ]