Published on

The Most Complete Guide for Image Optimization

Authors

If you are reading this article it is because you are a Developer, Marketer or you manage an eCommerce or a website with a lot of images. Image optimization is the first step to achieving a successfully optimized website, improving Page Load Times, boosting Conversions, and delighting the visitors with a great user experience.

Attracting users to your homepage can be expensive and complicated. Still, if you don't take advantage of these opportunities when the user is accessing your website, you will lose potential customers and sales. Each second counts.

Even if your IT team runs out of time or don't know what to ask them to improve the web performance, try to implement some of this article's suggestions and improve your Image Optimization and Web Performance issues.

Walmart: Case Study with Piio Image Optimization

This is a caption of an Image Speed Test run for Walmart and the potential savings they have by improving some Image Optimization aspects in their website. There are two ways: apply all the suggestions manually or integrate technology like Piio.

The Walmart website has a 27% of potential improvement opportunities. How do we get this number?

  • The Total Page Weight could be 3x times lighter.
  • The Total Image Weight could improve from 2 MB to 0,43 MB

All these aspects will make your Page Load Time faster, and of course, your users will like and enjoy staying at your website more time, resulting in less bounce rate and more conversions. Google will also appreciate your improvements and will rank your company higher ;)

Chapter I: What is Image Optimization?

If you want to cover all your bases, you should give Piio a try. Images.JS automates the Image Optimization process with a seamless integration. Piio also has a new product called EWA (Edge Web Accelerator) that optimizes everything, including images, JS, CSS, HTML. The best part? It makes any Piio integration easier and no code.

To reduce an image file, try resize images, a free tool for resize, crop and compress images (super easy to use and free). It uses a smart compression algorithm to avoid any quality issues, it allows you to change the image format and vary the compression output to fit your needs.

Learning the basics of image optimization will help you to improve your website's user experience — it will also help anyone wondering why a relevant Google Images search query won’t bring up photos from their website.

Let’s take a deeper dive into what image optimization is.

Difference between Image Optimization and Image Compression

Many people wrongly assume that image optimization is just about making images smaller — but that’s image compression.

Image optimization involves size reduction and maintaining high quality.  That’s because image optimization must achieve both these objectives.

The Difference between Image Optimization and Image Compression is about image quality. Compress an image means making it smaller, lighter, and lose image quality. Image Optimization means to reduce the image file size and keep a high-quality image and lighter.

Image optimization consists of all the following areas:

How Image Optimization process works?
  1. Reducing file size (try with Resize Images or with Tiny jpg)
  2. Choosing the right file type (JPG, PNG, WebP, AVIF)
  3. Selecting image dimensions and product angles
  4. Testing images
  5. Consider content delivery networks (CDN)
  6. Select images that really fit your content
  7. Using alt attributes
  8. Art Direction

By focusing only on image compression, you may attain the first objective, reducing image weight; when done correctly, image optimization complies with all ten! We’ll be talking you through each stage later in the guide, but for now, it’s just important to get a clear picture of what exactly image optimization entails.

To ensure that an image retains its quality is vital to think about the second and third options. For instance, PNGs are higher quality than JPGs but take up more file size — great for graphs but unnecessary for photographs.

As you can see, points 7 and 8 on the list above go beyond even retaining an image’s quality. They involve the third aspect we discovered in our introduction: boosting SEO and improving user experience. That leads to a meaningful discussion: why we optimize images in the first place.

Importance of Optimizing Images

Optimizing Images improves page load times, which search engines like Google use to determine how high a website should fall in its run. Therefore, optimized images help boost SEO and improve user experience, making it a fundamental part of web performance, eCommerce, and SEO.

Page Load Affects User Experience

It is not only about having a faster website. Quality, format, color, and compression are some other aspects you need to consider. We should also consider the website technology (CMS, code) and where the users enter the website, which browser, and devices.

This article will talk about all these six aspects and others to get a solid idea of image optimization and all that it matters.

Discover how to optimize images in your website and learn why First Contentful Paint is more important than Page Load.

Why should you optimize images?

When you optimize images positively impacts your web performance, reducing load time and increasing website speed. Even if it's just a few milliseconds, that could be the difference between your website either gaining or losing countless website leads and sales. No matter which platform you use to host your website, optimizing your images isn’t something you can overlook, and it’s easier than optimizing code and the plugins used.

Optimizing images will impact by increasing the chance of leads converting. It might sound like an exaggeration, but when was the last time you subscribed to a newsletter or made a purchase on a website that took multiple seconds to load or was filled with low-quality pictures?

Evidence shows that 47% of consumers leave a page when a page takes more than three seconds to load. Just think of all those lost sales! And guess what the biggest contributor to slow loading times is? An image-heavy website.

Google knows all about web performance and the impact on user experience. That’s why they reward well-optimized websites and punish slow loading websites by pushing them down the rankings and search page.

But this is just the start. Even after you’ve compressed images, there’s work to be done — what about all those potential website visitors you could lose by not appearing in image searches?

Going back to the list above, this is why we:

  • Use alt attributes — to tell Google what an image is and make your ideas accessible.
  • Name images — to help with SEO
  • Use image sitemaps — to help Google discover images.
  • Choose good thumbnails — to make your result more appealing to searchers.

Optimizing images across platforms

One of the aspects of image optimization to consider is if your website uses a CMS. It will allow you to manage the best image format, install plugins for image optimization (and many other things), and find that “sweet spot” for your website’s image quality.

Shopify

Just because Shopify makes it quick and easy to set up an online store, it doesn’t mean that you don’t need to optimize your images. Although the platform already includes a certain level of optimization, testing and optimizing multiple types of devices can take you to the next level. There are also some  SEO aspects you can take care of, like using an alt text. Uploading the images to Shopify in the right format will be the first step you need to take. Shopify recommends using JPGs for product images, banners, and blog posts but PNGs for logos, icons, and borders. At Piio, we recommend Images.JS for any Shopify website to resize, adapt and deliver the correct image format for each visitor depending on the browser and device.

How to Optimize Images On Wordpress, Shopify, Swell, Angular, Magento and React with Piio

WordPress

On WordPress, you have the choice between downloading a plugin to optimize your images for you and carrying out the process manually — this comes down to the level of control you want. Doing the process manually is better than nothing; using a plugin that delivers your images through a CDN and optimizing multiple devices and use cases is the best possible solution.

How to Optimize Images On Wordpress with a Plugin with Piio

Swell

Swell is a headless e-commerce platform that lets you set up e-commerce without coding, so it might be tempting to customize your storefront without paying much attention to more technical aspects.

React

If web developers built your site with React, they could set up images essentially self-optimizing using inbuilt APIs. Although this is more complex to set up, it yields excellent results.

You can also optimize your images by integrating the react library - here are the docs open for anybody to check them out.

Make your images load faster on React with this library

VueJS

Another technology is VueJS. It works similarly to any other technology above regarding image optimization. Although there are not as many plugins, if you want an entire solution for image optimization check the docs to start the Piio integration.

Angular

Similarly, you can use the Angular programming language to optimize images automatically using plugins. However, it’s also an option to go down the manual route and optimize the images with online tools.No matter which platform you created your website on, checking the loading time of your website’s images using a free tool like Image Speed Test is an essential first step toward improving your SEO. To learn more about how you can optimize your images, keep reading.

Learn how to optimize images in your website super easy in a few steps and understand more deeply how the image optimization process works.

If you want a more technical article regarding image optimization learn more about How to use CSS Display none and How to use responsive images.

Chapter II: The basics you need to know about web images

First things first: decide which image format and size you should use. Otherwise, you will probably end with a slower website, higher bounce rates, and fewer conversions. By using the right image format, you will also save bandwidth and disk space on the server. This could be easily avoided if you know the different image formats and their usages for each device’s browser and dimensions.

Image Size vs. Image Resolution

Before discussing formats, let’s talk about the difference between image size and image resolution to understand the different kinds of formats even more.

The Size (PPI) of an image refers to the dimension, which means length and width, measured in pixels most of the time.

The Resolution (DPI) of an image refers to how many dots per square inch the image will have when we print it. It is only the print resolution. The biggest thing to note between DPI or PPI is that DPI is used for printing and PPI for digital images.

How to measure the image file?

The unit of measurement of an image, you have probably heard thousands of times: Megapixels (MP) and megabytes (MB).

Both MegaBytes and MegaPixels refer to digital objects’ size, but they measure entirely different aspects of an image. Pixel Refers to the length and width that means the image’s dimension, and the MegaBytes measure the “weight.”

MegaPixels (pixels or px)

  • Measure the size of digital images, sensors, and displays.
  • Pixels are the length and width, or actual physical size of an image.

MegaBytes (MB)

  • Measure the size of digital files (such as photos, documents, etc.)
  • MB is how big overall the digital file is.

Megapixels and Megabytes measure two different but complementary aspects of an image.

Raster and Vector Image Files

Raster Image files

These files are composed of pixels (point with data and color) that many pixels together form an image. The Pixels of an image defines the image resolution. It's important not to stretch and distort the image to avoid losing quality and pixelate the files. For that reason, and to maintain image quality, avoid changing the dimensions and keep the proportions. Save raster files with the exact dimensions needed. You can help you with Resize images tool or see the step by step resize image section.

All digital photos we see online or printed are raster image files such as PNG, JPG, GIF -we are going to talk about them later.

Vector Image files

Vector files are perfect for creating assets or graphics. They are constructed using proportional formulas and not a pixel. That's why you could resize them without losing quality. The master file of a brand, the logo, for example, should have been created as a vector file. This allows you to change the color, format, and size (as many times and sizes you want: mini logo or as big as an elephant), avoiding touching the quality.

AI, PDF, PSD, EPS are some of the most popular vector files. Designers use these Image Files to create master files; they are not used in a website. The significant disadvantage is that you need a program to read it and see it for most of them. For example, .psd is a photoshop extension, so you need Photoshop to visualize it.

What is Lossy and Lossless compression?

There are two ways of image compression: Lossless or Lossy.

  • Lossless compression maintains the image quality, keeping the image data (same pixels quantity). This type of compression allows us to restore the image in the future, rescuing the original data.
  • Lossy compression removes data (pixels) from the image, identifying the pixels that are not relevant, and deciding to delete some data, resulting in compromised image quality.

Chapter III: All about File Size and Image Formats

Have you ever thought about when you should use JPG or PNG? There are plenty of image formats. Let’s start by knowing what PNG and JPG are. After that, we will jump into other you should know as well for your website and other digital contents and how to resize and adapt for the dimensions you need.

What is the difference between PNG and JPG?

What is PNG?

The PNG stands for Portable Network Graphics, and it is used for websites. It is a lossless format (suitable for storing images to be edited) for websites, not for printing.

One of the main advantages of this image format is that it allows saving the image with transparent backgrounds, such as logos, and a wide chromatic range.

What is JPG?

JPG or JPEG is maybe the most common image file type on the web. This kind of image format is a lossy format compression, which means that the image quality decreases when we resize it. On your computer, a JPG file will look like this or similar. Paying attention to the resolution and file size with JPEGs is essential to produce a nice-looking project.

Which is the difference between JPG and JPEG?

None. It is the same image format. JPG is the shortened name for JPEG because of windows requirements, and now many image software program name for default JPG instead of JPEG. So, there is no difference between JPG and JPEG files.

What about other Image formats?

The most common image formats are JPG, PNG, but many others will improve user experience and web performance.

  • Jpg
  • Png
  • Avif
  • WebP
  • Tiff
  • Gif
  • Heic

Some of the browsers do not support some Image formats. Keep it reading and discover how to choose the best image format for your website.

The correct dimensions, depending on the image usage.

Have you ever heard the term responsive web design? The fathers of the UX and design, the Nielsen Norman Group, explain it as a web development approach that identifies the screen size and orientation of the device the visitor is using and adapts all the content and appearance of the website, creating dynamic changes, depending on if it’s mobile desktop or tablet.

It is a challenge to design a website for multiple devices (cell phones, for example, have different screen sizes and definitions).

To solve this problem:

  1. Do it manually: upload one image format that all the browsers support, such as PNG or JPG, and adapt it for the most 30 used screen devices. Of course, it will take a lot of time, but this will improve the user experience.

  2. Do it with a plugin: Depending on the Technology, you could have a plugin that solves part of the problem, allowing you to upload one image format, and the plugin will resize it for you for the most ten used screen sizes.

  3. Do it with smart technology: Use a smart technology solution that does it for you automatically. Image.Js is one of the Piio solutions that allows you to upload your best image (the heaviest in MB), and Piio will decide:

  4. The correct image format, depending on the browser.

  5. The correct size, depending on the device and screen size.

  6. Resize it carefully, without losing quality and pixels that affect the user experience.

  7. Learn with each new user that enters your website to improve every time a better user experience.

  8. Enhance the user experience.

  9. Boost the SEO of your website by delivering a faster experience.

It is SUPER important to deliver all the content of your website, in the correct size and format, no matter which technology do you have (Shopify, Swell, Magento, WordPress, Wix, or your code website), you can install Piio, and if you are lucky we have some plugins! You can start with the free trial and let the magic begin.

Image Converter + Image resizer = without losing quality

Resize Images

  1. Choose the image or bulk of images you want to resize
  2. Open the Resize Images Tool (Free - no limits)
  3. Do one of the following:
    a. Drag and drop
    b. or browse the images from your computer.

Crop the image and rotate, in case you need it

Resize Images tool print - crop and resize example
  1. Click the Resize button, select the dimensions (only if you want a smaller or different size of your original photo), and click Done.
  2. Do one of the following:
    a. Download your compressed image
    b. Send it by email
    c. Click the advanced Option button and select other image formats, such as AVIF, WebP, or select lossy compression option.
Advanced Option When Resizing Images: Lossy Compression, Avif Format, WebP format
  1. Enjoy your image compressed or in a new image format and without losing quality!

Chapter IV: Testing Images and improving the User Experience

Knowing the opportunities your website has and how to take advantage of them is the key to success regarding web performance and image optimization. Let’s start with analyzing your website.

How To Test Your Images and Website?

There are hundreds of free and powerful tools to use to analyze any website:

  • Page Speed Insights (or Lighthouse) designed by Google. It will give you the Google metrics known as Core Web Vitals.
  • GTMetrix is another tool with a different interface, but it’s effortless to find what’s wrong and what’s working well for you.
  • In terms of analyzing content specifically and images (it is complementary to the ones we mentioned above), the master tool is the Image Speed Test. What is the Image Speed test? It is a web performance online tool created by Piio that analyzes and provides you with many image suggestions and actionable tips to improve your image optimization and web performance. You can set up to receive emails with a new test every month at no cost. This tool focuses exceptionally on images and how you can improve the image loading on your website.

You can find many other tools to analyze your website; it is crucial to understand the web performance idea and apply it to your website. Remember, don’t forget about Monitor and track your web performance.

KPI's to track your web performance

KPI or Key performance indicators are the metrics to measure your web performance. Core Web Vitals are a set of metrics created by Google to monitor any website’s performance and prioritize the user experience. The Page Speed Insights report, for example, gives you the status of your website regarding these metrics.

The Core Web Vitals are focused on three main aspects: Loading, interactivity, and visual stability of your website.

  • Largest Contentful Paint (LCP) – how long does the heaviest visual content for the user to load. Measures are loading performance.
  • First Input Delay (FID) – how long it takes the website to respond from when the user clicks on it until the event the user is expecting occurs. E.g., typing on a form.
  • Cumulative Layout Shift (CLS) – how much-unexpected layout shift of visual page content. The CLS measures visual stability.
Metrics os KPIs to track your web performance

Other metrics and insights you should consider are:

  • Conversion Rate - How many visitors turn into clients on your website. Clients are related to your goal: could be a purchase, sign up for your newsletter, download an ebook.
  • Bounce Rate - As many users convert into clients, many others visit your website and leave it without conversions. It is essential to understand why they leave, and what they were looking for that we haven’t solved.
  • Top Traffic Sources - such as Social Media- and which one-, Google Ads, Facebook Ads, Blog or content leads.
  • Device - Be sure which is the most used device, whereas desktop, mobile, or tablet.
  • CTR - (click-through-rate)
  • Customer Satisfaction - Always be opened to feedback (online and offline) and learn about what you can do better. You could measure it with the NPS (net promoter score) - on a scale of 1 – 10, how likely is that a customer would recommend you based on their experience. Continue reading and learn about the user-centered methodology.

All these metrics are super important if you track them. And not only once in a while. You should do it daily.

Put the User First: Deliver the Best Digital Experience ever.

Bad Customer experience is the biggest threat to any business: always have the user in top of mind. Empathize with it and make the best unforgettable experience ever while your visitor spends time on your website or eCommerce.

It’s challenging to set a unique meaning of a great User Experience. The main goal is to achieve the perfect combination of users’ needs, values, and abilities in the specific context while using the product. Don’t focus only on creating usable products; put the energy in understanding the needs, the satisfaction that gives it to the user, the efficiency, and some other aspects that allow you to empathize with your customers.

“No product is an island. A product is more than the product. It is a cohesive, integrated set of experiences. Think through all of the stages of a product or service – from initial intentions through final reflections, from first usage to help, service, and maintenance. Make them all work together seamlessly.”

Don Norman, inventor of the term “User Experience.”

In terms of User experience, you should know the user’s interaction in every life cycle of your product. Make it as easy as possible and try to keep the longest time on your website. The more the user stays, the more opportunities to convert or make a purchase.

Chapter V: Added traits to Image Optimization and SEO optimization

Image SEO

The images provide the user a better website experience, and the images are an extra resource for Google to rank a website higher.

Imagine that your search translates into this:

How to improve user experience with image SEO Optimization with an Oreo example

That’s the reason why including images on your website should be a must. However, there are special considerations that we should take if we want our images as a critical tool for Google to understand the content of the website and rank as a search result, generating impact on new users.

What should you do if you want to optimize your website images for SEO?

SEO is not an easy task, but image optimization for SEO it’s not so difficult. Let’s check some key aspects to take advantage of it.

Myth buster: Image naming

A frequent mistake regarding the image naming is going crazy about how we name an image. Probably you have found more than once images on the Internet under the name “unnamed-2.jpg” or worst “pic1.jpg”. Giving a "logical name" will make your work easier to find on your desktop, but not for Google.

Google is super smart and it understands a photo, graph or any content, and analyzes if it follows the content idea.

The Title

Adding a title to the images helps the lecture (for any user) and gives accessibility to the content.

The Title is the element that appears when you hover over an image and describes what it is. Remember to use the main keyword from the content, as long as it is related to what is being shown. In terms of SEO, naming an image with a relevant keyword may probably help you.

Image ALT tag

Another essential element that allows Google to understand an image’s content is the ALT attribute or Alt Tag. This HTML tag describes the content by using two components:

  1. The use of keywords
  2. The context in which the image is used.

In case the image couldn’t be shown, the ALT attribute will be your superhero. It will replace the image that couldn’t be shown with the description (ALT tag) you have written, and the user could understand the image content without seeing the image.

Why ALT tags are important for SEO and image optimization when broke in your website

ALT tag Myths

There are some myths regarding the use of ALT Tag in SEO that we would like to demystify:

  • The ALT tag doesn’t replace the content of the website. The images help the user imagine a product or give something, but you must create text and content to help the images make sense to the user. For Google, a website only with images is not relevant.
  • The ALT attribute doesn’t work only for SEO. It’s an element that makes an image inclusive and accessible for limited vision people.
  • Not all images should have an ALT tag. It’s relevant only if it has relevant information and makes sense with the rest of the page or section’s content.

One of the most powerful but not very often used resources for SEO is the LinkBuilding. In general, the ALT tag usually is the task that takes the most time to optimize an image, and little time is spent on Link Building.

As we mentioned before, the images help understand the website’s purpose for Google and the user. That’s why adding links from and to the images is super important to add real value and build the user’s navigation path. Link Building will help the accessibility, navigation, and relevance of the image.

The more natural, the more likely for Google

Be as natural you could ever be, and not over-optimize the image for SEO.

  • Try to avoid including images that don’t have any sense with the text (content).
  • Try to avoid using keywords that aren’t relevant or use many times in one image.

Image Weight and dimensions

Don’t forget the importance of optimizing images and standing the requirements of weight and dimensions and thus avoid overloading the web.

All these aspects will impact your SEO. Make sure you check them all and take advantage of any opportunity before your competitors do.

Lazy Loading is a MUST.

Lazy Loading means that the browser won't load the content (images in most cases) until the users need to see them. More technically, the request asking for an image won't be sent until the location of that image in your website enters the user screen or browser viewport.

Imagine that your website contains a catalog of 50 products showcased as thumbnails on a grid. The size of the user screen only allows ten products to be shown at a time.

With no Lazy Loading, 50 requests will be going to the server asking for those images to be downloaded on the user device. If each image weights 1 MB, then 50 MB will be downloaded, and if a user has a network connection of 10 MB / seconds, it'll take 5 seconds to download all that content.

If Lazy Loading is enabled, only the ten product images on the user screen will be downloaded, saving 40MB of data and improving 5x the initial image load time.

Yes, eventually, your user may scroll through the rest of the page, but many times a user may navigate away from that page before scrolling through all the products.

Distributing the network impact overtime is also beneficial; the network is like a road, and if there are too many cars on one road, you can have a traffic jam. The same thing can happen if there are too many requests. Lazy Loading helps prioritize which images to download first and are more critical to delivering a meaningful experience to your users.

Why is it important to use a CDN?

For those who haven't heard the term before, CDN stands for Content Delivery Network. It means that it's a network specifically designed to deliver content or assets to the users.

What content? Usually any content, but some CDN's are better for delivering small files like JS, CSS, or even HTML files, others are specifically designed to deliver Images, and the most elaborate versions are the ones designed to deliver Video.

The CDN will deliver your website content to a user accessing your website from the closest location. This translates into files being delivered up to 10 times faster than using a regular Web Server or a storage service like S3.

Image CDNs

As the name says, Image CDNs have a dedicated architecture and were designed to deliver your website's images faster to the users accessing your website.

Image delivery involves more than being close to the user location; some Image CDN may include image transformations, re-encoding, compressing, and quality control.

Not all users are equal; some of your users may be using a 5G network with the latest iPhone in the market, some others may have an old Android phone with a spotty network connection.

People will access your website from various scenarios. A well designed Image CDN or Image Optimization Service will adapt to that and send different files for the same image, based on the user device, browser, and network connection.

Optimize your website's images and user experience - Make your web load faster when optimizing images

Hope this article helps you understand why your site should always be optimized —images, especially— to improve your customers' experience with your brand and get more conversions.

Do you want to know more? Schedule a call with one of our piio experts!

Remember to track and monitor your performance daily!

Learn how Piio started and the first steps regarding image optimization.