Image sizes for high density

ShareTwitterGoogle+FacebookEmail

The other night I can across the really interesting approach to cutting file sizes down when we start dealing with high density screens.

I’ve put a little demo together.

What I’ve done is saved out a 500x500px and 1000x1000px JPGs of the same image. Logic would tell you that the 500x500px image would be smaller of course, but you’ll notice that isn’t the case if you compare the two images. The 1000x1000px images is actually around 75% of the size of the 500x500px version.

What I’ve done here is reduced the quality setting of the larger image to 30% vs. 80% for the smaller. As you can see there isn’t really any noticeable loss of quality in the larger image (even at 100% scale it isn’t too bad).

Now, obviously I could have reduced the quality setting on the small image to bring its file size as well, but if it were to be displayed on a high density screen it would start to look pretty bad (ie. pixelated/blurry).

I see this as a possible approach on responsive or mobile only projects where we’re supporting very large screens and/or very small screens with high pixel density. It could remove the need to serve up an extra @2x version of the images we want to display on these high density devices.

I should note that this approach really only works with JPGs where we can control the output quality.

ShareTwitterGoogle+FacebookEmail

Leave a Reply