Image Optimization for Your Website: Formats, Compression & Tools
Sometimes, images are not seen as too important in SEO and marketing. How often do you load a website only to find it full of generic pictures that don’t add much to the rest of the content?
Or worse, do you often have to just sit in front of your device and wait for a site to finally load? Not too often, I guess, because no one’s got time for that.
Indeed, poorly-optimized images can be disastrous for the site’s conversion rate. If they are unengaging and/or hurt your website’s performance, they will harm even the best-written content, increasing the bounce rate.
Think about it this way: images are like a person’s clothes and appearance in general, they are the first thing your visitors are going to see and notice on your site. If they prevent the site from loading quickly, it would mean that you just lost your potential readers or customers.
Unfortunately, many content creators still do not fully realize the hidden power of images.
This is why we need to talk about image optimization: it’s crucial for your website!
Raster & Vector: What’s the Difference?
Most people do not pay a lot of attention to image format and type. It’s quite irrelevant to them because it rarely comes into play.
For your site optimization, however, the format is very important. It affects the loading speed of your pages, although not directly. But don’t worry, it’s not that difficult to understand and I’m here to help you out with that.
First of all, image files come in two types:
Raster graphics are used more commonly than vector graphics. When you take a photo with your digital camera, what you get is a raster picture.
Raster images are made up of pixels. Pixels are those tiny squares that you see if you magnify your picture by many times.
The resolution of an image is counted in pixels. For example, when you see a picture with the 1600×900 resolution, it is made up of 1600 columns of pixels by 900 rows of pixels.
The main advantage of raster graphics is that it allows colors to blend and turn into each other much better than with vector graphics.
But there is also a rather huge problem that lies in the use of pixel graphics.
When rescaling such images, you run the risk of ending up with a pixelized piece of garbage that barely resembles your initial image or anything at all.
Like, what is this? What’s even going on?
There’s no way to tell because of how pixelated the picture is.
That’s something you do not want to happen with images on your site or blog.
Vector graphics are immune to this problem. They are composed of a series of calculations that show how proportionally far from each other different points of the image are located. So you can zoom in however much you like and still see the same crispy-clear picture.
Does it mean that you should always opt into using vector graphics? Well, not necessarily.
There’s no one-size-fits-all approach with image optimization. Different formats suit different needs.
Let’s talk about them.
The first and most common raster one is JPG. There are a few reasons why this format is so popular:
- JPG images are supported by all devices, browsers, etc.
- Compression works wonders with them – more on that in the next part of the article.
- They generally have smaller sizes than their closest competitor, PNG.
Here’s what I mean by generally.
A JPG that is a photo or a picture with a lot of colors in it is going to have a much smaller size than the same picture with the PNG format. However, if there are not that many colors and transitions thereof in the image, a PNG will have a slight edge over a JPG.
The main flaw of this format is that, despite its impressive compression abilities, they come at a cost to image quality. This is called irreversible compression.
So the bottom-line regarding the JPG format is this: you should put multicolored pictures such as photos on your website in this format. It will allow you to reduce their size compared to using PNG and, therefore, decrease the loading times.
We’ve touched on PNG already. As I said, photos and other images with lots of color transitions are going to be much larger in this format. The difference can be as drastic as several times over.
Obviously, you don’t want it there’s an option to have smaller images.
But why would you ever want to use PNG files, then?
- The first reason is that PNG images with few colors in them (such as, for instance, your site’s logo) will be smaller in size than their JPEG counterparts.
- The compression of PNGs is lossless, which means that you won’t lose quality by compressing a PNG picture.
- PNG supports transparency – something that JPEG doesn’t.
As you can see, this format has its upsides.
No matter how you pronounce it, GIF is a quite unique format. You probably know why – it allows you to create animated pictures.
It can be argued that for some people, seeing animations on a webpage can be irritating and can thus deter them from reading the rest of the content. However you may look at it, you should remember to never use GIFs that feature rapid flashing that can be a cause of a seizure in affected people. If you have to implement such a picture on your site, be sure to hide it under the spoiler tag and give a warning.
What are the pros of this format?
- It can be used for animation.
- You can decrease the size of the image without harming its quality too much.
- GIF images are generally small in size, though they tend to be larger than their PNG versions.
- GIF images can have transparent backgrounds and other elements.
However, there are a few things you should be aware of when working with GIFs:
- You have to make sure everything is correct before you create the animation. For example, you have a line of text move around in your picture and create a GIF animation. Only then you notice that you made a small typo in the text.
Now you have to start from scratch and redo all the work because you can’t edit a GIF file otherwise.
- There’s only one thing more frustrating than a GIF animation struggling to move: a webpage with dozens of such lagging images. It’s best to use animation sparingly on your site, otherwise, the experience will become too annoying for your visitors.
Making GIFs out of YouTube videos is simple. However, you might want to make more unique animations for your website. What tool should you use?
Personally, I recommend using GIMP for creating GIF animations. It is free, it has more functions than just GIF creation and can serve as a general-purpose visual editor, and it’s quite easy to use.
This tutorial on the official website of the program shows how to make animations with it.
SVG stands for scalable vector graphics.
It is mostly used for two-dimensional pictures. One downside of vector graphics is their relative incompatibility with photos. Let’s see what will happen to my photo when I convert it into SVG:
Yep, not ideal.
That’s why this format is best reserved for logos and icons.
SVG is an XML-based format. Essentially, it describes what the graphics should look like on a site. So, you can use a text editor to change the size, colors, or dimensions of any SVG file. It makes it ideal for images that you feel like you’re going to update at some point or regularly.
Being a vector format, SVG is possible to resize without any loss of quality. Moreover, files of this type are relatively small unless you put a lot of different elements into them.
Image Compression and When to Use It
If you put a lot of graphical elements on your website, regardless of whether they are pictures of the products you sell or photos from your latest trip, you know how bad it can affect the page load speed.
And as we all know, the slower the speed, the fewer visitors willing to sit through the loading times.
If the struggle between the desire to enhance the experience with visuals and the need to keep the speed acceptable is familiar to you, image compression is your friend.
Essentially, image compression means that you remove certain image details for the benefit of reduced file size.
What details? Well, it depends on the format of the picture.
Remember how we talked about irreversible (or lossy) and lossless compression types? That’s where they come into play.
Take GIFs, for example. Compressing it doesn’t necessarily harm the quality or crispiness of the image, but it does reduce the number of colors, making your picture less vibrant and nice to look at.
Similarly, JPG images are going to lose some amounts of data when you compress them. This is lossy compression, and once you’ve done it, you’re not going to restore the picture to its original quality (if you don’t have its copy, of course).
It doesn’t mean that you should never compress images of lossy formats, though. You can absolutely do it if:
- It’s a background image that isn’t the focus of your website. Nobody will pay much attention to its quality.
- You compress the image by not too much and the quality loss is not huge.
- You have no choice but to minimize the size of your page and have to take every chance you get.
As for lossless compression, the answer is “compress it” in almost all cases. Lossless compression algorithms get rid of most of the image’s duplicate metadata, so the quality remains high.
Let’s see how compression affects JPG and PNG versions of the same picture by Pampjat.
The original image is in JPG and its size is 103 Kb.
By using the tool called ShrinkMe, I get its size down to 42 Kb. Can you spot any difference?
Converted into PNG, it reaches the size of 496 Kb.
But compression gets it down to 216 Kb.
So you can save more than 50% in terms of image size by compressing it. Several hundred kilobytes may not sound like much but it adds when you compress all the images on your page.
|Format||When to use it?||Compress it or not?|
|JPG||Your picture has many colors, it’s a photo or a painting, there’s no need for transparency||Generally yes, but you have to find the optimal ratio of size to quality|
|PNG||With logos/pictures that have text in them/pictures with mostly one color||Yes|
|GIF||To create animated pictures or static images with logos and lots of flat colors||No, unless you don’t care about the loss of colors|
|SVG||Your picture is an icon that you want to be able to rescale and resize easily||Yes|
Tools to Help You Optimize Your Images
“That’s very nice and all,” you might be thinking, “but how exactly do I do this fancy compression stuff?”
Luckily, there are plenty of tools online that you can use for your site’s benefit. Let’s take a look at some of the most popular services.
- Stores all of your images in the cloud, no size limit
- Compresses images of all formats
- Resizes your images’ dimensions
- Costs $5 – $79 per month
- Optimizes 500 Mb – 60 Gb of images per month
- Used by reputable companies such as Microsoft and Dell
- Provides 100 Mb worth of free image optimization
- Allows uploading ZIP archives of images to optimize
- Doesn’t support payments by PayPal
- Compresses images in the PNG and JPG formats
- Intelligent algorithms for image resizing
- Has plugins for WordPress and Magento
- Has a Photoshop plugin (one-time $65 payment)
- Costs $25 per one user per year
- Used by Samsung and other large corporations
- Allows optimizing up to 20 images of under 5 Mb each for free
- Has the support of all modern browsers and devices
- Only works with PNG and JPEG
- Automatically serves images optimized for a given visitor’s device
- Serves images from Amazon’s Cloudfront Content Delivery Network, improving the loading speed
- Supports lazy loading of images (loading on demand)
- Costs $89 – $290 per year (personal and business plans respectively)
- Has a free plan with limited functionality
- Allows optimizing an unlimited number of images on all plans
- Allows you to have a custom domain name for served images on Business and Custom plans
- Requires you to create an account even to access the free plan
- Not the best option if your site isn’t on WordPress
- Optimizes JPEG, GIF, PNG and WebP files
- Serves images from its own CDN
- Allows optimizing all images on their upload to your site
- Lazy loading support
- Costs $49 per month
- Has a 30-day free trial
- No limit on the number of optimized images
- You get all features of WPMU DEV for its price
- Is strictly a WordPress plugin
- Replaces image URLs on your site with URLs of pictures in the cloud
- Supports loading images on demand
- Compresses JPG, PNG, GIF and PDF files
- Has a 7-day free trial
- 30-day refund (if your website hasn’t exceeded 1 Tb of viewer bandwidth)
- 50% more images per month for university students
- Allows free optimizing (up to 20 images of less than 2 Mb each)
- Has a limit of images you can optimize per month (3000)