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
Best Answer
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.