Desktop PC has been the major target device for web development since Internet became popular. Web developers have conveniently chosen PX as the unit. Thanks to mobile, portable devices burgeoning in recent years, high pixel density displays have brought us much more delicate, colourful and sharper images on screens. Currently, a 9.7 inch tablet screen doubles the resolution of a 15 inch PC monitor and a 5 inch smart phone screen can reach 1920×1080, the same resolution as a HDTV in our living rooms.
Apple.com supports high density screens. As you can see, it downloads both standard and _2x (high resolution) images for users with high density screen devices.
Compression controls file size
According toDaan Jobsis from http://blog.netvlies.nl/, he has played around image compression and successfully compressed high-resolution images to the same file size as standard resolution images without noticeable quality loss. The following examples showcase a series compression of a Pixo Punch logo based on Daan Jobsis’ method. The above test indicates that jpg enough. However, with 50% compression, the result is still very impressive though the file size slightly increases by 4K.
The last stand – Server side solution
Retina images is an auto-served high resolution image solution created by Jeremy Worboys. The php file will send image requests based on devicePixelRatio. The benefit of this solution is that images of only one resolution will be downloaded based on the device being used by the viewer, which minimizes the usage of bandwidth. Therefore, this method seems the optimal high resolution image solution so far.