Image Optimization

One of the main reasons a website will load slowly is because the images for the site have not been optimized for the web. If you follow the steps below, your sites will load a lot faster.

  1. Image Resolution - Set the image’s resolution to 72 pixels/inch. The web will show images with bigger PPI, but if you compare two images one that has a PPI of 72 and one that has a PPI of over 72 on the web, they will not look any different.

    Image Resolution Settings

  2. Image Size - Be sure your image size fits the screensizes it will be on. For example, most images do not need to be over 1000 pixels wide. Check the area the image will be shown on your site, and try to size it to fit that area.

  3. Picture Format - There are really only two Picture Formats that you will use for the web, they are JPG (aka JPEG) and PNG.

JPG stands for Joint Photographic Experts Group. It’s a method of compression that keeps as much information in the photo as it can (colors, digital info, etc.) while keeping the file size at a decent size for storage and email.

PNG stands for Portable Network Graphics and was created as a superior alternative to the GIF.

Depending on what you are using the image for, you probably want to stick with JPG as it tends to be a smaller sized image. If you need transparency though, you will need to use PNG, as JPG does not support transparency.

  1. Export for the Web - Many photo editting software apps have an option to export or save the image for the web. This will help make the image as small as possible for the internet.

  2. Image Optimizers - There are many image optimizer apps out there, here is just a quick list of ones we like to suggest to people: ImageOptim - Works great for optimizing PNG files. JPEGmini - Works great for optimizing JPEG files.