Published on

Optimize images to boost page speed and appearance

Authors

Images are a very important tool that allows us to tell stories. When it comes to a website or even more e-commerce, images have the important role of creating a mood, and basically, to make a website far more attractive. That's enough reasons to invest time to optimize images, right?

When we talk about image optimization for a website, we can think about it in three ways:

  1. Make images look good and at high-Quality.
  2. Make images load fast and improve the Digital Experience.
  3. Build images easy for search engines to index.

An image with the right composition and colors, showing the product, could sell infinitely more than a clever or long description. The well-known phrase "a picture paints thousands of words" describes the meaning and the importance of images in the XXI century, or even more, in the online shop world that we are used to living. If you are an e-commerce owner, the advantages of images become essential: you need to show what you’re selling!

When it comes to images on the website, our goal is to achieve a balance between visual appearance, format, and size. Of course, we don't only want those images to look sharp and crisp, but you need it to load quickly.

Start managing High-Quality Images

Using photos taken by a professional photographer, or even yourself (or your staff) is great. If you haven't, there are high-quality free photo stocks, that you can download and use for free*. We recommend Unsplash, Pexels, and Pixabay. But at the end of this article, I give you a list with more free photo stocks to use it for free.

The importance of starting with images larger than 1MB is that you can resize with free tools such as resizeimages.com and compress them without losing quality and maintaining the original colors. Starting with a smaller image and enlarging it doesn’t usually work very well (it will pixelate).

If you need to build graphics rather than images, or photos with front overlays, there are other free tools that will help you, such as Canva.

Use the correct format and size to load faster

Now, you invested a lot of time shooting, thinking and composing your images. But, your Images have large file size and each image you upload to your website will impact the website’s load time.

null

It's time to pay attention to format and size.

The most commons formats we are used to managing are JPG (JPEG) or PNG files. To really optimize images and don't loose quality we need to know the pros and cons of all the image formats. Let's start with the most common and used.

  • JPGs are usually the best format for photographs and the most known format.
  • Graphics are usually saved as a PNG. This is because a PNG is a higher quality and larger file that JPG. This format, also support transparent backgrounds commonly used for logos.

Moreover, we need to know what are the differences and meaning of: file size, image size and resolution.

File size is associated with the number of bytes. A 10MB photo is too large; a 250KB photo is much more reasonable. If your file size is too big, it’s an indicator that either your image dimensions are too large or the resolution is too high. That means, we need to optimize them.

Image size and Resolution

The Image size is related to pixels. The more pixels, the more quality.

And the Resolution is measured in dots per inch (DPI). Most computer monitors, display images at 72 dpi or 92 dpi. The more dpi, the more your website will slow down.

If your photograph or image is too large, here is what to do:

The huge monster of Google created a new image format, specially designed to help with page speed and combines the best of PNG and JPG. Ladies and gentlemen, we introduce you to WebP to optimize your images!

What’s WebP?

WebP is a modern image format developed by Google. It’s both lossy and lossless. It achieves high quality without the extra bytes, which is essential for you. You can learn more about the importance of having a fast site here.

Despite its lack of fame, WebP is truly an innovative and efficient image format. When compressing an image, you aim to keep the sharpness of the original image, and WebP accomplishes that reducing the size file almost 40% in comparison to JPEG.

To reduce your file size without interfering with the quality we recommend to read more about the king format WebP, check it out here. Converting your files into WebP is very easy with resizeimages.com here you have a step by step guide of how to use this free tool.

Optimize your images for SEO

Website speed is a ranking factor for SEO. So when it comes to loading images, every second counts.

Site speed is a ranking factor for SEO. So when it comes to loading images, every second counts. And what we don't see in our images for Google it's very important!

  • Choose images related to what you are talking.
  • Fill out the Alt Text (describe what's on your images)
  • Name it properly.

Summing up!

  • Create or look for your images with 1MB or more (You can use the image a photo stock linked at the end)
  • Name it properly, and try to use keywords that make sense. Avoid this kind of name 1425315283416–2acc50323ee6.jpg and try to name this way >optimize-page-speed-and-appearance.jpg
  • Resize and crop if it's necessary. (Here you are a free tool)
  • Convert your files into WebP!
  • Upload your images and fill out the Alt Text and Description.

Following these steps will help your images look better, your website/blog load faster, and improve your SEO.

In conclusion, The lighter your images, the faster your website, so that means that your sales and traffic will grow. Learn more about image optimization. Let's start!

* Click here to check 40 free stunningly beautiful stock free image sites.