Webdesign - embed photos responsively

Screen resolutions

*Google Photos high quality = <= 16MP

sources

• https://www.teoalida.com/database/screenresolution/
• http://gs.statcounter.com/screen-resolution-stats/desktop/worldwide
• https://www.w3counter.com/globalstats.php
• https://en.wikipedia.org/wiki/List_of_common_resolutions
• names from coolblue monitors and laptops (option not available for tablets)
• https://ux.stackexchange.com/questions/6929/common-screen-resolution

WIDTH	HEIGHT	RATIO	NAME	MP	statcounter	w3counter	TOP PERIOD
1024	768	4:3	XGA	0,8		6,12
1440	900	8:5			3,02	2,50
1600	900	16:9	HD+ (900p)	1,4		2,20
4800	2700	16:9	boossy's web format²
6000	4000		grootste foto's nu	24
8192	4320	17:9	8K (UHD)	35
1280	800	8:5	Wide XGA	1,0		2,17	2009
1366	768	16:9		1,0	11,70	11,51	2014-2015
1920	1080	16:9	Full HD (1080p)	2	9,04	6,83	2020
1800	1200	3:2	Wide UXGA	2			2020
1920	1200	8:5	Wide UXGA	2			2020
2560	1440	16:9	Quad HD (1440p) WQHD / Wide QXGA	4			2025
3440	1440	21:9	Quad HD (1440p) UWQHD	5			2025
3840	2160	16:9	4K (UHD)*	8			2030
4096	2160	17:9	4K (UHD)*	9			2030
5120	2880	16:9	5K	15			2035

*Difference UHD - 4K?

see: https://www.image-engineering.de/library/technotes/991-separating-sd-hd-full-hd-4k-and-8k

² Boossy's web format

You want a web friendly format. Then the file size of your pictures is preferably between 60 & 500 KB, and definitely lower than 1 MB (https://barnard.edu/communications/web-tutorials/web-images).

dpi vs ppi

• eerst resizen naar max. 4800x2700 (https://bulkresizephotos.com)
• vervolgens https://tinypng.com/

Bulk Resize Photos

Echt een heel handige tool.

Indien de foto's allemaal een ander formaat hebben, kun je bij bulkresizephotos.com ook kiezen voor langste zijde.

De beeldkwaliteit zet je niet op 100% (want dan zijn ze vaak nog te groot voor tinypng, die bestanden aanvaardt tot max. 5MB), maar laat je ook niet op de standaard 75% staan. Ik nam de proef op de som:

• 28 foto's, gaande van 10MB (4212x6318) tot 24MB (5017x7264)
• test1: resizen, langste zijde 4212px, beeldkwaliteit 100%: 6,7MB (4212x2808) tot 11,3MB (2909x4212)
• test2: resizen, langste zijde 4212px, beeldkwaliteit 75%: 417KB (2808x4212) tot 1463KB (4212x2808)
• uiteindelijk: resizen,
  • langste zijde 4212px (de kortste lengte van de originele foto's dus),
  • beeldkwaliteit 96%
  • 2,2MB (4212x2808) tot 4,7MB (2909x4212)

TinyPNG

• als ik die 28 afbeeldingen nu verklein via TinyPNG, krijg ik volgend resultaat:
• 211KB (3378x4212) tot 781KB (4212x2808)

Je kunt je de vraag stellen of je dan niet beter Bulk Resize Photos kunt gebruiken met een lagere kwaliteit dan de standaard 75%...

En ik ben niet alleen: https://theadminbar.com/the-best-online-image-compression-services-compared/

Als ik Bulk Resize Photos gebruik met kwaliteit 48%, dan kom ik uit op 238KB tot 822KB.

Maar zoals het artikel al aangeeft:

• Bulk Photo Resize – For Resizing, Not Compressing
• TinyPNG – Simple and Effective

Embed code for Google Photos

https://www.publicalbum.org/blog/embedding-google-photos-albums