Image Optimization Techniques for Enhancing Web Performance

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:

Optimizing Image Sizes for a Cohesive and Professional Website Look

Regarding the banner size, we should aim for a width of 1200px or less to ensure it appears sharp on both larger and smaller screens. The height of the banner can remain at 350px.

For images included in the body of the website, it's likely that they will vary in size and dimension depending on the client's preferences. Bootstrap defines "mobile/tablet" screens as those with a width of 768px or less, but we don't necessarily need to fill up all of that space. To optimize viewing on mobile and tablet devices, we can aim for a width of 500px or less for these images, while the height can vary based on the image's aspect ratio.

While we may not be able to control the exact sizes of the images that clients upload, it's still important to maintain consistency in size and aspect ratio throughout the website for a cohesive appearance.

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.

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.

 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" fields 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!