Old Ireland in Color

Blog Image Optimization

Website images, usually JPG, GIF and PNG file types, contribute more to your blog posts than text on a screen ever can. Though great strides have been made using Artificial Intelligence machine learning, at this time no search engine is able to understand the context of an image without reading the filename, title, caption and ALT text. Additionally, search engines increasingly reward websites with low bounce rates that load quickly on mobile devices with higher rankings. So slow image downloads hurt you both ways.

Digital images can be as large as the maximum resolution of the camera that produced them. This is helpful if you want to print a billboard, but all this extra data (pixels) gets hidden when the photo is resized on a website. Much like dark matter, you can’t see it, but it slows everything down.

Choose the right filename

Filenames like DSC-1453 are defaults from your camera, and are not helpful for search engine seeking context. A better filename would include the blog title, focus keywords and/or brand name to identify your original media content among the billions of similar images.

Leatherface Selfie
Leatherface-Selfie-1974.jpg is a descriptive filename.

Never forget ALT text

‘ALT’ text is a required accessibility setting in every blog software and image upload program. Never leave your images’ ALT text blank since this is one of the most important places search engines look so your blog posts rank for the most relevant and popular keywords. You should write ALT text that accurately describes any words or actions captured in the image. Make sure all the visual information is readable for a blind person accessing your website using a screen reader.

Learn to Love Captions

Humans and search engines both like reading captions. Spend a little extra time writing descriptive captions that enhance your main blog post.

Maybe not that descriptive…

JPEG Best Practices

Images sizes have the largest effect on website loading times. Luckily the JPEG format was invented early in the dot-com years to solve the universal problem of compressing/removing unnecessary data without degrading the visual imagery. JPEG is best for photographs because it allows you to choose the right level of data compression with the least perceivable visual degradations.

  1. Resize the original image to 72 dpi resolution (the max for displaying on screen) and the largest width it will be displayed on your website (usually 1024px, 1200px or less). 
  2. If the image will be used as a ‘thumbnail’ or smaller catalog image elsewhere on the site, it is best to copy the image and resize the smaller version to fit your website’s specific dimensions. 
  3. Then, export the JPEG using the lowest ‘Quality’ settings possible without seeing any difference in the displayed image.

PNG Best Practices

JPG file types can’t handle transparency and they’re lossy, meaning they do not retain lost information once compressed, so resaving them repeatedly degrades their appearance. To solve these issues, the PNG format is usually used, especially for images that solely contain icons, graphics, illustrations or logos where a transparent background layer is needed. 

PNGs can be saved as a PNG-8 or a PNG-24. The PNG-8 file type is limited to a pallet of 256 colors, whereas the PNG-24 will deliver a much higher quality display, but result in a larger file size. As you continue to resave these images, PNGs won’t degrade.

GIF Best Practices

Like a PNG, GIFs remain an option for small image sizes, and similar to the PNG-8, images only have 256 colors, so you should avoid using GIFs for photos. GIF is a bitmap image format commonly used for simple art and animations. It is the ideal format for icons, simple company logos and other page elements of websites due to its small file size and support for transparent backgrounds.