Category: Image optimization

“Make PNG smaller”, “how to compress JPEG to 50KB”, and “image size reducer” are a few of the things users type to find a way to compress large images into small ones. However, there is more that users can do than compress their images. While this is key – after all, that’s what Tinify is about! – there are other ways to make sure your images are the smallest size possible.

Large images can slow down your website, which may lead to a negative user experience and even lower search engine rankings. While this may sound obvious, it is common for new bloggers and inexperienced website users to overlook this. The excitement of seeing our little corner of the internet come to life can make us blind to more technical points – like whether our website is taking two seconds more to load than what is recommended. 

So, if your website visitors are first presented with a loading symbol before accessing your content, keep on reading!

Let’s go over some tips and techniques for optimizing large image files to ensure that your website stays fast – including using an image size reducer:

1. Use the right image format
2. Use the right image dimensions
3. Compress your images with Tinify’s image size reducer tool
4. Convert your images to WebP
5. Use lazy loading and image caching

“Panda promise” that this will work!

Use the right image format

The first step in optimizing large image files is to choose the right image format. The reason for this is that image formats make a big difference in terms of file size. For example, PNGs end up being larger in size than JPEGs. That’s why JPEG, the most common image format, is the best choice for photographs, while PNG should be used for web graphics, logos, charts, and illustrations, particularly because it handles transparent backgrounds.

Knowing these differences will help you save your images in the right format, which will ensure your website isn’t populated with image formats that are larger than necessary.

Use the right image dimensions: resize and crop images

Another factor that can affect the size of an image file is its dimensions. It’s usual for new website owners to overlook the size of their images, but with this, they might end up uploading too many large images.

Since most websites only display images at a specific size, find out the recommended sizes and resize your images according to them. For example, if you want to upload a header image to WordPress, your image doesn’t need to be larger than 1048×250 pixels. In the end, resizing decreases the file size even further, which will make your website load faster. 

You can resize and crop your images with built-in software on your computer. For Windows users, you can check this link for instructions on how to resize images using Paint. For macOS users, you can use Preview – learn how to here.

If you’re a technical user, you can sign-up for Tinify’s Developer API, which gives you the chance to resize your images within your code, as well as smart cropping options.

Use an image size reducer: Compress your images with Tinify

Another effective way to optimize large image files is to compress them. Image size reducer tools compress the file size of an image by removing unnecessary data and reducing the number of colors. Compression tools are quite effective at reducing the size of large images without any noticeable loss in quality.

According to the e-commerce platform Shopify, a good rule of thumb is to keep your image file size below 70KB. This can be difficult to achieve with large images, and that is why they recommend using image size reducer tools, like Tinify.

While some compression tools give you the chance to choose the level of compression, Tinify’s algorithm is designed to optimize images to their fullest extent at the click of a button. So, when you upload an image to Tinify, we will analyze each image, and based on this, the best optimization level will automatically be determined. There’s so much website owners have to worry about that it’s important for us that they can save time in the process of optimizing their pictures.

If you have a website, you can use Tinify’s analyzer to discover how much loading time you’ll save by compressing your images.

To compress them, you can drop them directly to Tinify’s homepage and upload the compressed image back to your website. Free users have a limit of 5MB per image, but if you find yourself stuck with larger images, you can take advantage of our Web Pro subscription. For WordPress users and developers, there’s an easier way to compress images. All you have to do is to create a Tinify API account, and all your images will automatically be optimized for free up to 500 compressions. 

Convert your images to WebP

Okay, perhaps now your website loads faster than ever – no loading symbol to exhaust your visitors! However, when you add your website to Google’s web analyzer, you realize that more can be done to optimize your images… Like converting them to next-gen image formats. Unlike JPEG and PNG, next-gen image formats were created for web use, which means they’re smaller in size to load faster. 

One example of this is WebP, created by Google. It is similar to JPEG and PNG, but it can produce smaller image file sizes while maintaining the same quality. In this way, you can replace your PNG and JPEG images with WebP to cut even more on loading time. The downside is that this image format only works in modern browsers (Chrome, Firefox, Edge, Opera, etc), so you need to have a fallback option for Internet Explorer and older browsers. 

You can convert your images to WebP online or with Photoshop, and compress them after with Tinify. If you’re a technical user, you can take a look at Tinify’s API to automatically convert your PNG, JPEG, and WebP images. We hope to make this feature available to browser users later this year.

Use lazy loading and image caching

Once you’ve optimized your images, you can also implement a few things on your website to make them load in the best possible way. 

One trick is to implement lazy loading, a technique that delays the loading of images until they are needed. In other words, you can use lazy loading to defer the loading of images until the user scrolls down to the part of the page where they’re displayed. This can improve the initial loading time of the page and reduce the amount of data that needs to be transferred over the network. 

To implement lazy loading, you can use a lazy loading plugin or JavaScript libraries, such as LazyLoad, Lozad.js, and unveil.js. You can also use HTML attributes: the loading attribute can be used to specify the loading behavior of images. The attribute can be set to lazy which will only load the image when it comes into view. This is a native browser feature and is supported by most modern browsers. All in all, these tools allow you to specify which images should be lazy-loaded and when they should be loaded.

Lastly, another technique you can implement is image caching. It’s a technique that involves storing copies of images in a cache which stores the image temporarily in a proxy server or a browser cache. Image caching can be useful for reducing the amount of data that needs to be transferred over the network. It can also help to reduce the load on servers, as it reduces the number of requests that need to be handled. 

For example, a web browser will typically cache images that are downloaded as part of a webpage, so that they don’t need to be re-downloaded each time the user visits the page – this is one of the reasons why cookies exist. You can use a caching plugin for this, or a CDN (Content Delivery Network) so your images are served to users from a server that is geographically closer to them.

If you’re curious about this, Tinify’s CDN might be for you! Tinify’s CDN caches optimized versions of images, which makes it an “all in one” tool for reducing, compressing and caching your images.

TL;DR

If you’re stuck with large images that slow down your website, remember that using only an image size reducer might not be enough to solve this issue. Here are 5 ways to reduce and optimize large image files:

• Use the right image format: JPEG for photographs and PNG for web graphics, logos, charts, and illustrations.
• Use the right image dimensions: resize and crop images to the appropriate size by checking the appropriate dimensions for your website.
• Compress your images with Tinify: Large images can be compressed by a lot with our image size reducer tool without any noticeable loss in quality.
• Convert your images to WebP, a modern image format that can provide smaller file sizes than JPEG or PNG.
• Use lazy loading to only load images when they are needed, and image caching to store images so they are served faster to your users.

One of the most read posts in Tinify’s blog is about WebP, a next-gen image format that offers better compression for a faster website. WebP – together with HEIF, AVIF, and JPEG 2000 – is slowly replacing the usual JPEG and PNG image formats. But while they aren’t new, only now more and more users are jumping on the bandwagon and serving images in next-gen formats. If you’re behind on this, don’t worry – the beginning of this new year is perfect timing to take your visuals to the next level.

In this blog post, we talk about:

1. What are next-gen images and examples;
2. Which next-gen image format is the best for your website;
3. What are the advantages of using next-gen images;
4. How to convert your images to next-gen formats using Tinify.

Ready? Let’s dive in!

What are next-gen images?

Next-gen (short for next generation) images are newer file types that were designed to render faster on the web. Unlike traditional image formats such as JPEG and PNG, they offer better compression, meaning that they can be smaller in file size while still maintaining high quality. 

These new formats include WebP, AVIF (AV1 Image File Format), HEIF (High-Efficiency Image File Format), and JPEG 2000 (JP2). Here is a summary of the key differences between these formats:

• Compression algorithm: JPEG 2000 uses a wavelet-based compression algorithm, while WebP uses the VP8 and VP9 video coding formats, HEIF uses the HEVC (High Efficiency Video Coding) standard, and AVIF uses the AV1 video coding format. Wavelet-based compression can offer better compression ratios and image quality than the block-based compression algorithms used by VP8, VP9, and AV1, but it can also be more computationally intensive to decode.

• File size and compression ratio: AVIF has the potential to achieve the best compression ratios and smallest file sizes of these formats due to its use of the AV1 codec. HEIF may also have an advantage in terms of compression ratio and file size due to its use of the HEVC codec. JPEG 2000 and WebP may have slightly larger file sizes, but can still offer good compression and image quality.

• Features: All of these formats support lossless and lossy compression, as well as transparency. WebP also supports animation and color profiles, while HEIF supports 16-bit color depth and the ability to store multiple images in a single file. AVIF and JPEG 2000 do not currently support animation or color profiles.

Which next-gen image format is the best for your website?

In terms of compression ratio and file size, AVIF probably yields the best results. JPEG 2000 might also offer good compression ratios, but its wavelet-based compression algorithm can be more computationally intensive to decode, which may affect its performance in some applications.

In terms of browser support, WebP is currently the most widely supported of these formats. It is supported by all modern browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple Safari. AVIF and HEIF are also supported by many modern browsers, although their support is not as widespread as WebP. JPEG 2000 is less widely supported than the other formats, with limited support in some modern browsers.

Overall, all these formats offer good compression and image quality, but WebP has become the go-to next-gen image format due to its wider browser support. According to Google, WebP can reduce file sizes by up to a third compared to JPEG and PNG images. The only catch is that it is not supported by older browsers, such as Internet Explorer. However, a way around this is to have JPEG or PNG as a fallback and serve these instead in older browsers.  

What are the advantages of using next-gen images?

There are a few different ways in which using next-gen image formats can help you optimize your website. One is that they can help reduce the file size of your images, which can speed up your website’s load time. Another way is that they can improve the quality of your images, making them look better and more professional.

Moreover, next-gen images can also help you save money on bandwidth costs. This is because they are typically more efficient than traditional image formats, meaning that they use less data to achieve the same quality level. This means that you won’t have to pay as much for bandwidth when using next-gen image formats.

In a nutshell, these are the major benefits:

• Smaller file sizes: Next-generation image formats are typically more efficient at compressing images, which can result in smaller file sizes. This can be especially beneficial for websites that need to load quickly.
• Improved image quality: Some next-generation image formats offer improved image quality, especially at smaller file sizes. This can be useful for images that need to be displayed at a high resolution or with a lot of detail.
• Enhanced features: Some next-gen images offer enhanced features that are not available with traditional image formats. For example, some next-generation image formats support transparency or animation, which can be useful for certain types of images.
• Better performance: Next-gen images can often be decoded and displayed more quickly than traditional image formats, which can improve the overall performance of a website.
• Reduced bandwidth usage: Using smaller file sizes can help to reduce the amount of bandwidth required to transfer images, which can be beneficial for websites with a large number of visitors or a global audience.

If you are still in two minds on whether you need to convert your JPEG and PNG images on your website, remember that even a one-second difference in loading time can have a big impact. According to Website Builder Expert:

• A 1-second delay reduces customer satisfaction by 16%.
• 40% of users wait no more than 3 seconds before abandoning a website.

Besides this, using next-gen images can help you boost your SEO. One of the biggest recommendations of the web analyzer Google PageSpeed Insights is to switch to next-gen image formats, such as WebP. So, if you want to rank higher on Google’s search engine, converting your website images to next-gen formats is worthwhile.

How to convert your images to next-gen formats

Since we launched the new image converter feature for Tinify API users, WebP has been the most converted image type – around 80%. If you’re an API user looking to improve your website speed, this new feature allows you to do that in just one step, simply by making a “convert request” in your code. The Tinify algorithm will automatically convert and compress your images. This assures that you have the smallest version possible of your image without losing quality. API users can find all the information needed to start converting their JPEG, PNG, and WebP images here. 

For non-developer users – such as WordPress users – you’ll need to use a WebP image converter tool and manually upload your pictures into Tinify’s online tool to maximize the level of compression. After it, you must upload them manually to your website. In the future, along with image compression, we’ll also offer the image converter feature to Web Pro users. Keep an eye out for this on Twitter or LinkedIn!

TL;DR:

• Next-gen images are designed to be faster on the web and offer better compression, allowing for smaller file sizes while maintaining high quality;
• Examples of next-gen image formats include WebP, AVIF, HEIF, and JPEG 2000;
• WebP is the most widely supported of these formats, but fallback options are necessary for older browsers;
• Next-gen formats will improve your website speed and SEO, according to Google;
• API users can convert PNG and JPEG images to WebP with the new image converter feature.