Published on

Learn how to optimize images for web

Authors

We all know how the online world works nowadays. Remarkable user experience (UX) as a must-have, the need for mobile-responsive websites, and of course, speed site as one of the very first things to take into account. When our business is online-based we need to understand some practical aspects about one of the main components of our webs: images. Optimize images for web improves the user experience, the loading time, SEO and more...

The truth is that most of the websites' regular user visits during the day are made up of them. Imagine if every page took ages to load! We’re so used to navigate from here to there, scrolling and scrolling, jumping from our favorite online store to our Facebook page, that speed is something we only consider when we notice that’s missing. E-commerces and social media are the king and queen of image-based websites but not just them. We live in a visual world. If your business is online, you need to boost your daily traffic to see a difference in sales. And to accomplish that, you need your website to be as optimized as you can. Why don’t we start out with image optimization? Let’s do it!

It’s all about optimizing images for web

We want your life to be easier. Whether you’re an e-commerce owner, a developer, a graphic designer, a photographer or a manager from a cool startup. If you’re just a person who wishes his or her website was faster, we’re here for you as well. 

There’s a myth around this crazy online world that when you have a lot of images, your site will be slow. Not true. There’s a way you can have both: a fast site and beautiful images to illustrate your product or service. What in fact is true, is that when it comes to images, it may seem overwhelming to do everything by yourself. 

Piio does everything!

6 essential things we take care of

Correct Image Format

You must have heard about different image formats. We’ll sum up for you the most popular ones so you get a general idea. You can read more about formats here

Choose the correct image format for your website

JPEG: is a lossy format. In general, it reduces the image size incredibly but also has a tendency to pixelate when compressing much.

PNG: is a lossless format that is quite used online. One thing that is appreciated about png, is its built-in transparency. This is why it’s associated with graphic design.

TIFF: Another lossless format, used especially for photography. It displays really high quality but also creates a huge file. It’s perfect for professional photography impressions.

RAW: It’s what comes out of a digital sensor. It’s not an easy readable format and creates a giant file.

GIF: Usually, it’s the chosen format when it comes to an animated image.

In Piio we choose the correct format for the user. Have you heard about WebP? Google reported that it impacts heavily on image delivery and consequently, on sales! WebP is the king of formats. It helps you achieve the best out of your images! Sharpness, quality and small files. This is the format we choose.

WEBP: It is an image format that utilizes both lossy and lossless compression formats. It essentially combines some characteristics of other image formats but also accomplishes almost 30% less weight. You can read more about this awesome format here

AVIF: is another Image Format and it

Smart adapt

Piio Adapt images in all devices

Not only we convert your images to WebP or AVIF- the ultimate image format - but we adapt it into another format when we detect that WebP won’t be the best choice. For instance, when using some browsers - such as Internet Explorer or Safari -, WebP may not be compatible. In these cases, we convert it to JPEG or PNG. The problem easily solved!

Size appropriately

illustration: Size appropriately

Depending on the content area you want to fill, you may need a different image size. It would be a waste of bandwidth to use a large image in a small area. You can learn more about the sizes here. Resize images isn’t hard easy and there are plenty of free online tools. We recommend ResizeImages.com: easy and fast. 

But… we also can do this for you ;)

Fully optimized Images to each visitor’s device and browser.

As we mentioned before, one thing we do in Piio is to be efficient. We really prioritize image quality but we never sacrifice speed. So, we adapt the format smartly and we optimize it according to the browser. 

But, and this is the main difference between Piio and others, we also optimize it depending on the device. You heard well: we acknowledge the exact size that an image needs to be delivered. 

Did you know that in mobile you may have a 100ms delay that can cost you potential conversions? Most of the users use mobile nowadays so slow page loadings could hurt your performance.

Have you tested your image speed? You can have a free diagnosis. Spoiler alert: it may be hard for you to see…

Here’s an example of a cooking blog, with a lot of images on it:

Screenshot: analysis of a real image speed test

Compress carefully

We’re proud of this: we don’t just compress your images but they make them look even better. We understand the width and height that an image will be delivered on the browser-based on the HTML and CSS style. This means that one pixel of the image relates to one pixel on the device display. Result? Very sharp and high-quality image. All of this, accomplished in a small file. One of the key steps of image optimization.

Illustration: compress images without losing quality

Lazy loading with Smart Technology

Piio is smart. So smart that we can know the exact moment when the user needs a certain piece of information. This means that we optimize loading times. How do we do it? We gradually load the images, following the user’s needs. He will have the images delivered in the precise moment he needs them and in the best quality ever!

Image Optimization and Lazy Loading

How is Piio different?

  • You have unlimited images and transformations. We don't charge you for each mega transferred. Take a look at our free- plan :)
  • Unlimited data transfer.
  • Top Tier Global CDN, with 160 edges and regional caches worldwide. I'm not sure about what a CDN is?
  • It is very easy to use and simple to integrate. Check out our docs!
  • Piio evolves with your site and doesn’t alter your existing content. It doesn't need maintenance.
  • Forget about all the image optimization process.

What can Piio do with your website?

  • Piio makes the experience very personalized for each case and user.
  • Piio understands how your customers are interacting with your site and gives each customer a fully optimized image every time, depending on the device and browser they are using, which means your visitors will have a personalized experience.
  • It can reduce page load times, improves your customer experience, and boosts SEO.
  • And Piio uses lazy loading to deliver images faster, without sacrificing image quality.

Let's check the Image Speed test, and analyze How much faster your website can go.

What are the benefits of using PIIO?

Piio is really easy to integrate with your website and when you do it, you get the results you were expecting. For instance, some benefits of using Piio are:

  1. Improving user experience. The user will get the image with the best quality, in the right size and in the proper format depending on the browser and device.
  2. Boosting your SEO. By significantly reducing the loading times, your site will get higher in the Google ranking. Ranking on top in Google equals more traffic!
  3. Getting weekly metrics so you can check by yourself the benefits of using Piio. You can take a closer look at how Piio works and especially on how it’s impacting your daily traffic and sales. It's important to understand the Core Web Vitals Metrics.

Start optimizing your website and deliver an unforgettable Digital Experience.