Categories
Essentials

How to Optimize Images For the Web: All-in-one Guide

Images add visual appeal, break up a wall of text, and aid readers in understanding your content better. However, many site owners don’t optimize their images correctly.

This leads to slow loading websites, and damage to the chances for your website to rank on search engine result pages.

Don’t worry though, we’ll explain everything you need to know on how to optimize images for web applications.

Step 1. Pick a suitable format

Different image formats produce images with varying quality and size. These differences are largely caused by the format’s type of compression: lossy or lossless.

  • Lossy formats reduce the size of images by deleting some data from the original file.

However, the process also decreases the quality — even to the point of pixelation if you want to have an extremely small image size.

  • By contrast, lossless formats reduce size without removing any data. Instead, it reconstructs the image and rearranges the data more efficiently.

The size of lossless formats tends to be larger than lossy files, but the quality of the original file is not changed.

To understand image file formats a little bit better, let’s take a look at some popular formats. We’ll learn their characteristics and the type of compression that they support:

JPEG

Commonly used for photographs, JPEG — also known as JPG — is a lossy format image. However, despite the size reduction, JPEG images can still maintain great quality.

Besides giving the best image quality for the smallest file size, this file type supports more than 16 million colors. Many webmasters use JPEG images for their websites.

PNG

PNG is a lossless format that supports more than 16 million colors.

However, because it doesn’t allow for heavy compressions, PNG files tend to have a larger size than JPEG files with the same quality.

That’s the reason why PNG is the default format for screenshot software. Screenshots usually contain lots of colors and texts, and this file type makes sure all elements still look sharp.

Since it supports alpha transparency, many designers use PNG for logos and icons. The file type lets them create logos without any background colors, making them more flexible to use.

GIF

GIF is a lossless format that’s limited to 256 colors only. Thus, it’s best suited for images with fewer colors and defined edges, like logos, illustrations, and icons.

Most people will associate GIFs with animated graphics, as it was the first format to support animation. Some people even use it to make short explanatory videos on their websites.

WebP

Developed by Google in 2010, WebP is an image file format that allows for lossy and lossless compression.

This format also supports alpha transparency and animation. You can use it for logos, icons, and animated graphics.

WebP produces higher quality images than JPG and PNG files. However, this file format does not work on Safari and Internet Explorer.

SVG

SVG files are lossless and vector-based.

You can scale SVG images to any size without changing the quality. However, you need to use vector-based tools like Illustrator or Sketch to create SVG images.

Compared to PNG, SVG file looks sharper and is smaller in size. It’s a great format to use for icons, logos, and other simple graphics.

To use SVG for your website, you must know the basics of HTML to embed this image format to your web page.

Step 2. Compress your images

Compressing images reduces the memory size of the files.

As mentioned before, the image format you choose will determine the type of compression you’ll use.

  • Lossy compression is irreversible.

Once your image loses some of its data, you cannot undo the process and restore the original quality. Make sure to have a backup file before compressing your image.

  • On the flip side, lossless compression is reversible.

This process allows you to convert the compressed image back to the original one.

Here are two methods you can choose to compress your images:

Using GIMP

GIMP is a free, open-source image editor. It’s one of the best alternatives to Adobe Photoshop.

Before using this tool, you need to download the software. Then, you have to compress your images one by one manually.

You can follow these steps to start compressing your images:

  1. Go to File -> Open and find the image you want to compress.
  2. Open the Export Image dialog box by navigating to File -> Export As.
  3. Change the file name. That way, GIMP creates a new file when compressing the image.
  4. At the bottom left corner, click Select the File Type and choose the format you wish to use and then click Export.
  5. Another pop-up dialog box that contains the quality control setting will appear. You can reduce the image quality for a smaller file. Don’t set it too low as your image might become pixelated.
The quality setting of GIMP image editor.
  1. Once you are done, select Export.

To see the difference, we compressed an image from Zyro’s gallery using two settings — the quality of 75 and 10.

Here is a side-by-side comparison between the original and the compressed versions:

The comparison of burger images before and after compressed.

Compressing the image with the quality of 75 reduces the file size from 1.3 MB to 800 kB. However, it produces a picture that still looks similar to the original one.

By contrast, the quality setting of 10 produces the poorest quality image with the smallest file size of 100 kB.

Using ShortPixel

Compressing many images can take much time if you do it manually. ShortPixel lets you compress up to 50 images at once.

It’s an excellent method if you have a ton of images that you need to upload.

Supporting JPEG, PNG, and GIF, the online tool allows you to perform lossless and lossy compression. However, your image files cannot be more than 10 MB.

Compressing with ShortPixel takes only a couple of steps.

Go to the website and drag the photos from your computer into the web page. Wait for the tool to finish the process, then click the download icon to save the results.

The homepage of ShortPixel image compressor website.

To compare the result with your original image, click the small eye icon next to the download icon. Your picture will appear, and you can drag the line to see the difference.

The comparison of a burger image before and after compressed with ShortPixel.

Step 3. Resize your images

Resizing is another great way to optimize your images. The process changes the image’s dimension and changes the number of pixels that construct your picture.

After compression, you may need to resize your images if the dimension doesn’t fit your site’s layout. Image compression only reduces file sizes without changing the height and width.

You can try using a photo editor called BeFunky to resize your images. This tool is free and supports bulk image resizing.

Unfortunately, it only supports JPEG, PNG, and PDF formats.

To start resizing your image, go to BeFunky’s website and follow these steps:

  1. Click Photo Editor under the Create menu to access the main photo editor.
  2. Drag and drop your image to the photo editor. After that, choose the Resize option under the Essentials tab.
Resizing a burger picture from BeFunky photo editor.
  1. On the left menu, you’ll see the Resize settings where you can adjust the height and width of your image. Once you’re done, click on the check icon.
The resize setting in BeFunky photo editor.
  1. Navigate to Save -> Computer from the top menu. Click Save and download the optimized image.

Step 4. Name your images correctly

Names are crucial for better organization. If you have a bunch of photos named IMG123.jpeg or Screenshot_1.png, it’s hard to keep track of your files in the future.

Google recommends using short but descriptive names to improve SEO. Three to four words should be enough to describe the image. Use hyphens to separate the words.

This is important as the name will be used as the image’s URL. For instance, the URL for cupcake-with-sprinkles.jpeg would be yoursite.com/img/cupcake-with-sprinkles.jpeg

Even without opening the link, users will know what they will see.

Step 5. Write alt text for your images

Alt-text is a short line that describes your image, and it serves multiple purposes for your site.

  • Your site will display alt-text when the image fails to load. As a result, visitors will still understand what the image is about.
  • Alt-text also helps visually-impaired visitors who use screen readers to access your page. Screen readers read the alt-text out loud so they’ll still get the full context of your content.
  • For search engine crawlers, alt-text serves a similar purpose. With a good description, your images will appear on search results when people use corresponding keywords.

Include target keywords in the alt-text to boost the content’s ranking. However, only use the keywords if the context fits as you might mislead readers.

Your alt text should be short. Make sure to use less than 125 characters, because most screen-readers will stop reading the text at this point.

As an exercise, let’s try to create an alt text for this cupcake photo from Zyro’s gallery:

Cupcake with white topping and yellow sprinkles.
  • If you simply write “A cupcake” for the alt-text, then it’s not descriptive enough as it doesn’t tell how the cupcake looks
  • Instead, try to explain what’s going on in the image in one phrase
  • For instance, you can write “Cupcake with white topping and yellow sprinkles”

Adding an alt text is pretty simple if you use Zyro.

Adding image alt text from Zyro website.

All you need to do is go to the site’s editor page, click the image, and select Edit image -> SEO. Fill out the Image alt text box, and you’re ready to go.

Why you should optimize images for the web

Optimizing images has a direct impact on your site speed, SEO performance, and storage usage.

  • High-quality photos tend to have large file sizes. When you use an image without compressing or resizing it first, your page size will be greater.

The more the page needs to load, the more time it takes, affecting load speed.

  • With that in mind, site speed will affect your ranking in search results. Since 2009, Google has included speed as one of its main ranking factors.

You’re missing out on a big opportunity to gain organic traffic if you have a slow-loading website.

  • A huge 35% of visitors will leave your site if it takes more than five seconds to load, according to Trinity.

A one-second delay can cost you thousands of dollars in lost traffic.

  • Optimizing your images will free up server disk space.

You can use the available space to store more content, host a larger database, or even add new features to your site.

How to optimize images for the web recap

Images make or break your website. Make sure that they won’t hinder your site performance and SEO efforts.

Steps to optimize your images include:

  • Pick a suitable format — choose a format that gives the best quality and size for your image
  • Compress your pictures — reduce the file size of the image using GIMP or ShortPixel
  • Resize your images — use BeFunky to change image dimensions to fit perfectly on your website
  • Name your image properly — write a descriptive name instead of using generic ones
  • Write alt text for your images — describe what’s inside your picture to make it visible for search engines and improve user experience

After learning how to optimize images for the web, now it’s time to use your stunning photos on your website.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.