Adapting your images to cater for Retina and 4/5K screens

By Kieran Hunter

I recently got a new 27 inch 5K imac. First thing I noticed when browsing the internet was the poor quality of images on some of the sites. 

This is because my 5K screen has more than double the amount of pixels than a normal HD screen. Meaning the image source must be at least twice the size of the container it's being displayed at.

For example in WordPress most people use thumbnails to automatically re-size thier images, especially feaured images.

So lets say the image in the CSS is set to 100% width, and the container it sits in is at it's max, 800px wide. The actual image would need to be 1600px wide, sitting inside an 800px wide container. This way the image would look crystal clear, even on 4K screens.

Obviously the downside to this is that the image is twice the size, so the loading time is twice as long. If you have a lot of images at 1600px wide on a page, the page could potentially take a while longer to load than it previously did. One way to make this faster would be to reduce the image quality in Photoshop when you export it. Don't reduce it too much but say something like 60% if it's a nice big quality image. Beacuse the image is being scaled down the quality will still be good.

Comments

  • Chris

    02 Jan 2016 00:37:43

    Thanks for the tip! I’m still using a 1080p monitor, so I was completely unaware of this issue.

Leave a comment