0 UG to I and A O

blog

The Ultimate Guide to Web Image and Animation Optimization

Introduction

The increasing internet connection speed of recent years has allowed web developers to enrich their pages with more and more media. Currently the average page is around triple the size of one in 2011!

Source: SpeedCurve

The increasing size is mostly utilized to enrich the user experience, but there is also a part that comes from laziness. Today’s bandwidths allow publishers to pay less attention to delivery optimization, which often leads to bigger than necessary downloads for users.

This isn’t a good trend, and is especially undesired if you take into account increasing mobile usage, which often provides an entirely different experience than desktop. Mobile screen size and resolution are vastly different than on desktop. Moreover, processing power and connection speed are slower, and the mobile traffic cost is often transfer-dependent.

This creates an environment where low transfer and quick load are valued over high resolution pictures, which often have to be downscaled to fit on the screen anyway.

And as we all know, mobile traffic overtook desktop some time ago, and is still growing.

If you still have doubts about the importance of page speed in the current state of web, take a look at these great articles by Maria Cieślak and Tomek Rudzki

In many cases there’s plenty of room for improvement. We can and should do better in terms of image and animation delivery. In this article I’ll try to show you how to do that.

A Few Examples

OK, let’s take a look at how much can we improve.

Elephate

What started my research on the topic of image optimization were some GIFs on our own website. One of our best articles had a nasty problem with image and animation size. All the media on this single page before optimization weighed more than 20 MB (yeah, awful). We were able to shrink it down to just over a 1 MB (yeah, crazy!). The media for this particular page contains 45 (!) images and 2 animations with a combined duration of about 14 seconds. The initial 20 MB doesn’t seem that bad now, does it?

Before Now
Number of images45 images + 2 animations45 images + 2 animations
SizeOver 20 MBJust over 1 MB
Content qualityHighHigh
Files formatsUnoptimized JPEG, PNG, BMP, GIFWebP and WebM
Speed metricsGTMetrix resultsGTmetrix results  
First Contentful Paint2.0 s1.4 s
DOM Content Loaded2.4 s1.9 s
Onload39.3 s4.9 s

Shopify.com

A common mistake is the usage of the wrong file format compression. Later in the article, I will present an entire section dedicated to image compression formats, but for now knowing that PNG is not the correct format for most images will be sufficient.

Some Shopify blog images are, unfortunately, delivered as PNGs. For example, converting this article’s image to modern WebP format reduces its size by 90% without a noticeable quality drop. Optimized JPEG files also provide a great improvement over PNG, but is around 35% bigger than WebP.

Original image (784 kB) WebP compressed (72 kB) Optimized JPEG (99 kB)

If you cannot view the WebP image, don’t worry. It’ll be explained in a section below.

Aliexpress

Another common mistake is uploading high-res images, and shrinking them down using CSS. I’ve found examples of this issue on the homepage of Aliexpress. I’ve chosen Aliexpress as an example only because it’s popular, and it was the first website that came to my mind. There are more extreme examples of this issue to be found on the net.

A lot of the images are served in 350×350 px size, and rescalled to 192×194 (on a FullHD display). Scaling the images properly beforehand allows to reduce their weight by around 65%.

Improving Picture Quality by Scaling Images on the Server Side

You can actually improve the perceived quality of the image by scaling images on the server side!
Don’t believe me? Check out these two images:

Original image shrank using CSS – 216kBImage shrank beforehand – 75 kB  

WOW! If you look closely, especially on detailed things like hair, face, or shoes, you’ll see that the image shrank beforehand seems sharper, while the bigger one feels blurred. How is this even possible?

It’s because the CSS resizing algorithm used by browsers is not very good. If you prepare the image using more sophisticated software (e.g.,  GIMP or ImageMagic, more on that in the Tools section) you can get much better results. The magic obviously disappears if you zoom into the image, but you don’t usually zoom into images on websites, do you?

If you’re perceptive  you probably realized that the above images are also in PNG format. Recompressing them to a better suited format would yield further improvements, but I wanted to emphasize the importance of proper sizing in this example.

Image Resolution

If you paid attention to the section above, you probably already know how important proper image resolution is, but that’s not the whole story. Before we dive deep into this I’ve got a picture to show you. 

Data source: StatCounter

That’s the current (as for 07.2018) screen resolution internet market share across different countries and device types. The most popular resolution with over 20% of the market share is … others. This shows just how vastly diverse the screens are!

If you are skeptical of the results (as I was initially) check the methodology of this study. It convinced me.

OK, so how to deal with this situation? It’s tricky, but there are steps you can take to make it easier.

Identify your audience. The screen sizes are vastly different across different countries,  industries, and devices. In order to be efficient you need to know your specific audience. Go into your Google Analytics account, and see the Screen Resolution report to find out who’s visiting your website.

You can divide the data further by device type or user behaviour. GA is a truly powerful tool, use it!

Divide screen resolutions into groups and scale the website width in steps, rather than in a continuum (most sites do that anyway). Provide important steps with pre-sized images using HTML media attribute (described below), and reduce the usage of CSS resizing to minimum.

Still, even with the help from GA data, you’re left with multiple screen resolutions to deal with. Thankfully, the HTML5 <picture> tag comes to rescue. It has the media attribute, which allows you to prepare multiple image resolutions, and serve the correct one based on screen size. The tag looks like this:

<picture>
<source media=”(min-width: 800px)” srcset=”example_big.jpg”>
<source media=”(min-width: 300px)” srcset=”example_small.png”>
<img src=”example_micro.jpg”>
</picture>

With this  code the browser will download only one of the images, depending on the viewer screen resolution.

For example, the browser of a low-resolution phone will download the example_small.jpg image, while your desktop, full-HD screen will be served with the high-quality example_big.jpg.

In instances of resolution change (due to phone flip, window resize, etc.), the browser will adapt, by replacing the image with the correct. You can read more about this tag in the documentation.

If you have to use CSS resizing, avoid image proportion changes, and prefer whole-number divisions (or multiplications). Such instances are much easier to deal with for the scaling algorithm and will often produce slightly better results.

In particular, avoid resizing images that contain text or sharp edges in any other form. Even a small change in size will mess up these parts and blur the image.

Here’s a comparison of a picture on a Wikipedia article vs the same picture resized by a few pixels in width and height. I just can’t stand when I see resized images with text on the web. It’s disgusting and surprisingly common.

Compression Formats

Lossless vs Lossy Compression

There are two approaches to compression: lossless and lossy. The former is fully reversible, which means that you can revert the compression and get the original file without any lost data (just like zip or rar). Its benefit is obviously superior image quality – if you don’t lose any information in the compression process, you don’t lose any quality.

In contrast, the lossy compression is not reversible, which means that after you apply it, there’s no way to recover the original image, unless you know how to mess with the arrow of time, or reverse entropy. (If you don’t get this part, check out my previous article.) Some information is lost in the process. Its main advantage is superior size compression – you can get very lightweight files using this method.

The choice between lossless and lossy compression needs to be considered individually. If you’re preparing images for a photography blog you will want to keep all the details intact, so you should go for the lossless method. On the other hand, most typical websites are happy to use lossy formats and they really benefit from the smaller file size.

Compression Format Overview

In this section we’ll take a look at different compression formats. We’re going to score the produced files by size, image quality, and browser support. I’m going to present my subjective quality scores and source images as well, so feel free to disagree with my opinions on this matter.

PNG

Portable Network Graphics is a popular, lossless compression format. It offers superior image quality, but cannot compress as much as some of the other formats.

In this article, I’m going to use PNG images as the original reference frame to score image quality in lossy formats.

It still has its place on the net wherever superior quality outweighs file size. Choosing PNG is also recommended for images with very sharp edges, like for example, images containing text. Due to its encoding, images of text actually have a superior compression rate with PNG compared to other formats (including lossy!) as well as the advantage of better quality.

PNG ( 6kB )JPG ( 57 kB )Highly compressed JPG (6 kB)

PNG has two modes: 24-bit or 8-bit color depth. The former is used to represent photos, and the latter is great for images of text, monochromatic photos, or logos.

The PNG format is universally supported by all modern browsers.

BMP

This is a bitmap image file format. It provides no compression at all. This is a format created and used mostly in image processing.

You see, file size and processing power are interchangeable commodities. If you compress a file more, it weights less but you need to spend more processing power to encode and decode it.

BMP files are represented plainly, thus require very little processing power to display or edit the image, but the size of the file is significantly bigger than compressed formats (including PNG).

There are almost no cases, where transfering bitmap images over the net is beneficial, because of the bandwidth limitations. If you’re not doing anything specific, you shouldn’t use BMP images on your website. Unfortunately, I was able to find BMP images used all over the web.

To recap, image quality is great, browser support is universal, but the size of files encoded as BMP is painfully big.

GIF

GIFs are more widespread as animation format (which we will look into in the following section), but can also be used as static images. As such, GIFs have sort-of a mixed characteristic of lossless and lossy compression. The pixel representation is lossless, but the color depth is limited to 8-bits per pixel (which translates to 256 colors per image).

This means, that the file will contain fewer colors (up to 256 distinct colors per file), but will weigh less. Here’s a 2-way gradient comparison between 24-bit PNG, and a 8-bit GIF.

24-bit PNG (94 kB) 8-bit GIF (34 kB)

This makes GIFs not well-suited to represent photos, or any other rich pictures. They can be useful for simple logos, icons, etc. In my experience, 8-bit PNG results in smaller files than GIF (more in depth comparison and examples in the following section of the article).

All modern browsers support GIF images.

SVG

The Scalable Vector Graphics format is vastly different from the others. Instead of individual pixels, an SVG image represents geometric shapes. It’s main advantage is the ability to zoom virtually indefinitely without any quality loss.

 SVG zoom PNG zoom

The SVG file type is used mostly for logos, but also for images of geometrical shapes.

The main drawbacks of this type of files are:

  • Often a bit higher file size than a PNG or WebP for small images like logos,
  • the necessity to create the image as vectors. In most cases it’s not possible to efficiently convert an image to SVG (there are some tools that claim to do that, but in my experience the results are not satisfactory).

The image quality of an SVG file is superior regardless of the size of the view. It is supported by all modern browsers.

JPEG

JPEG is the king of web images. Around 65% of the total image bytes on the web is stored in the JPEG format.

Source: Pingdom

OK, but what made JPEG so popular?

JPEG files are often small. Its compression uses lossy algorithms to minimize the size by sacrificing quality in areas where the human eye is not so sensitive.

This approach leads to significant size reduction, usually without noticeable distortions.

Here, let’s take a look at this picture of Jupiter taken by the JUNO probe.

Original PNG picture (2 MB) JPEG max quality (1MB) JPEG default quality (142 kB)

As you can see, using JPEG compression we can get massive size reduction (over 90%) without significant quality loss. Let’s see how things go, when we zoom into these pics.

PNG JPG 100JPG 80

Even with the zoomed frame the differences between these images are hardly noticeable!

JPEG is NOT a cure to all evil though. It struggles to efficiently represent images with sharp edges and a low color palette. An example of this issue is the image of text presented in the PNG section, another is the Elephate logo:

I’ve compressed the JPEG image to 3kB (the size of the PNG file) and zoomed in. Both contours and colors are distorted. The distortions are significant enough to be clearly visible even on the not-zoomed part of the image.

JPEG comes with universal browser support. It’s the most popular image format and I can’t think of any device that doesn’t support it.

This file format comes with a plethora of encoders, with different settings. Mainly, we can get a baseline and progressive JPEGs. The visual difference between these two is the way the image is loaded. Baseline loads the image from top to bottom, as the data arrives. Progressive prints the whole image at once with very low quality, and as the data arrives the image is improved. Here’s an animation that shows the difference.

In this article I’ll be using basic, baseline JPEG and progressive JPEG in the form of Mozilla’s MozJPEG.

World beyond JPEG – WebP

JPEG compression is great in reducing file size, but it’s old. As you know, a few years in IT development is like a century in the outside world. JPG dates back to 1992, which makes it older than some  of our team members at Elephate!

And yes, there have been updates, and new encoding methods (like mozJPG), but the core idea remains unchanged.

There are alternatives to JPEG, though. They are not yet very popular, but it’s just a matter of time until they take over, because they’re just plainly better. Better in terms of both image quality, and file size!

You can check out some of them using this comparison tool: https://xooyoozoo.github.io/yolo-octo-bugfixes/#cologne-cathedral&jpg=s&webp=s

Unfortunately, some of the formats are patent-protected, and cannot be widely used on the web.

However, there’s one that’s open for public use – WebP. Currently, this format is being developed by Google and employs both lossless and lossy compressions to minimize the file size.

It’s supported by many modern browsers, but there are still gaps in coverage. As of August 2018 nearly 75% of users globally browse the web using a browser that supports WebP images. That’s not bad.

The file size and quality of WebP images looks very promising, you can see how well it performs in the following section. It’s big advantage is also versatility. It can be compressed both lossy and lossless, with specific color depth, with transparency, and as animation. It also performs well in all these fields.

Summary

Here’s a quick overview of the most popular image formats and their capabilities.

File TypePNGGIFJPEGWebP
Type of compressionLosslessLosslessLossyLossless and Lossy
Browser supportUniversalUniversalUniversalGood (>70% users)
Color depth8-bit up to 48-bit8-bit24-bit24-bit
TransparencySupportedSupportedNot supportedSupported

Animation

This guide would have been utterly incomplete without covering the topic of animation. As you saw at the beginning of this article, the presence of this kind of media is increasing rapidly.

Moreover, optimisation of animation delivery is, in my opinion, in a much worse state than the optimization of image delivery, and it’s all because of GIFs.

GIF

Animated GIFs were created to share very short, crudely drawn animations. The format was never meant to be a real video equivalent because it lacks all the video encoding.

If that’s what you want to share, feel free to use it. But please, PLEASE, notice how even on the last gif, which is still pretty simple, the GIFs 8-bit color palette is too poor to make the transitions smooth. And the GIF is already over 300 kB large. If you remember the opening section of this guide you know that if you try, you can squeeze 14 seconds of animation into 250 kB!

If you really like to use GIFs, I’ve included a collection of over 2000 styled website backgrounds. You can even take the best from both worlds and use an animated GIF as your background!

OK, I hope you’re not mad at me for the  GIF mockery. I exaggerated a little bit (but just a little bit). GIFs played a huge role in the early days of the net. They provided a universal format for all the different platforms and were at the frontier of web animations. But they were never meant for how they’re being used these days.

Take a look for example at this GIF featuring Michael Jackson.

  • The grain on it is TERRIBLE.
  • The color palette is way too poor. Good luck trying to distinguish Michael’s hair from the background. Or parts of the face of the boy behind from the background. Or telling what the background is.
  • Your dad might have been famous for being a part of this popular GIF. Or your mum. Try to recognize the faces of people in the third row (I presume that’s what they are, but cannot tell for sure)
  • And now the best part. THIS MASTERPIECE WEIGHTS NEARLY 1,5 MB!
  • For the sake of my sanity, please don’t use GIFs for movie frames.

I’m exaggerating again, along with the inherent issues of GIFs, this one is also poorly made. That doesn’t change my message, however.

I’ve got one more argument to convince you that it’s time to stop using GIFs. Even websites like Giphy, Gfycat, or Imgur use alternative formats to present “GIFs” on their websites.

The GIFV “format” that Imgur uses, isn’t really a file format, but rather a container. It consist of a HTML <video> tag, and MP4, WebM, and GIF files, one of which is served to the user depending on browser support and file sizes.

APNG and WebP

APNG is an extension to the PNG format that allows for animated image representation. The good thing about it is the support for both 8-bit and 24-bit color depths. It usually yields a smaller file size than a GIF, but its browser support is not as wide (it’s not terrible though, around 75% of users worldwide can view APNGs). Except for that, it faces the same issue as GIFs: it’s not a video format. It’s designed to fit the same niche of delivering simple animations.

WebP is Google’s modern picture format that also support animated frames. We’ve seen its capability in lossless and lossy picture compression already, but in the animation world, it’s not doing that great (in my opinion).

It’s clearly designed to store photo-like content, not simple shapes or logos that GIF and APNG are great at. This causes it to perform better on animations like the Michael Jackson GIF, but that hardly matters because video formats are still vastly better at that, as I’ll show later. In regards to simple animations, files compressed with WebP have a higher size (even lossy ones).

Here’s a great direct comparison of these tree formats on simple animations. According to its results, APNG is the clear winner in terms of file size for simple animations.

Video Formats

These are the formats that are meant to deliver movie frames efficiently. Unlike the previously mentioned formats, they use interframe compression. That means if part of a picture is static between frames, it won’t be downloaded over and over again. This allows for vastly superior compression compared to animated image formats. There are two competitors in this area: MP4 and WebM. The former is a well established video format. It’s almost universally supported by modern browsers (with the exception of Opera Mini). In general, it features superior quality compared to WebM, but a slightly larger file size. WebM on the other hand provides superior compression in most cases at the cost of slightly lower quality (barely noticeable in the web environment) and a bit worse support (It’s not handled properly by Opera Mini, IE, and Safari).

Based on the example of the animation from our article, by converting GIF to WebM we’ve reduced the size of the file by 98,5% (9193 kB to 132 kB), and nearly as much by converting to MP4 (141 kB).

Original GIF (9193 kB)Optimized GIF (6282 kB)WebM (132 kB)MP4 (141 kB)

OK, but those are video files, what about the looping nature of a GIF? You can easily provide it using the HTML <video> tag with autostart, mute, and loop attributes, just like in the example below. Moreover, you can use the tag to provide a fallback for browsers without support of your preferred file format!

Choosing the Right Format for a File

Logo Files (and other Simple Drawings)

I’ve picked 3 different logos for testing and checked their size in different formats. All files (with the exception of WebP) were compressed directly from original SVG files using ImageMagick.

Here are the resulting file sizes in KB:

FileSVG24-bit PNG8-bit PNGGIFWebP*JPEG**
Elephate11,610,7 3,9 4,3  3,3 9,4
NASA13,926,9 6,9 10,1 6,1 21,2
Google1,911,13,2 5,02,5 11,5

*WebP files were created from 8-bit PNGs with lossless compression. Creating WebP from 24-bit PNGs yields slightly higher file size.

**JPEG is compressed lossly

The verdict is not obvious. On average, WebP delivered the smallest file size, but it’s not universally supported by all browsers, and logo files are usually very small anyway. Depending on your needs, either 8-bit PNG or SVG are both good picks.

If you want to squeeze the last bits of your site, or you need more than 256 colors for the logo file, go with WebP or SVG.

SVG requires more work to obtain than a simple conversion, but offers decent (and in some cases great) compression, and superior quality with the ability to zoom in without quality loss. WebP offers an easy conversion, but is not universally supported by all browsers and needs a backup file (which is fairly easy to provide).

Otherwise, create 8-bit PNGs and forget that you had this dilemma. It’s good enough in most cases.

Pictures Containing Text

The best practice is to include quotations as text, rather than as an image and style it using CSS, but there are instances where an image is much easier to include, or necessary to include. The test subjects will be a screenshot of a Wikipedia article (pure text) and a screenshot of a Reddit thread (text + a little bit of graphics).

File24-bit PNG8-bit PNGGIFWebP*JPEG**
Wikipedia16 6337 4508 8186 13856 628
Reddit35 07010 56616 5926 42038 196

*WebP files were created from 8-bit PNGs with lossless compression. Creating WebP from 24-bit PNGs yields slightly higher file size.

**JPEG is compressed lossly

WebP is the clear winner here, especially when the text is enriched with graphics. It’s not universally supported by all browsers, but you can very easily provide a backup to 8-bit PNG for users without WebP support. Speaking of which, for pure text images it’s nearly as good as WebP, but it falls behind with graphics encoding.

I’d like to also point to JPEG, which is clearly not keeping up with lossless formats in this regard. You should never shoot or convert text-driven screens into JPEG.

Photo-like Images

Here the analysis becomes more complex. I have to split the formats into 2 categories based on the compression method (lossy and lossless). We will also have to take the perceived quality of lossy compressed images into account, not just the size of the file.

I’ve also dropped GIF and 8-bit PNG from the analysis, as most pictures are colorful, and 8-bit color scale that these formats provide is not enough. However, for specific monochromatic images you can experiment with them on your own.

Here are the test subjects:

Baboon:

Fruit:


Cats (yeah I love cats and I like memes):

And the results. First, lossless compression (compare only size, quality is intact)

FormatBaboonFruitCats
24-bit PNG610 kB434 kB212 kB
WebP566 kB366 kB153 kB

WebP delivered size reduction in all cases. The magnitude of the additional compression spanned from about 7% for the baboon, to around 28% for cats. On average, it delivered around 15% file size reduction compared to PNG.

Here are the results for lossy compression (size in KB):

Great quality (100)
FileJPEGMozJPEGWebP
Baboon536279214
Fruit360200147
Cats15310184

 

Default quality (80)
FileJPEGMozJPEGWebP
Baboon867290
Fruit443630
Cats282318

 

Low quality (50)
FileJPEGMozJPEGWebP
Baboon493855
Fruit241916
Cats171310

The results surprised me a little bit. I expected WebP to win across the board in terms of file size, but for the baboon file and less than great quality, JPEG encoders actually did a better job. However, if we take into account all the results, WebP is still a clear winner in terms of file size.

It’s difficult for me to judge the perceived image quality in objective terms because it’s a subjective experience, nonetheless I’ll try to give you my impressions. First of all, without zooming in I see no significant difference between file formats on great and default compression quality. With the low-quality settings, compression artifacts become clearly visible on JPG files from both encoders. They are especially strong on edges, like for example the transition between the cats’ ears and the background.

WebP manages to maintain an image without noticeable compression artifacts even on the low quality preset, but the amount of detail is noticeably reduced, which creates a blurry impression, or the picture being slightly out of focus.

All in all I preferred the low quality image compressed as WebP over JPEG on top of its size reduction, which is on average:

  • 55% over baseline JPEG and 22% over MozJPEG for highest quality
  • 21% over baseline JPEG and 4% over MozJPEG for default quality
  • 21% over baseline JPEG and -13% compared to MozJPEG for low quality

Browser Compatibility and HTML Fallback Tags

First of all, the browser market is pretty segmented. There are several browsers with significant number of users, and the list of supported formats is different for each of them. To get a quick grasp on whether a format you’d like to use is supported or not, you can check the CanIUse site.

Basic image formats: JPEG, GIF, and PNG are universally supported by all browsers. Coverage for other formats presented in this article is also pretty high (all formats are covered for over 70% of users), but if you decide to use them, you should provide a backup for these users who won’t be able to see your media otherwise.

Providing a backup using HTML is actually fairly simple. For images, there is a HTML <picture> tag, which allows to specify file type (just like it allows to specify the screen size with the media attribute). You can then add 2 files to this tag, for example a WebP and a JPEG. The browser will download only one of them, depending on whether it can run WebP. An example of this tag might look like this:

<picture>

<source srcset=”baboon.webp” type=”image/webp”>

<img src=”baboon.jpg”>

</picture>

In using  this code, if your browser supports WebP, it’ll download the WebP image. Otherwise it will ignore it and download only the JPEG. The image below has been added using the picture tag, and will change depending on your browser support.

A very similar <video> tag is available to provide backup for video files. Its structure is identical, and on top of this it offers more customization. You can add attributes like loop, autoplay, and muted, which makes a video look like a GIF.

<video autoplay loop muted>

<source src=”example.webm” type=”video/webm”>

<source src=”example.mp4″ type=”video/mp4″>

</video>

It’s that easy!

Lazy Loading vs Loading Defer (SEO Perspective)

Another approach to optimize image delivery other than simply reducing their size, is deferring their download until after the main content of the page is ready. This can be done in many ways, but there are two main paths:

  1. Defer
  • During initial load don’t request images
  • Claim the space an actual image will take using CSS
  • Wait for the page-ready signal
  • Request downloading actual images
  • Replace claimed empty spaces with actual images
  1. Lazy load
  • During the initial load, don’t request images
  • When users scrolls an image into view, download and show the image.

In the first approach, Googlebot has no issues with crawling the images. Most implementations require a simple, inline JavaScript code to switch to images, and during our tests these images were present in pages rendered by Google. Here’s a tutorial that shows how to defer the image load.

In contrary, lazy loaded images are not picked up by Google. Googlebot is a so-called lazy user. It doesn’t interact on the page. Therefore, content dependent on scrolling, clicking, or any other user interaction is unreachable for Google indexing. There’s a viable workaround to this issue. You can provide a link to the actual image using schema.org. Googlebot will follow this link and acquire the image.

I’m convinced that for most websites a decent image optimization is sufficient, and deferring the load process of images will not yield much improvement, but for some media-heavy pages this might be a viable solution, or even necessity. In such cases, the choice between image defer and lazy loading should also be considered individually. Just keep in mind to ensure indexation for lazy loaded images if you do that.

Image Edit Tools Overview

I’ve used many tools, scripts, and programs in my time. There are some of them that I find particularly useful. Most are command line based. If you’ve never worked with console, don’t worry it’s easy and very handy. I’ll provide some ready-to-use commands anyway, so don’t worry!

WebPconv

This is a WebP encoder with a graphical interface. It’s very easy to use, just drag and drop your files and you’re ready to go. There’s also a tab with additional settings. You can chose lossless or lossy mode, compression quality, and some other useful tweaks.

It allows to encode and decode WebP files, has a simple interface, conversion of multiple files is fast and simple, and it’s freeware. Here’s the download link.

Mozilla JPEG Encoder Project

It’s an API meant to be included in other programs, but I found using the built-in cjpeg command convenient for converting JPEG files into mozJPEGs. In order to use it, you’ll need a console: CMD or Powershell, or BASH on Linux. In order to convert a file, copy it to the directory where you’ve extracted the project files and open a console window there (Shift+Right Mouse Click inside the directory -> Open command window here). Next, type the command:

 

cjpeg -optimize -quality 80 input_file.jpg > output_file.jpg

Change the file names accordingly, and set the quality (0-100, 100 is the highest possible quality and 0 the lowest. 80 is the default value).

Here’s a link to the project (Hit Clone or download in order to download the files).

FFmpeg

This is a powerful tool used widely in video editing. I’ve used it to convert GIFs into WebMs and MP4 with great results. It’s command line based, but I’ll provide you with commands that yielded great results for me.

ffmpeg -i input_file.gif -c:v libvpx-vp9 -b:v 0 -crf 35 -vf scale=714:402 -an -pass 1 -f webm NUL
ffmpeg -i input_file.gif -c:v libvpx-vp9 -b:v 0 -crf 35 -vf scale=714:402 -an -pass 2 output.webm

As you can see, it’s a 2-step process with some settings to adjust.

-crf command allows you to pick image quality, with 0 being the highest, and 63 the lowest possible.

-vf scale= lets you resize your video (you should use the size that it’ll be displayed on page).

You can experiment with these two options, and the rest of the values should remain intact for proper execution. Here’s a link to download FFmpeg (and a great source of knowledge as well).

FileOptimizer

This one has a graphical interface, which is  really, really easy to use. Simply drag and drop files that you’d like to optimize, and hit the ‘Optimize all’ button.

It won’t resize or change your image format, but It’ll clean them up, remove unnecessary data, try other encoding algorithms, etc. On its own it’s not a replacement for sophisticated file optimization but rather the  first step in the process.

I use it on newly acquired files, as a first step in the optimization process. Images on the net often come with a lot of junk data and bad encoding. FileOptimizer recognizes these parts and just removes them so they don’t interfere with following resizing and converting. It also tries other encoding methods, for example, optimizes PNG color pallets. For some files it can reduce the size significantly (I had a few examples of 80% file size reduction).

ImageMagick

This is another workhorse tool. It features both graphical interface and command line processing (which I’ve used a lot more). It features easy scaling, cropping, converting, and many more. If you’re preparing images for your website, you’ll surely find a use for it. Take a look at its features list, and grab it here.

GIMP – GNU Image Manipulation Program

It’s basically a free version of Photoshop that originated on Linux, but is now available on multiple platforms including Linux, Windows, and OS X. It features an image manipulation utility, but also powerful scaling, resizing, and encoding functions. It has also a console mode for batch files manipulation. Here’s the GIMP website.

Summary

In the current state of the web, page speed is very important. It influences the user experience, which translates into revenue, as well as organic rankings. Images and animations are a big part of website traffic, and in many cases are the low hanging fruit for optimization. Reducing their size will benefit your users, especially mobile ones. It will also allow you to reduce your server loadout (the less that needs to be transferred, the less work there is for it). In some cases it can also free up some of the crawling budget, as Google won’t need to spent as much of it on media.

Published
  • 12 September 2018
Comments
Category

4 Sources | Show full list

Marcin

See all articles by Marcin Gorczyca

Did you like this article?

Why not share this article:

Subscribe to Elephate's newsletter to receive fresh SEO and Content Marketing updates and more!

Thanks! We are happy to have you on our list!

Expect some tasty news from the Elephate team soon.

Share

more blog posts

Back to Blog list