CODEWITHSUNDEEP
cssimagewebretina
keldar
keldar

Reputation: 6252

Retina/High-res Images

When creating a website/mobile app and accommodating for retina/high-res screens (which requires an image at twice the size), why is it not a good idea to include just the bigger image, and size that to half the size so you only have one image which, on non-retina images, will just become smaller (with the same amount of detail in the image).

That way you don't need double the amount of images since you have just one higher res image which can be reduced to half its size to accommodate for both screens?

Upvotes: 0

Views: 197

Answers (5)

Drkawashima
Drkawashima

Reputation: 9822

3 reasons:

  • Save bandwith (never download larger images than necessary)
  • Save performance (scaling takes some CPU power)
  • Improve image rendering (images look best when rendered in a size as close to their original size as possible. not sure if there's a significant difference on all devices, but surely on some)

Upvotes: 1

Philip Dernovoy
Philip Dernovoy

Reputation: 1179

JPEG:
Get 2x sized image and save with hard compressing (up to 20-30%). Use original sizes for Retina, and half-sizes for other devices. This way can save (reduce sometimes) weight of image, and increases visual quality.

Example: 1024 × 640, 99 Kb vs 2048 × 1280, 75 Kb
Source (RU): http://pepelsbey.net/pres/clear-and-sharp/

Upvotes: 0

Abbe
Abbe

Reputation: 1856

It's all about loading times, a retina image takes much longer time to load. So on devices as doesn't have a high-res they will just slow things down...

Upvotes: 1

JWKot
JWKot

Reputation: 360

This is usually done to save resources. While the space required to save two images instead of one does not matter as much, the ram to save the extra resolution (on the non-retina device) does matter. Also the CPU has to be used to resize the image each time.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

why is it not a good idea to include just the bigger image, and size that to half the size so you only have one image which which, on non-retina images, will just become smaller (with the same amount of detail in the image)

It's not a good idea because for the cases where people don't have high-res/retina mobile devices, you've just wasted ~40% of the images bandwidth.

Depending on the volume of traffic, the cost of that additional bandwidth will add up very quickly.

Upvotes: 2

Related Questions