Many times we forget about this detail, but optimizing the images from SEO is still a good step, and in many SEO checking software this problem will come up if not done right or completely. There are more aspects of working with images that come into discussion when we optimize them for search engines. Here are the most important 6 image optimization steps:
1. Resize the images at the required width and height
If you need to insert an image in your page and the space for it has certain dimensions, that's how big your image should be. Not larger nor smaller. First, rescale/crop the images at the exact dimension that they will have on the page. So, if the image spot will be 300 by 200 pixels, rescale the image at this size before loading it onto the website. Otherwise, if you have a larger image there, it will take the browser longer to load that large image and then rescaling it at the required size. Other size complications might occur also. So scale your images at the required width and height.
A P.S. here, the width and height can be also indicated in percentage when we use responsive design (adapt to the screen size). In this case we only use one of them. For example if we use width="100%", the height will automatically resize at 100% also. If we use width="80%" height="100%", the image will be stretchted vertically (or squished horizontally).
2. Optimize the images file size for best loading speed
When we talk about image size, we also talk about lossy compression of an image, which will sacrifice some fine details of the image making it a lot smaller(file size) than the original while keeping the same dimensions of the image. The compressed image file might be 10, 20 times smaller in file size than the original and still look good enough for its purpose. Images size needs to be as small as possible while keeping a good image quality. It will be at your discretion as much will you choose to compress it.
I use Photoshop for editing the images and when I optimize them for web use, I often compress them at a 20%-70% of the original quality making the file size a lot smaller. Acceptable file sizes for images on web pages are somewhere around 60Kb. The smaller the better!
See the image from Step 6 bellow for a clear example how much the lossy compression can lower the file size.
3. Specify the image width and height
When the images are rescaled at the required size, they can be inserted into the page without specifying the width and height and they will work just fine. From an SEO standpoint though, specifying the height and width is helpful, giving the browser the detailed sizes thus not making it calculate it, resulting in gaining some loading speed. This practice became heavily used lately while coding for mobile devices first, when the width or height of an image will be specified in percentages % and is necessary anyway.
4. Use the "alt" and "title" attributes (tags)
<img src="/images/landscaping-services.jpg" alt="landscaping-services-photo" title="Landscaping Services" width="300px" height="200px" >
The alt attribute for images elements (<img src="/..." />) it's also named alt tag, so keep in mind it represents the same thing: the alternate text for an image.
In the beginnings it was used to help the visitors understand what an image was about on a web page in case the browser could not show the image. In the meantime, it happens very rarely and the alt tag evolved, getting some SEO importance by helping the crawlers understand what an image is about.
So it's another good opportunity to use a keyword here, if it's the case. Keep in mind it's not necessary, and better not overstuff your alt attributes with keywords. A good, descriptive alternate text will do.
The title attribute became more and more used as the browsers improved in functionality and now they show the title tag text when we hover over images (see image example). Same as the alt attribute, we can use a keyword in here also.
Here it is an example of using these attributes:
5. Name your images with keywords and SEO in mind
Not the least important fact, the naming convention of your images also pumps some SEO juice to your pages, as search engines do take them in consideration. Also, think about when you make a search for images. You type keywords in search and get images as a result. If you are looking for a image about "kitchen countertops" and my kitchen countertops images are named let's say "kc-001", 002, etc, they won't show in any search pages. And I lose organic traffic because my images names are irrelevant to my page. So I should better call them something like "kitchen-countertops-01.jpg" or even add a material keyword in: granite-kitchen-countertops-01.jpg if "granite" is a primiry keyword, or kitchen-countertops-granite-01.jpg if "kitchen-countertops" is a primary keyword phrase.
6. Use the right file type for your images
When we use images for web, they are usually one of these file types: .jpg, .png, .gif. Look at the example from the image, where I compressed an image using "Save for web & devices" command in Photoshop with some explanation points:
To see the details and quality differences, click on the image above to enlarge, and look at the small real life photo and the skin texture of the neck on the avatar photo.
- 1. I used 4-Up view so we can compare results
- 2. You can see the original size of the image was 5.82M (5,820K).
- 3. The JPEG compression at 20% gave me a file size of 81.07K (1.3% of the original!!!)
- 4. The PNG-8 compression is at 464.1K: about 5 times larger than the JPEG and lower quality
- 5. The GIF compression is at 511.5K: about 7.5 times larger than JPEG and even lower quality
- 6. Keep in mind the picture size in this example is huge (1575px/1292px), so a size of 81.07K with good quality is actually very good compression.
- - .jpg or .jpeg are mostly used with photos, as they have a good quality at small image size
- - .png file format it's used when we need an image with a transparent background. A little bit larger file size than .jpg
- - .gif are the smallest file sizes but the quality is way lower than the other two. We use gif with small images or where the quality it's not so important, and also .gif images can be animated
So depending on the destination and quality requirements, we need to choose the best solution for file type. Click here for a detailed list about file formats.
So these are what I called "the 6 vital steps to create the best image solution for web use". If you have any questions about any of these steps, feel free to ask for my free help using the comments section.