Optimize your images in 15 minute intervals.

Short Descriptive File Names

Naming is the first step in image optimization. Using short descriptive names as file names help with search engine optimization. Remember that Google bots crawl each page and process each element to determine what that page is about. If your image file naming convention is img_20170703_23247492.jpg it does not inherently provide information to Google. Now if you follow the convention of short descriptive file names you can provide additional information to search engines. Example: cobalt-blue-coffee-cup.jpg.

Image Size

Images carry weight. In some cases, it is a whole lot of weight. Remember that a 5000-pixel image has weight in the form of information attached to it. Some of the large high-resolution images can be enormous. If your 5000-pixel image is then reduced to fit your screen or even worse it is reduced to a thumbnail size it will still carry the associated weight as it did when rendered at the original size. Now imagine a slow internet connection or mobile phones. In order for that image to render the browser has to wait for all of that data to transfer.
Resizing the image can greatly reduce the load that has to be transferred. If your canvas is 300 X 300 pixels DO NOT use a 5000-pixel image. Simply reduce the size of the image to 300 X 300.

Image Formats

JPG’s, PNG’s and Gifs. When should you use them, why use them, and why.

JPG’s Use JPG’s for high-quality photos and when you will not need to make a lot of modifications.

PNG’s Use PNG’s for photos with text, illustrations, signs, logos, icons, and any image that requires a clear background.

GIF’s Use GIFs when your graphic uses a relatively low number of colors, hard edge shapes, large areas of solid colors or needs to make use of binary transparency.

Image Compression

Compression is the process of programmatically eliminating image information. Done correctly these changes should not be detectable by the human eye. In our experience, this step has the second greatest impact just behind image resizing.

Compression tools to try.

• Adobe Photoshop
• Tiny PNG
• JPEG Mini
• Google Site Speed

Image Alt Attributes

Adding alt attributes not only improves your SEO scores it is also the right thing to do. An alt tag normally accompanies each image. This is where you would describe what the image is about. If a browser is unable to render the image for some reason this text would alert the user what image should be there. In the case of a visitor who is using a screen reader the alt text is the only source of information available about the image.

Alt tags provide valuable information to a user with vision impairment and as an added bonus provides bots information about the image. Borrowing from the above scenario the alt text might read something like this. “Cobalt blue coffee mug sitting on a white linen covered table”