One of the things Anchour's web team has (shamelessly) been excellent at is creating immersive websites while keeping the user experience very snappy and quick. Dramatically compressing images is one way we accomplish this.
Over the past three years, we've experimented with a lot with different resolutions, image sizes, and file types to come up with the best bullet-proof compression process without compromising on quality. We've been able to use this method on many of our clients websites with great results.
Below is our simple 4-step process for perfect photo compression.
(Note: We used this compression on the banner photo for this site, and it's a measly 212Kb.)
Our image compression process:
1. Open your image in Photoshop
2. Resize your image.
Resize your image so the maximum width is 2200 pixels wide or 1600 pixels tall, whichever one is greater. 95% of screen resolutions aren't high enough to view anything better than this, so don't bother uploading super hi-res photos. It's just not worth it.
3. Save your file for web.
Save for web (⌘ + ⌥ + ⇧ + W). Save as a JPEG at 70% quality. This isn't too high, and isn't low enough to sacrifice the quality of image. If you notice the quality of the image isn't reducing at 70%, push the limits and bring it down until the photo begins to detieriorate. Save the image.
4. Compress with ImageOptim.
This typically compresses a JPEG between 2%-5% every time. This is small, but every bit can make a difference, especially when you have lots of images throughout your entire website.
You're done. Upload that sucker!
If you compare the compressed image file with the image before reduction, you'll notice they look identical. The only difference is one is 212Kb and the other is 3.1MB. This will result in your website loading much faster! This is one of many ways that our web team works tirelessly to ensure that your website will give people the best possible experience.