Photography is becoming increasingly popular among bloggers. You don’t see a simple photo of a product easily anymore – it’s all about the flatlays, beautiful backgrounds, bokeh effects or decoration around the product. The photo could almost appear in a magazine so beautiful it is. But you probably still have trouble choosing a format. Many say that PNG format is always better, but is it really? Or is a JPEG image fine for use on the Web?
Before I give you the answer, let me explain the terms lossless and lossy. Maybe you’ve heard about it before, maybe you haven’t, but it’s important to know the difference between the two.
Lossless VS Lossy
Have you ever downloaded an image and certain information shows up when you select the file in Explorer? For example, copyright information, the photographer or the date when the photo was taken? This information – also called meta-data – is stored with a lossless file. A lossless file still contains all the information because this file is not compressed. Compression, or data compression, is actually reducing the size of a file and one way to do this is by removing (unnecessary) digital data.
A lossy file ignores much of the meta-data; thus, this is a compressed image. With that, this image will also take up less space because the file has been reduced in size. JPEG images, most commonly used for photos and other complex images on the Web, are lossy compressed. With JPEG, one can set the compression and thus determine how much information is removed making the file size smaller.
Images affect your load time
Now why is it so important to choose the right format? And why shrink your images at all? Surely you have plenty of writing space! Having enough writing space is always important, of course, just like on the computer, the write (server) of your website can also get full so you can no longer store files. However, when an image loads, you use bandwidth, and a large, heavy image simply takes longer to load than a 5kb icon.
Even if you have high-speed Internet on your computer, loading heavy images can still take a long time, takes a lot out of a server and honestly – do you wait longer than a few seconds for a website to load these days? If it hasn’t succeeded after 5 seconds I’m already on the refresh button with my finger because I think the browser is having problems. I don’t have the patience for it anymore. The faster a website loads, the better. Not only for the server, writing space and bandwidth but also for your SEO. In fact, Google values how a site scores on all these points, and using compressed images ends up giving you bonus points. SCORE!!!
Want to know more about how to improve your load time? I wrote an article about it in which I give five tips so that your website too will load quickly and thus rank well on Google.
JPG, PNG, or GIF? The format is important
How the image is saved has an impact on the file size, which then affects the load time. In general, you can use the following depending on the situation.
| Use | Format |
|---|---|
| Photo | JPG |
| Vector | PNG |
| Picture with pair of colors | PNG |
| Image with transparency | PNG |
| Animation | GIF |
GIF – Graphic Interchange Format
Graphics Interchange File (GIF) is limited to 256 colors and is a lossless existing that is a widely used choice on the Internet. GIF is a good choice if you want to display a drawing, text or icon that is low in color and small in size. GIF is also widely used for animations, or a moving image. In addition, GIF also supports transparency.
A GIF is compressed by limiting the color palette. Because it can use up to 256 colors, it can cause color differences in an image, such as white dots or places where depth has been lost because it has become a patch of color. In fact, a color that is outside the 256 is adjusted to a color that is close to it.
Advantages GIF format
- 8bit color (256 colors)
- lossless compression
- suitable for logos, image with flat color parts and little depth (due to 256 color limitation)
- suitable for icons with few colors
- supported transparency
- supported animation
Disadvantages GIF format
- oldest image format for web use (1989)
- in most cases has a larger file size than a PNG
JPEG – Joint Photographic Experts Group (or JPG).
JPEG files are lossy. When you save the file, information belonging to the original file is lost. This is because JPEG automatically ignores all most meta-data in order to keep the file small. This also means that a small portion of the image quality is lost with it. This loss of quality is often not noticeable in photographs, but it is noticeable in images where there is a lot of detail work – such as graphics or letters. The image then looks pixelated. Therefore, continuously resaving (opening, editing, saving) a JPEG is very destructive to the quality of the image, because information is lost every time.
Every digital camera saves images as JPEG format, as well as RAW. However, these files cannot be used on the Web. JPEG, on the other hand, is very Web-friendly because the file is smaller, so it takes up less space on the server and provides a short loading time. Since 1994, JPEG has been considered the “standard.
Advantages JPEG format
- 24bit color
- suitable for images with many details
- lossy compression
- most commonly used image format; considered standard
- through minimal compression you can get a smaller file size
Disadvantages of JPEG format
- does not support transparency
- not suitable for logos and icons because does not support transparency
- can generate a larger file size for a small images
- too much compression can make the image blurry
PNG – Portable Network Graphics
The PNG format was created to replace the GIF format. Graphics programs were not allowed to add GIF creation to the program without purchasing a license from the creators of the image format GIF, namely Unisys. This eventually led to the development of a new format, PNG. However, GIF was never completely replaced because PNG was poorly supported by various browsers at the time.
The PNG format has some advantages over the GIF format, most notably being able to use the full color spectrum. A PNG, like a GIF, is a lossless file, meaning that all information is retained. However, a PNG format can be 10 to 30% smaller/compressed than a GIF file. Unlike a JPG, you can save a PNG multiple times without losing any quality.
GIF has the option of transparency within an image, however with a PNG you can also control the height of this transparency. Another name for this is transparency (opacity). So you can control the degree of transparency, either completely transparent (0%) or you make it half transparent (50%) and so on. The degree to which the color is reflected is completely in your control.
And so there are a few more advantages when you compare PNG to a GIF. So you can actually say that a PNG has become the improved version of a GIF. The only advantage a GIF has is that it supports animation, which a PNG does not.
Advantages PNG format
- store as 24bit color or 8bit color (256colors)
- lossless compression
- suitable for logos, transparent and semi-transparent images, images with little depth in terms of colors
- suitable for icons
- most cases a small file size than a GIF
Disadvantages PNG format
- the more detail in a photo, the larger the file size
File formats and file sizes
Not sure what to choose at this point? Let’s go look at some examples.
| JPG – 228KB | PNG – 327KB |
|---|---|
 |
 |
The images look exactly the same, but the PNG is much larger! When the photo looks exactly the same, always choose the format that has a small file size. When you use Photoshop, Save for Web allows you to see the file size and so you can choose the format with the smallest file size.
Let’s compress the images for a smaller file size
I use two compression tools for this, these will be covered later.
| JPG Compressed – 69.5KB | PNG Compressed – 85KB |
|---|---|
 |
 |
You may not see the difference very well because of the small images, but the JPG is a lot sharper and the colors are cleaner. JPG can handle the different colors better than a PNG format and also the file size is a lot smaller!
When it comes to fewer colors or vectors, PNG is overwhelmingly the winner
Now let’s look at a vector image with few colors. The images below are not compressed.
| JPG Uncompressed – 143KB | PNG Uncompressed – 45KB |
|---|---|
 |
 |
This time the PNG is smaller AND as a bonus the background is also transparent! Let’s compress these images as well, see what kind of results come out.
| JPG Compressed – 72KB | PNG Compressed – 14KB |
|---|---|
 |
 |
Now look at that result! 13kb for an image with transparent background. The JPG doesn’t even come close!
In the beginning you will have to get used to saving your images in the correct format, but in the long run this will be automatic and it will save a lot of writing space and the website will load nicely and quickly. And Google likes that! So should you be intentional about growing your website, either, or just want to make sure your site stays clean and fast, saving your images correctly is a start.
How do I compress my images?
You can compress your images with Photoshop or another graphics program, but I find that this often reduces the quality a bit. My preference is therefore for free programs such as JPEGmini or TinyPNG that compress images without loss of quality. Are you curious about how this works? I have already written about it in my article“Tips to reduce load time.”
Do you compress your images before uploading them to your blog?
Have you ever had a problem with an image taking too long to load?
