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?
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this communityLet'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 (oldie) porportion for desktops is 4:3 for example.
Some pads use this same proportion for example the ipad uses:
Vertical orientatnion
This takes us that this pads used in vertical orientation gives us a 3:4 proportion which would be inverting the values.
The main proportion is 16:9
You have the same case if you want a vertical orientation 9:16
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.
1920 x 1080. This is the standard background for computers no more, no less.