Image Optimization – The A2 Postinghttps://www.a2hosting.com/blog
The Official Blog for A2 HostingMon, 21 Jan 2019 12:50:39 +0000en-UShourly1https://wordpress.org/?v=5.0.3PNGs vs. JPEGs: What Image Formats Should You Use on Your Website?https://www.a2hosting.com/blog/pngs-vs-jpegs/
https://www.a2hosting.com/blog/pngs-vs-jpegs/#respondTue, 18 Sep 2018 02:10:57 +0000https://www.a2hosting.com/blog/?p=5376Digital images come in many types, but the two most common formats on the web are JPG and PNG. You may have heard conflicting information from different sources about which one is best. This can make it hard to know what format you should use for your website. In general, PNG is a higher-quality compression …

]]>Digital images come in many types, but the two most common formats on the web are JPG and PNG. You may have heard conflicting information from different sources about which one is best. This can make it hard to know what format you should use for your website.

In general, PNG is a higher-quality compression format. JPG images are generally of lower quality, but are faster to load. These factors affect whether you decide to use PNG or JPG, as does what the image contains and how it will be used.

This article will explain in more detail what JPGs and PNGs are, why they’re so well adapted to the web, and what each type does best. Let’s get going!

An Introduction to the JPG and PNG Image Formats

As we mentioned, JPG and PNG are two of the image formats most commonly used on websites. They each use different ‘codecs’ (or compression methods) to store image data. This means that PNGs are better suited for certain uses than JPGs, and vice versa.

JPG is an image format that uses lossy compression. For this reason, JPGs typically have a lower file size, and are faster to load than PNGs. If you’re uploading a lot of pictures, such as an album from an event, using JPGs means you can display more photos without running out of server room, and they will load more smoothly for your visitors.

However, the higher compression also means that every time you save a JPG, it loses some image information. If you save a JPG over and over again, this can cause it to become pixelated. For web use, however, this doesn’t always matter.

For example, in the photo below, the copy (right) is only of slightly lower quality than the original (left). It’s an effect that’s really only noticeable when they’re placed side by side:

PNG, on the other hand, is a lossless compression type. This means it saves more data, and results in a higher image quality than you’ll typically see with a JPG. A PNG is also much less likely to be pixelated than a JPG.

That fact makes PNGs ideal for any images containing hard, defined lines or text. Below, the image on the left is a JPG, while the one on the right is a PNG:

What’s more, PNGs can also include transparent elements. This can come in very handy on a website. For instance, you can have an image appear to blend into the page background. In particular, this is very useful when it comes to icons:

However, the downside to PNGs is that they have slightly longer loading times, and higher file sizes than JPGs. While they’re fine to use for important images, you may want to avoid overloading your website and server with dozens of PNGs on each page (unless your site is very well optimized).

Why JPGs and PNGs Are Well-Suited to the Web

There are many types of image formats, so you might be wondering why we’re focusing exclusively on JPGs and PNGs. That’s because these two image types are better suited to the web than most of the alternatives.

There are a few reasons for this, including:

Image compression. JPG and PNG images are both compressed for faster loading times, which is ideal for the web.

Low file size. The compression process also means that JPGs and PNGs take up less room on servers than many image types, which means you don’t have to worry so much about running out of space.

Prevalent integration. Many web tools are built with the expectation that your site will be primarily using JPGs and PNGs. Some browsers won’t even display certain types of files.

In a nutshell, while there’s nothing forcing you to use only JPGs and/or PNGs on your site, sticking with these two image formats will make your job a lot simpler. Plus, it’s a smart way to keep your site lean and running fast as it grows.

How to Determine When to Use JPGs vs. PNGs

Now that you understand the basic differences between JPGs and PNGs, you may be wondering whether you should use just one, or a mix of both. To answer that question, let’s go over some basic rules for when to use each type of image.

JPG is the perfect format for the following applications:

Complex images. While there is some loss of quality in a JPG when compared to a PNG, it’s almost unnoticeable with complex images (such as photos). This means you can reap the benefits of lower file sizes, without sacrificing aesthetics.

Photo albums. When you’re sharing photos in bulk, as in a photo album, you’re best off using JPGs. Their faster loading times means the photos will display more quickly and smoothly.

Opaque images. Unlike PNG, JPG doesn’t permit transparency. If an image doesn’t need to be transparent, however, you can often safely go with a JPG.

On the other hand, there are times when it’s better to use PNGs, such as for:

Images with hard lines. As we discussed earlier, pixelation is very noticeable on images with hard lines, such as logos and text. For these types of images, you’ll want to stick with the PNG format.

Portfolios. PNGs provide the best in quality. So when you need your images to look top-notch, such as in a portfolio of photography or other creative work, the somewhat increased file sizes can be well worth it.

Transparent images. If you want an image to ‘blend in’ to the page, rather than having an opaque background, a PNG is your best option.

Some people choose to use only one type of image on their website. This offers the benefit of a streamlined approach, and can work well for sites that use images in very predictable ways. However, we recommend making decisions on a case-by-case basis when possible, and choosing the file type that works best for any given situation.

Conclusion

When you’re first learning about the various image file types, it may all seem a bit confusing. However, if you’re adding images to your website, you’ll almost always want to go with either PNG or JPG. Over time, deciding which file type to use for specific purposes will become second nature.

To recap, here’s when you’ll want to use each kind of image:

JPGs: Use these for complex images, photo albums or galleries, and opaque images.

PNGs: These are best used for images with defined lines, photos that require transparency, and whenever you need the highest possible quality.

Are you wondering when to use these image formats in other situations? Ask us in the comments section below!

]]>https://www.a2hosting.com/blog/pngs-vs-jpegs/feed/0https://www.a2hosting.com/blog/content/uploads/2018/07/man-holding-camera-150x150.pngHow to Optimize Your Website’s Images (And Why You Should)https://www.a2hosting.com/blog/how-to-optimize-your-websites-images-and-why-you-should/
https://www.a2hosting.com/blog/how-to-optimize-your-websites-images-and-why-you-should/#commentsFri, 17 Feb 2017 19:01:50 +0000http://www.a2hosting.com/blog/?p=2359High resolution images look stunning, but they also tend to be larger (in terms of filesize), which translates to longer loading times. If your website is full of them, chances are some visitors won’t want to stick around waiting for them to load. Fortunately, there is a way around this problem without having to resort …

]]>High resolution images look stunning, but they also tend to be larger (in terms of filesize), which translates to longer loading times. If your website is full of them, chances are some visitors won’t want to stick around waiting for them to load.

Fortunately, there is a way around this problem without having to resort to low resolution graphics. The fact is, there are plenty of tools you can use to ‘compress’ or optimize your images to the lowest possible size, without incurring a noticeable reduction in quality.

In this article, we’re going to explore just how important loading times can be, before introducing you to two outstanding tools to help you optimize your images. We’ll even test them to see if they live up to their claims, so let’s get started!

Why Optimizing Your Images Is Important

Simply put, the larger your images are, the longer it’s going to take for your pages to load. Of course, there are plenty of other factors that might affect your site speed, but large file sizes certainly won’t help matters.

2 Free Tools to Optimize Your Website’s Images

In this section we will introduce you to two free image optimization tools and explain how to use them. As a bonus, we also tested the tools to help you make the right choice.

First, we’ll give you a quick run down of our testing method. We put together a basic webpage displaying a set of unoptimized images and measured how long it took to load, using the Pingdom Website Speed Test.

We then ran the images through each tool and measured the differences in loading times after optimization. At the start of the test, our page weighed 1.7MB and loaded in 0.789 seconds.

Despite its somewhat misleading name, TinyPNG enables you to optimize both PNG and JPEG files. Simply upload images from your computer to the website via the homepage, and the tool will automatically compress them.

TinyPNG can handle up to 20 images at once, with a maximum filesize of 5MB each. Once they’ve been optimized, you can download them individually by clicking download next to each file, or in a single compressed file by selecting the green Download All button.

If you’re a WordPress user, you’re in luck – there’s also a plugin version available, which enables you to automate the optimization process.

Without further ado, let’s see how TinyPNG performed during our test:

Loading time before optimization: 0.789 seconds (1.7MB)

Loading time after optimization: 0.294 seconds (635KB)

A single pass-through using TinyPNG managed to shave off 62.65% of the size of the page, and cut the loading time by more than half. Not bad at all!

Much like the previous tool, Optimizilla supports both PNG and JPEG files, and can optimize several images at once. On the homepage, click the Upload Files button, select your images, and they will be compressed automatically. Then select Download to obtain the new files.

Optimizilla enables you to view your original image and its optimized version side-by-side once the compression is complete, so you can check for any noticeable differences.

The preview functionality also includes a quality slider, which enables you to further compress your images in exchange for a loss in resolution. During our tests, we noticed minimal differences by decreasing the slider down to the 60–70 range (out of 0–100).

Let’s see what the results were using the default settings:

Loading time before optimization: 0.789 seconds (1.7MB)

Loading time after optimization: 0.418 seconds (902KB)

That’s a respectable 46.95% file size reduction, with a decrease of 0.371 seconds in loading time. They’re not quite as dramatic as TinyPNG’s results, but if you’re willing to play with the quality slider, you could likely surpass them.

Conclusion

Optimizing your images is one of the simplest methods you can use to lower your website’s loading times. It doesn’t even require that much work on your part, besides picking a tool to help you, and uploading the images once you’re done.

Before we part ways, let’s quickly recap the two tools we’ve covered in this article: