Webdesign - embed photos responsively
Screen resolutions
*Google Photos high quality = <= 16MP
sources
WIDTH |
HEIGHT |
RATIO |
NAME |
MP |
statcounter |
w3counter |
TOP PERIOD |
6000 |
4000 |
|
grootste foto's nu |
24 |
|
|
|
1800 |
1200 |
3:2 |
Wide UXGA |
2 |
|
|
2020 |
1024 |
768 |
4:3 |
XGA |
0,8 |
|
6,12 |
<2007-2008 |
1280 |
800 |
8:5 |
Wide XGA |
1,0 |
|
2,17 |
2009 |
1440 |
900 |
8:5 |
|
|
3,02 |
2,50 |
|
1920 |
1200 |
8:5 |
Wide UXGA |
2 |
|
|
2020 |
1366 |
768 |
16:9 |
<none> |
1,0 |
11,70 |
11,51 |
2014-2015 |
1600 |
900 |
16:9 |
HD+ (900p) |
1,4 |
|
2,20 |
|
1920 |
1080 |
16:9 |
Full HD (1080p) |
2 |
9,04 |
6,83 |
2020 |
2560 |
1440 |
16:9 |
Quad HD (1440p) WQHD / Wide QXGA |
4 |
|
|
2025 |
3840 |
2160 |
16:9 |
4K (UHD)* |
8 |
|
|
2030 |
4800 |
2700 |
16:9 |
boossy's web format² |
|
|
|
|
5120 |
2880 |
16:9 |
5K |
15 |
|
|
2035 |
4096 |
2160 |
17:9 |
4K (UHD)* |
9 |
|
|
2030 |
8192 |
4320 |
17:9 |
8K (UHD) |
35 |
|
|
|
3440 |
1440 |
21:9 |
Quad HD (1440p) UWQHD |
5 |
|
|
2025 |
*Difference UHD - 4K?
see:
https://www.image-engineering.de/library/technotes/991-separating-sd-hd-full-hd-4k-and-8k
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
c:\temp\testset:
Embed code for Google Photos
https://www.publicalbum.org/blog/embedding-google-photos-albums