If your website is loading slowly there is a good chance it’s because of bulky high-quality images. Optimizing your images with the correct DPI (dots per inch), compression and image extension (.jpeg, .png, .gif etc) can help your website’s loading speed significantly. Below are a couple of suggestions and rules that will help you properly optimize the images on your site for high quality and quick load times.
1) Choosing the Correct File Extension for Your Images
JPEG – Use JPEGS for most all images. The exceptions are below
PNG – For images with transparent elements and when loss-less, full-quality text is required
PDF – For downloadable images and forms. These won’t be easily viewable (if at all) on your site.
2) Crop your Images and Re-sample the Pixels.
It’s best to crop and re-sample your images to make them the exact size they will be display on your website. This will keep loading times down to a minimum. A lot of sites have resizing built into them, however if you’re using a 1000x1000px image and only displaying them at 300x300px why make everyone visiting your site wait for those extra pixels to load? You can crop the image with the crop tool or by changing the “canvas size” in photoshop. You can re-sample the image by changing the “image size” in Photoshop.
3) Compress Your JPEGs
Compressing an image is the number one way to lower a image’s file size and therefore make it load quicker. You make think that compressing JPEGs automatically means a huge loss in quality, but that isn’t the case. You can compress a JPEG file to half it’s originally size the quality difference is almost completely unnoticeable. Below is an example of a JPEG image at original quality (on the left) and then compressed to half its size (on the right). Can you tell a difference?
4) The Internet Image 72 DPI Myth
When first starting building websites, I always heard the rule that all images loaded online should be 72 DPI (dots per inch). The fact is–DPI doesn’t do anything to change the quality of an image online, only increases the file size. The solution here is to remove the DPI settings altogether by selecting in Photoshop to “Save for Web & Devices” instead of “Save As.” The file saved after selecting to “Save for Web & Devices” will have no DPI instructions saved within the image making the file size smaller, but not changing the quality of the image when displayed on a website.