Web Design & Dev

Image Optimization Tips and Tools: The Ultimate Guide

MotoCMS Editorial 26 May, 2015

Visual elements rule the digital world. Images are a perfect addition that make your content stand out of other, attract attention and even raise conversions. It’s not a secret that in recent time image-based social networks leave behind their rivals. Thus, Instagram last year increased its network for 50% in just nine month and now is the most popular social network with 300 million active users. It outperformed Twitter that has only 284 million users who use it regularly. Such trend is perfectly seen in other social networks. Facebook improves its services to make video and photo content more visible in user’s news feed while Twitter focuses on Vine – a short-video service – development.

Image Optimization Tips - main

Images are easier to understand, they are pleasing to the eyes and they can be really helpful for brands in engagement with their users. So your website should have the best-looking and the highest-quality imagery.

Image Optimization Tips

It may seem no big deal at first, adding an image to the page and surround it with your content. But with a closer look imagery requires a bit more work to perfectly fit your content and provide better SEO for the page. With these image optimization tips and cool tools you will make your photo backgrounds, galleries and product showcase work for your brand.

Add Unique Images

There are tons of free (and paid) stock photos across the Internet. But their use for websites is limited by many factors. First, it’s copyright. You can get serious problems if you use someone’s images for your website without permission.

The other reason to refuse stock images usage is their bad impact on SEO since Google will qualify those images as duplicate content. And, of course, it’s not very attractive for users who definitely are not happy seeing a bunch of the same images on different sites.

Of course, you have to use ONLY unique photos for your products, or stuff etc. Thus, you’ll get more benefits in terms of organic-driven clicks and increase conversions and UX. Last year Google announced that it will be using the EXIF data from photos to help users in searching info about images.

EXIF Data from Flickr

Image Optimization Tips - EXIF

EXIF data (stands for exchangeable image file format) is the standard specifies digital camera photos and uses special meta tags to store data about a photo: when and where it was taken, info about camera and its settings, description and copyright info. Thus, it will be easy to find info about your rights for a certain photo.

Choose an Image Type

Type of the image you add to your page depend on many factors. The most common image types for the Web are PNG, JPG (JPEG) and GIF. In recent time a new type is widely used across modern website designs. It’s called SVG (stands for Scalable Vector Graphics) and appears mostly on flat-style websites.

GIF (.gif)

GIFs support 256 colors and are not the best image file format for digital photos or bright imagery. However, GIF format supports animation what can be very useful for website building. In most cases GIFs are used for creating logos, icons, decorative elements and typography.

JPG (.jpg)

It’s the most used across the Web image format that has become a kind if a standard. Unlike GIF, it supports 16 million of colors and is the best file format for colorful photos and images. JPG can be perfectly compressed without significant loss of quality. Being a compression version of color and grayscale images, JPG loses some info, invisible for the human eye. That’s why it is considered a lossy format.

PNG (.png)

Unlike JPG, this format provides lossless data compression for a better image quality. PNG supports transparency but it doesn’t allow the use of animation, like GIF. They don’t lose quality after constant resaving, like JPG and support much more colors that GIF. Despite such benefits, PNG format is a heavyweight format and usually is much larger that the same file in JPG format.

SVG (.svg)

Technically, SVG is not exactly an image. It’s an XML file that is used and edited in a browser without a traditional graphic editor. With a help of code you can create colorful graphics that can be used for various goals like icons, logos and even backgrounds. SVG are perfect for responsive design since they are perfectly scalable for various screen size. The main drawback of this type of files is their weight. They are much larger than JPC and, since they are still converted from images, can contain tons of junk code.


Image Optimization Tips - Noonic

You should perfectly know what imagery you need on your website and opt for the best image file format. Here are a few tips:

  • JPG is good for most options, but the use for photos and colorful pic is the best choice;
  • Don’t use GIF for backgrounds or big product images. Large-size GIFs are extremely heavy and your website will load forever;
  • PNGs are good for smaller-size imagery and thumbnails. If you need a transparency within your picture, PNG will also be the only choice;
  • Note that PNG-8 images are usually lighter than PNG-24 files, so it’s better to save images in PNG-8 format;
  • Use SVG for logos. Since SVG files are flat, they can be used on modern Flat- and Material-style designs. They are perfectly work with animation and can also be used for the benefits of your responsive design.

When choosing an image for the Web, you should also keep in mind user’s devices and browser since various formats work different on different screen sizes and in different browsers.

Optimize Your Image Size and Weight

Choosing a proper image size and weight is essential for your website. There are two major reasons for it:

  • Nice-quality images attract users and may even become a critical decision-making factor;
  • Too large images impact website loading speed and it may affect your traffic greatly.

As for the last aspect, we all know that fast-loading website is a must-have today. Since Google included website loading speed in its algorithm, slow-loading websites lose their positions in SERPs. The same is for responsiveness. Too heavy images slow down your mobile website performance and you lose visitors and potential customers. You need to make your images look good at small size and weight!

The main task is reducing an image weight, because sometimes you need to save image dimensions (height and width) unchanged. The easiest way of doing it is with the use of Photoshop. Just open and image in this editor and choose a “Save for Web” option. It reduces dpi of the image and makes it less heavyweight.

In other cases you can use some of multiple image optimization tools available on the Internet. There are desktop and online services and even mobile applications for your needs. Among the most popular are:

  • Kraken. This service offers a free online image editor and a paid desktop tool;
  • JPEGmini. One of the most popular services for compressing JPG/JPEG files without loss in quality. Has a desktop version (with free trial) and a Lightroom application;
  • Pixlr. Offers a cool mobile application (aside of a desktop tool), so you can edit your images on the go.

Here you can find even more image optimization tools tried and compared to choose the one that suits your needs the best.

Optimize Your Image for SEO

Search engines are built that way to understand only text content. In other words, your cool photos and graphics will be invisible for Google without text. Optimization rules require your images to have a properly written name, title and ALT-tags. In this case photos and images added to text will improve SEO of the entire page.

MotoCMS 3.0 Admin Panel

Image Optimization Tips - MotoCMS 3.0

Image Name

In many cases website owners or content creators add images with their generic names – letters and numbers a photo gets from camera, e.g. img_587.jpg. In terms of SEO it’s a big mistake.

You should name your images using keyword that either describes the content of the photo or the content on your page. Thus, if you sell umbrellas, your product photo should be named with the use of keyword “umbrella”. Search engine crawlers understand that your photo must contain a picture of umbrella and find it relevant to a user’s search request.

Image Title

Image title tags appears when you hover a mouse cursor over an image. This visual caption usually contains info about the photo and its contents. There are no surveys that prove actual weight of title tags for SEO. In any case, it won’t hurt your conversions and may even increase click-through rates drawing users attention to images. To make your image title tag more appealing you should:

  • Use primary keyword in it;
  • Use attractive description to get users’ attention;
  • Don’t just repeat your image name and ALT tag, create an appealing title.

Image ALT tag

We usually see these attributes when image fails to load successfully. ALT tag also contains info that describes the image, but unlike title tag search engines regard this metadata as important ranking factor. So, it’s vital to properly set ALT description to all your photos and images:

  • 125 characters for describing your image is a recommended minimum. Since ALT tag can be regarded as meta description for content, it should be competitive and attractive;
  • If you’re a small business owner who sells products that have model numbers, include those numbers to ALTs;
  • Add keywords to the description. Despite it’s not a major rule, naturally implemented keywords should improve your SEO. Avoid keyword stuffing;
  • Don’t set up ALTs for decorative images, like backgrounds or logos. You may get penalized from search engines for over-optimizing your website.

Check out if your images have all these tags and titles and monitor your website from time to time to see if you need improvement in terms of image SEO.

Create an Image Sitemap

Traditionally sitemaps are used for helping search engine crawlers to better index your website and find info on it. Adding an image sitemap will benefit your SEO and make your images appear in Google image search.

Google has detailed guidelines for creating an image sitemap, so you can use its instructions to create your own and make it easier for search engine to show your images for relevant requests. You can create more detailed descriptions for your images listed on a sitemap and add specific tags for improved search. You can also create a separate sitemap only for your images.

Remember to test your images and their impact of website loading speed, SEO and traffic. Don’t forget the old saying that image is worth a thousand words, but never neglect your text content. A wise use of both will be a perfect solution for you.

Leave a Reply

Your email address will not be published. Required fields are marked *

Tags: images for website SEO
Author: MotoCMS Editorial
Here are the official MotoCMS news, releases and articles. Find out the latest info about product, sales and updates.