0

Ok I searched like the whole internet for this topic but couldnt find ANYTHING at all and thought maybe this is the right place to ask such a question. I was recently visiting apples iphone site and man they have a LOT of images in high resolution there. But when scanning the site to see how much MB I actually load I was stunned! All these images made up only 1. 4MB which is incredible. For example look at this picture here from the Apple Website:

http://images.apple.com/v/iphone/home/r/home/images/iphone_workshops_6s_xlarge.jpg

This high resolution image is only 182 KB big I cant get such results in Photoshop when saving jpegs. I mean you can clearly see that the details are kinda smudged so I am guessing this wasnt edited the normal way.

Does somebody have an explanation for that compression and maybe a tutorial how to achieve such low sizes? I am a web developer and when I create website with slideshows where I usually use image sizes like 1920 x 400 or something similar I never get images which are under 500-800 KB

Improve this question
7
  • 1
    The .jpg image you linked was saved at only 58% quality which is why it's the small size that it is.
    – user3439894
    Nov 14, 2015 at 2:41
  • what do you mean with 58 quality in photoshop terms?
    – Hans Ullrich
    Nov 14, 2015 at 2:42
  • @HansUllrich - when you go to save a file as a jpeg in Photoshop, there is a slider as to how good you want the quality of the image to be. Lower quality = lower file size.
    – rubynorails
    Nov 14, 2015 at 2:48
  • 1
    I'm not where I can look at Photoshop however, when saving a file in JPEG format the Quality level has to be set, which ranges from 0 to 100. Using exiftool it shows it was saved at 58%. The higher the saved Quality the larger the file will be and the lower the Quality the smaller the file will be.
    – user3439894
    Nov 14, 2015 at 2:49
  • How are there no obvious artifacts when its only 58% quality? I just cant explain how they got the image size so small with such a big resolution and good quality
    – Hans Ullrich
    Nov 14, 2015 at 2:53

1 Answer 1

Reset to default
0

A full-on image compression explanation is probably better suited for StackOverflow, but since you related it to Apple, I'll give an overview here.

The image itself actually determines the size of its file to an extent. With that, one can compress some images more than others without losing much apparent quality. For example, the JPEG image compression algorithm handles reds poorly. Consequently, if you have a photo with more red, you will likely need to keep the JPEG quality higher in order to not notice a difference. There are other quirks with different image compression formats that can impact the size of the file as well.

Second is how you save the file. Photoshop has a Save for Web feature that allows you to have more granular control over the save quality of the image. You can adjust the quality percentage (of original) and immediately see the affects on the photograph. A commenter noticed that it was 58% image quality. That doesn't mean it's 58% of the original file size, but is the number associated with the algorithm. It is likely that just that is less than 58% of the original size of the photo. You can easily see what they described by saving a photo in Photoshop using Save for Web and then setting it to the JPEG format and setting the quality to 58%.

After the photo has been saved, there is still another level of compression that can be done - in fact, there is more than one. The simplest, perhaps, is to run it through an image compressor. There are many out there and the one stand-alone app that comes to mind is JPEG-Mini. These can reduce file size significantly in some cases (though not all). You can also configure the server to provide a gzipped version of the image which further reduces the size. (You can determine if that photo was gzipped by looking at the headers for that image request/response.)

Image compression is extremely important, but is unfortunately overlooked all too often. I appreciate sites that show that their developers have done what they could to reduce image size so that all of their users can enjoy a faster load time. On that topic, responsive images are rapidly becoming supported and are sure to bring an even better UX as we serve browsers more specific content.

Improve this answer
2
  • Thanks for that comment! It really is impressive how the Apple developers handle this. Its incredible how fast their pages load altough they have so many images on it. I think I will try and put that save for web in my workflow to maybe reduce image file size as much as I can while maintaining this kind of quality :)
    – Hans Ullrich
    Nov 16, 2015 at 4:42
  • I agree. For the most part they have done well. Just don't look at the Mac Pro page. ;-)
    – bassplayer7
    Nov 16, 2015 at 16:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .