On a Retina screen an image 320 wide will only be half width on the screen. So if you had designed a WordPress website (or any image for that matter) to display on the iPhone 3, your maximum image width only needed to be 320 pixels (full width of the screen). When Apple and other manufactures introduced the Retina type screens - which are simply screens with smaller size pixels - they had a problem.Īpple’s Retina screen has a minimum PPI of 326. The original iPhone screen was 3.5inches in diagonal screen size and had 320 pixels across and 480 down - giving an PPI of 163.
#Ideal web image resolution full
Why does an iPhone 7 Plus have 401 PPI, whereas a 60inch Full HD Samsung TV has a PPI of 37? Answer - the pixels on the iPhone are much much smaller.įurthermore, they will continue to get smaller as manufacturers push the limits of engineering to bring higher resolution screens.Ī smaller pixel means you can squeeze more detail into the same physical space, this gives more clarity to images and text. That’s why we measure DPI/PPI (Dots per Inch or Pixels per Inch) Smaller = Better Especially in recent years when Apple changed their reference in screen sizes from pixels to points.Ī Pixel is = a single group of coloured dots on a screenĪ vital point to remember about pixels is they do NOT have a uniform size. There is much confusion around this topic. Lets start by talking about points and pixels, the building blocks of all digital and print images. I am also focusing on WordPress, but this info equaly applies for any website. Definitionįirstly let’s make it clear that I am talking about bitmap images here. Yes I actually remember that!īut today, there are literally hundreds of different screen sizes and resolutions. Every website was designed for desktop only and generally for a fixed screen resolution of 800 x 600 px. The good stuff is at the bottom, but skipping the middle will hamper your understanding of image sizing!īack “in the day” - before “device proliferation” life for the web developer was very simple. What size should the background image be? 1000px, 2000px, 3000 px or higher? With today’s multi format, multi device world, deciding what image size you need to upload to your new WordPress site can be very confusing. Maybe you have a full-width background image or hero image. So you have a great looking new WordPress site design, but are not quite sure what image size you should be uploading to WordPress.