Let's say I wanna make a website that would allow a user to download a wallpaper in sizes for PC, HD, mobile and tablet.
What are the top used / best image dimensions I should host?
You probably need to think first on the proportion.
The classical proportion
The classical (oldie) porportion for desktops is 4:3 for example.
- 1024x768
- 1280x960
- 1600x1200
Some pads use this same proportion for example the ipad uses:
- 2048x1536
Vertical orientatnion
This takes us that this pads used in vertical orientation gives us a 3:4 proportion which would be inverting the values.
- 768x1024 for example
The widescreen
The main proportion is 16:9
- 1920x1080
- 1366x768
- 1280x720
You have the same case if you want a vertical orientation 9:16
Variations
There are a lot of variations in proportions and resolutions. You can take a look of them on this image from the wikipedia (the circles show the proportion):
So the truth is you need to take descitions on the target you are aiming.
You can look some trends using this google search https://www.google.com.mx/search?q=screen+resolution+statistics
Common sizes for desktop are 800x600, 1024x768, 1280x1024 and 1600x1200
HD usually means 1080p nowadays so that is 1920 x 1080.
Also, see this previous question
And this Google Browser size diagram may help
Best practice is to consider the resolution + ratio + pixel per inch (PPI)
For example: I have a FHD 1080*1920 display on my 15" laptop display.
I need to design for a FHD 1080p 10" Tablet with 3x the amount of pixels at 441 PPI.
If I design a background at 1080p only, my work will not display optimally on my target device.
Especially on new devices, Pixel density is becoming more and more of a factor.
When creating a canvas for a 1080p full HD device, You may have to create the canvas at a larger size than 1080*1920 if the pixel density is very high. For example: You have a 1080p display with very high (PPI). You will need a formula to calculate the canvas size to cover all those pixels without losing quality. Even though you might be designing your canvas at say 3x the size of 1080*1920, The larger canvas size will size back down to 1080*1920 at perfect scale because that canvas is no longer larger on the target device, it will fit perfect, pixel for pixel.
It is also important to create a few asset folders with a Base PPI and one for high PPI.
This is for Native design assets.
When designing for a responsive web UI. There are bootstraps, UI layout templates which will scale within the browser properly.
Due to being downvoted I would like to explain that the most popular operating system in use worldwide is Android which uses a specific DPI formula found on the Android developer website. This is why I always create asset folders and always design with PPI as my target so all Android devices are covered.
-
while true that it's best to design the largest size and then downscale from there, if you design something at the exact size of your screen that is the best you'll get; it won't be any better because you designed it larger. Your computer will scale it down to the resolution of your screen if the image is larger so no benefit here. And if you want to distribute this to multiple sizes of screens, it's better to have multiple images hosted - let's not waste user's bandwith by serving an image larger than their screen can handle. – Luciano Jul 27 '17 at 12:55
-
@Luciano You need to humble yourself and not be so quick to correct when it's clear you have some things to learn. If you read the question properly it wasn't about a "computer" it was scalable wallpaper/images for all devices in which case you need to follow DP ratio for Android. You do NOT go by resolution as 1080p on a tablet has less pixel density than 1080p on a 5" phone. This is why you create asset folders and have an image for hdpi to xxxhdpi. It seems you know nothing about this and I advise you to learn it as Android is only the most used OS in the world! Humble yourself – nexogen.io Jul 30 '17 at 13:14
-
1080p means 1920×1080 regardless of the device screen size. So that's the pixel size of the image you have to serve to all 1080p devices if you want the best result. – Luciano Jul 31 '17 at 9:13
-
You are wrong. I'm not going to sit here and argue with someone who obviously has not learned what DPI means. I certainly would not hire you as you would rather argue than just go and learn how to better your skills. Who cares if you are wrong... Learn something new – nexogen.io Aug 1 '17 at 2:03
-
The reason it is especially important to design on a larger Canvas than what the resolution is. 1080p resolution does not measure the amount of pixel per inch (PPI). If we have a 56" full HD 1080p display and a 15" notebook display with the same resolution, the two will differ in PPI in which the smaller display will have more pixel density. When creating a canvas, you must take Pixel per inch (PPI) as well as ratio into account. There are formulas for this and they work very well. This assures your work fits the display properly as well as looks crisp and optimal. – nexogen.io Nov 10 '17 at 4:59
1920 x 1080. This is the standard background for computers no more, no less.
-
Except mine that supports 2560x1600... or my laptop at 1600x1480...... And yeah... let's not even get into mobile and tablet sizes.... – Scott Apr 20 '15 at 21:51
