How to Optimize Your Images for the Web

Optimizing your images for the web helps your SEO and the speed of your website. Users are very impatient and they want to see and get to the information fast as possible. To optimize your images, you will need to do all of the following steps:

1. Lower the image dimensions and resolution using editing tools 

What can cause such large images are the image dimensions and/or the image resolution. Usually, when you download images from places like iStock or Pexels, the resolution tends to be higher than the standard web resolution of 72 PPI (pixels per inch). If you see that is higher than 72 PPI like 200 PPI or 300 PPI, this typically causes really large file sizes.

You can use the following free photo editing tools to adjust the resolutions and dimensions of images:

1. Pixlr image editor works online in the browser. Make sure you have the latest Adobe Flash up to date to edit your images.
2. GIMP has been around for many years. This free and open-source image editor looks and works like Adobe Photoshop. It can be downloaded for Mac, Linux, or Windows.
3. Paint.NET if you've ever had Windows it already loads with a basic Paint image editor. Paint.NET has more advanced features to edit images.

2. Free online optimizing image tools available for compression

You will upload your downloaded image after reducing the resolution and the image dimensions through an image editor. When you save your image to your computer, pay attention to where you download and rename the image file to search terms that relate to the image. 

1. tinyPNG this image file compressor supports JPEG and PNG file type and does a quick job of reducing the file. You can do a bulk upload and download for your images.
2. Compressor.io this compressor shows a preview of what the image looks like when the file size is compressed. It supports JPEG, PNG, GIF, and SVG image file types.
3. Optimizilla you can do a bulk upload and download for your images.

3. Don't neglect image naming conventions or alt and title attributes for SEO

Don't forget to add the alt and title attributes to all the images you upload to the site through the rich text editor. You will always need to fill out the "Image Description" and "Title" field to maintain good SEO health on your images and overall website.

It's very important to have an image file name that makes sense, relates to the image, and has notable keywords that search engines can crawl. 

So which image name is more searchable by search engines? DCMI0003_IMG.png or tendenci-ams-puppy-logo.png?

Here's what that looks like in the code for alt and title attributes:

<img src="tendenci-ams-puppy-logo.png" alt="Tendenci AMS puppy logo"  title="Tendenci AMS - Puppy Logo Sticker">

Did this answer your question? If not, please contact our support team for more information.

Sign up for our Tendenci Open Source AMS Newsletter for more. Sign-up Now!