How to Optimize Images for Web (without quality loss)

Here is how you can optimize the image sizes for the web, without losing its quality. Large image sizes often lead to higher page loading time, which can severely affect your website performance.

  1. Add SEO friendly meaningful descriptions, in a plain-language
  2. Use descriptive alt tags
  3. Reduce the file size of the images without losing quality
  4. Use next-gen file formats for web images
  5. Optimize images for thumbnail views

Well, let me show you how to optimize images for the web by following the above set of steps.

First, let us see what the technical meaning of “optimizing images for web” is.


Advertisement


Optimizing Images for Web

Optimizing images for the web means the process of reducing the file sizes of the images without losing the quality. By having optimized images, you can reduce your page loading time.

Also, image optimization plays a significant role in your SEO strategy. Well-optimized images help you to rank up your content on Google search.  

1. Add SEO friendly meaningful image titles, in a plain language

This is a vital part of optimizing images for the web (especially for SEO).

Yes, I know we all hate renaming images every time we upload them to a website. Life would be much easier if we can keep the same name for the images assigned by the camera or the download page. 🙁

But, life is not that fair.

For image SEO, you must need to add the relevant keywords to help Google crawler to understand what your image and website is all about.

By having keyword rich, descriptive file names, you can increase your chances of ranking up on Google.

Here is an example.

Here is an image of a pair of wooden shades.

Use-descriptive-file-names---how-to-optimize-images-for-web

If you took this image from your iPhone, this would be named as something like img_8738.jpg.

So, what is the relevance of that name for Google? That doesn’t mean anything.

If you are running an e-commerce store, and if you use that image for your product listings, it will never show up on any image search.

So, what would be a meaningful name for this photo?

“Full-frame walnut wood polarized sunglasses”

This describes the image accurately, and Google crawler will understand what this image is all about. So, it can index that image in a perfect location.

I know that it is not easy! I hate doing that too. But, there is no other option. 😐


Advertisement


2. Use descriptive Alt tags

What are Alt tags?

Alt tag of an image is the text alternative to the graphic itself. It is an HTML attribute, which is used by the browser when the image cannot be rendered properly.

Alt tags are also used as an accessibility feature. Have you noticed when you hover the mouse pointer over an image on a website it gives a tooltip description for that image? Well, that is extracted from the Alt tags.

According to Google’s SEO documentation, they recommend using descriptive naming for the Alt attributes for the images too. They say that the Google crawler also uses Alt attributes to understand the images on the web.

Since we need to optimize images for web and SEO, we can’t help but adding proper Alt tags for image

Here is how the HTML code for our wooden sunglasses would look like.

<img  src=”Full-frame-walnut-wood-polarized-sunglasses.jpg” alt=”Full-frame walnut wood polarized sunglasses”>

So far we have discussed optimizing images mainly for SEO. Next, we are going to learn how to optimize images for page size and performance.

3. Reduce the file size of the images without losing quality

Hey, do you guys know that page loading time is a ranking factor in Google page ranking algorithm?

Yes, that is true. If your page takes forever to load, you can forget about your site climbing up on Google page rankings.

And, the most usual reason for higher page loading times is the large images.

So, how much you can reduce the image sizes for better web performance. This is a part of the image optimization for the web.

Reducing file size is not complicated. But, the real problem is how to reduce the image sizes without losing quality.

Nobody likes to see a blurry image. And, having sharp quality images can make your site more attractive.

How to use Photoshop to reduce image size without losing quality

Photoshop is undoubtedly one of the best photo editing tools around. If you have Photoshop, optimizing images for the web is just a few clicks works.

Here are the steps:

  1. Go to File > Export > Save for Web (Legacy)
  2. Set the File Format to JPEG
  3. Set Quality to around 70 (Try a few exports and see what is the smallest value you can select)
  4. Check “Optimized”
  5. Check “Convert to sRGB”
  6. You can see the expected file size at the bottom of the preview pane
  7. Save file. (Remember to use a descriptive file name!)

Advertisement


Free methods to reduce image size without losing quality

Using pixlr you can optimize images for your website from your mobile phone for absolutely free.

You can save a couple of images with different quality levels and see what fits best for the image which you are using. Usually, 70-80% of quality level works well for most of the displays.


Here is a tip 💡

Try to keep your image file below 100 kb. If you use these images as product listings of an e-commerce store, try to reduce it to less than 70 kb. When it comes to e-commerce page loading time really matters for a better conversion rate.


4. Use next-gen file formats for web images

Here is the most basic way to choose image formats for the web.

  • If you have photographs, use JPEG
  • If you use animated images, use GIF (well, obviously!)
  • If you have images that serve as icons, try SVG
  • Everything else should be in PNG

So, what is the difference between JPEG, GIF, and PNG?

JPEG is like the standard format for images of the Internet. Images on JPEG format can be compressed well and can provide good details with small file sizes.

GIF images come with a lower quality than JPEG images and work well for very simple images with just a few colors. You must never use GIF for large photos.

PNGs can support more features like transparency and more colors than the other two formats. Also, PNG can preserve its quality over multiple re-saves. All these features come with a sacrifice for PNGs. That is the large file sizes.

Next-gen formats like JPEG-2000, JPEG-XR, WebP are the augmented versions of JPEG format, which are optimized for web performance. For now, not all browsers can support next-gen formats. But, it will be the future of web-images, making the internet more fast and accessible.

So, the web developers usually use next-gen formats for faster page-loading times, and they use other formats as the fallback images.

Here I have added three images in JPEG, GIF and PNG-8 formats with the same file size. So, you can check, which gives the best quality for the same file size.


Advertisement


5. Optimize images for thumbnail views

Thumbnail images are implemented on web pages as smaller copies of the original large image.

The main purpose of having a separate set of thumbnail images is to reduce the bandwidth and reduce the page loading time.

The best practice is to use a different set of images as your thumbnail images. You can reduce the size of your thumbnail images to get the lowest possible file size.

Remember, thumbnail images usually come as a cluster of images. So, the accumulation of the files sizes can impact your page speed.

One important thing to remember when using separate images for thumbnails is that you should never use the same Alt tags as your original images. This will make your thumbnail images to be indexed for your content. If you don’t want to make your thumbnail images to be indexed, you can keep the Alt tags even empty.

Let us wrap up

In this guide, we have discussed five methods to optimize the images for the web, without losing quality.

Well-optimized images will help you to improve your page loading times, and to rank your content up on Google search.

So, optimizing images for the web is essential for your web conversions and for your SEO.

Ask any questions about optimizing images for the web by leaving a comment below. I will try my best to answer.

Cheers 🙂