Digital images are easy to create thanks to a smart phone in nearly every pocket. However, they’re not straightforward to add to a website. Many different factors combine to complicate this and make a site’s images fuzzy or slow to load. To understand this, we need to understand a little about different formats and how they affect your images.
First a small reminder: this post provides a very basic overview; I’m glossing over many details. If you have a specific question, please ask!
How does a digital image work?
A digital image is a bunch of binary digits (bits) that the computer knows to interpret (display) as an image, not as text or sound. How it does this is through different file formats which organize all those bits that describe the image. Each format chooses to describe the information in different manners and that will affect how the image looks.
What are some common types or formats?
There are three main image types on the web jp(e)g, png, and gif. These all take the digital image and convert and compress differently.
Newer formats exist too, one that you may be hearing about right now is called WebP. That’s likely because it just became natively compatible within WordPress as of version 5.8 (July 2021 release). That means WordPress understands it and can display those images in your media library.
There are additional image types and if you have questions please ask!
How do they differ?
It all comes down to how the image information is stored and compressed.
Think back, did you ever look at newspaper images with a magnifying glass (or some silly putty)? When you looked closely there were many small dots and if the image is enlarged then it loses the defining edges, vibrancy, and becomes fuzzy. That is a type of compression!
I believe that it is easiest to show the basics by explaining the basics of gif. We’ll start with this image of a sheep I knitted.
For these examples I’ll recreate this photograph.
I’ll do it on a grid at various sizes with two different sets of color, for the sake of this example let’s say I have two boxes of crayons, one box offers 8 options and the other 64.
The first sheet of graph paper has a big grid, and I can use the box of 8 different colored of crayons. I can only use one color per square (I’m cheating a bit to create outlines due to this example, bear with me). Is the result a detailed image? No.
The next sheet will have the same size grid, but now there are 64 crayons to choose from.
Has that really changed anything to how the image looks? No.
What happens now if we add more grid lines and continue with 64 color options?
That looks a little more like a sheep! This highly simplified example shows different ways a gif image might store color information and display an image.
Compression
For the images above, I converted a photo into a grid. That is a form of image and information compression. It’s what the different image file types do; they each compress the image in different ways.
Compressed images are good for your website. A small image file size will load faster which makes your website visitors happier. However, it’s a trade-off between amount of compression and file size. You want your images to be crisp and clear and convey the information you need, and you also want to make sure it’s a file size that makes sense for your site.
There are two types of image compression: lossless and lossy. Lossless gives you a clue — it will compress your image but not lose any of the image quality. Lossy will change the image itself and reduce some detail to reduce the size of the file.
Different image types use different compression methods. Jpg uses lossy, and for the most part when you choose the right compression level, human eyes will not be able to tell the difference. That tends to come up when the compression is taken to extreme. PNG uses lossless. WebP has both!
Does pixel size matter?
There’s a second factor that plays into digital images. I’m sure you’ve tried to upload a photo and there is a disclaimer that the image can’t be larger than so many pixels. Or if you upload a small image it ends up looking like that first big-grid sheep image above.
The pixel size will affect the file size. See my sheep above. The image with fewer overall blocks would create a smaller image size than the larger one. Larger images, while also creating a larger file size, can be shrunk. However, bigger isn’t always better?
Yes, the format and the image size affect the final file size. While computers, smart phones, and internet connections are constantly improving, a smaller file will load faster on your website. That means happier site visitors. Further, if they are on a mobile device, they might be happy to have a lower data charge! Happier site visitors mean more visits and hopefully more business.
There will always be a trade-off between file size and quality.
Suggestions
- Keep a copy of your original images, especially if they’re jpg format. When you overwrite a jpg file with a compressed version, unless you have backup, there’s no way to retrieve any higher image quality.
- But what if you only have a 150px square jpg? Don’t fret, there are some tricks we can do to make it work. One is to paste the small image on a canvas that’s the right size. That will create a border but will also allow the tiny image not to appear pixelated.
- I’m conservative on formats and believe it still a good idea to uploading a jpg file at the size and compression that makes sense for you. Many CDNs will convert and serve (display) the appropriate WebP image as needed.
- What size should I upload? This depends on your situation and where the image will be used. By and large, I use popular social media to inform my sizing recommendations. Images are compressed until I begin to notice issues in the quality. Remember, each image on your page will add up: a page of 20 images that are 3MB each will have a slower load time than one where the images are only 250kb.
Final Thoughts
Print has different requirements. This is where you’ll be confronted with a completely different set of vocabulary and requirements for the image format, size, and compression. Think back to that newspaper example I started with as to why!
There’s a lot more on this topic that I’ve either glossed over or left out. If you are interested in learning more about something I didn’t mention, please let me know!
I hope this post helps you gain confidence in understanding the different types of file formats and what you may need to do.
Additional Resources:
Note: This is a 2021 update of a post initially published in 2015.