Speed, Size and Bandwidth: the importance of image PPI in the Mobile Web World

Images, it’s said a Picture is worth a Thousand words, the problem in the Web Connected Modern world, is that a picture is also worth Megabytes of data to download when it comes to Websites.  An unoptimized image (or 10 or 50, pick a number) can make or break the success your Website has with the Client base. to slow to load on a WiFi connected machine and users will go else where, too many to download on Mobile Data and you have pretty much sunk yourself as far as getting that client to follow up when they are back at a Laptop, Desktop or Tablet connected to the internet via Wifi or cable.

The current format for almost every image online is to have it encoded at 72 PPI, or pixels Per Inch, with some sites claiming that it does not matter the PPI of an image but more the Width and Height resolution of the image.

Apples Retina Display, states that Per inch it displays 326 Pixels, contrasting that with the industry standard of 72 Pixels Per Inch, that actually creates a ratio of 1:4.5 pixels difference.  lets break this down a bit further, we will use the example of a 3 inch square image (so 9 Square inches of Screen) for our calculations here.

	Traditional	Retina
Format	Jpeg	Jpeg
File Size	137 KB	2.74 MB
Height	3 Inch	3 Inch
Width	3 Inch	3 Inch
PPI	648 Pixels	2,934 Pixels
Download Time 512kbits/s	00:00:02	00:00:44
speed	Highspeed	Highspeed

As you can see, the same picture can be quite effected, As Retina like displays and faster internet connections both improve, this is a detail that Web Designers will eventually have to learn to adjust and code for.