Optimizing Images for the Web – Image Optimization Tools

Images are an essential part of website content. And at least since the loading time is a ranking factor for the search engines, it is important to look for optimized images.
In this article, you’ll learn about the many ways to optimize images for web pages and improve loading time and user experience.

Even on websites is often the old saying: A picture is worth a thousand words. And since we live in a time when visual content is always and everywhere around us (see Snapchat, Instagram, etc.), the importance and use of images is of particular importance.

 

Also and especially on websites pictures are therefore gladly and richly used.
However, on most websites, the image data causes the largest amount of data, as the following image shows by way of example:
In addition to a good motif selection , it is therefore important to select the right image format and then compress the images. Because the smaller the image files, the smaller the amount of data, the faster the page loads. All the greater is the user experience of your visitors and the better for the search engine ranking. A win-win situation!

Not infrequently, compression can save a two-digit percentage of data volume.

The image resolution

Before a picture is integrated into a website, it should be brought to the correct size, that is, image dimensions. The image dimensions are specified in pixels. Colloquially, it is synonymous with the image resolution spoken, but actually means something else.

The image dimensions are the pure pixel information. So for example 800 x 600 pixels. Then the pixel has 800 pixels in width and 600 pixels in height. So big is the picture.
The image resolution actually means how many pixels come to a certain unit of length. For example, how many pixels per centimeter or inch (because here you like working with American units of length). This is interesting where it comes to concrete length measures, such as when printing. Here an image must have a certain size in centimeters or inches, eg 15 x 10 cm.
And here it is important how many pixels should be within a cm. The more, the finer the image resolution. For professional printing, 300 pixels per inch are needed.

This is where the resolution of 72dpi often haunts the web. That would mean that on the web, the image resolution must be 72 pixels per inch. This is not correct ( here you can find more about this already very old myth of 72).

The image resolution is not important for images for the Web, the image dimensions are important.

The correct image dimensions therefore result from the desired display size of the image on the website. Of course this varies from website to website and from image to image.
Anyone who does not have a professional image editing program at their fingertips or wants to adjust the image size “quickly” can use the online tool Picture Resezier .

More information about pixel size and optimized saving for the web from Photoshop, there are in the video images optimized for the Web and save .

The most important image formats at a glance:

Once the image size has been set (and other relevant image edits have taken place), the image must be saved. There are many different file formats available. For the web, especially four file formats are interesting:

JPG: For pictures with many details and many colors

The JPG, sometimes also known as JPEG, stands for the Joint Photographic Experts Group and was specially developed for storing photographs. The JPG is likely to be the most widely used image format on the Web.
The JPG format is intended primarily for images with photorealistic motifs, which should be stored in good quality, but rather low data volume. For larger monochrome areas, lossy compression quickly becomes visible.

Properties of the JPG image format:

  • Well suited for photorealistic pictures with many colors.
  • Optimization options: compression adjustable.
  • Relatively low space requirement (depending on the compression).
  • Compressed with quality loss, more or less visible artifacts.
  • Strong compression = low memory requirement = poor image quality.
  • Low compression = large memory requirement = good image quality.

PNG

The PNG format (Portable Networks Graphics) is compared to the two formats already presented a relatively young image format, which was developed as an alternative to GIF.
The compression of the PNG is not as lossy as the JPG, but the amount of data is larger. The PNG can be stored as 24 bits (PNG-24) and as 8 bits (PNG-8). The 24-bit version is, so to speak, the standard for photorealistic motifs (with the possibility of over 16 million colors). The 8-bit variant can only display 256 possible colors and is therefore only suitable for motifs with few details.

Properties of PNG image format:

  • good picture quality
  • Possibilities of transparency
  • lossless compression

GIF: comeback through moving images

The GIF format can only display images with a maximum of 256 colors (8 bits). It is therefore mainly used for subjects with a low color spectrum, such as logos, icons, illustrations or navigation images. Actually, the GIF format is now almost superfluous. With its few colors, it is unsuitable for photorealistic motifs. It can display transparencies, but the PNG-8 can do that too.
What the GIF has in advance of the other two is the possibility to play (short) animations, or rather individual pictures in succession.

 

These so-called GIF animations can now partly be replaced by CSS3 animations (and / or JavaScript). From time to time, however, they can also be used effectively to explain small amounts of data to the interfaces or are also popular with the so-called cinemagraphs or as small animated images to share them in the expanses of social networks as the following examples show.

SVG

SVG format (Scalable Vector Graphics) is the only vector format in this series. So there is no image size with pixel dimensions.
Vector graphics have some advantages over pixel graphics: Because they consist of mathematically exactly described points, lines and curves, they are resolution-independent and therefore scalable. Compared to pixel graphics, which have to store every single color pixel, only parameters are stored here, so that they usually have a very small memory requirement.

Since HTML5, SVG graphics can also be integrated into websites without a plug-in. All modern browsers (also from IE9) can handle them. Wherever motifs with simple graphical content occur, the SVG format is suitable, eg for logos, diagrams or (simple) illustrations.

A very comprehensive representation and comparison of the individual image formats provides: Optimizing Images .

Tools to compress images

If image dimensions and file format have been optimized or intentionally selected and the image has been saved, the image is ready for use. But even now it can be further optimized. There are online tools (link) to further reduce the file size. This is especially interesting because images usually cause the largest amounts of data. Here it is worthwhile to optimize further.

When compressing, it is important to make sure that the visible loss of quality is not too great. That means that he is not visible, or at least not visibly disturbing.

There are already dozens of programs that can compress images. Here are some of them:

TinyPNG

The tool with the Panda: TinyPng compresses PNGs, but also JPG files – without loss of quality.
The tool is also well suited for PNGs with transparencies. From 24BIT PNGs even 8BIT PNGs can be generated, which of course significantly reduces the amount of data (according to the information on the website sometimes over 70%).
TinyPNG

If you want TinyPNG as a Photoshop plugin , you can do it for $ 50 and you do not have to go the “detour” through the website.

Compressnow

Compress Now supports JPG, PNG and GIF files and you can set the compression level yourself. If an image has been uploaded, it shows dynamically how the file size changes at different compression rates.
The image result can also be inspected immediately (at least in a small preview window). If you like the result, you can download the picture right away.
Compressnow

 

JPEG Optimizer

The name is program: This can be used to optimize JPG files. But not only the compression rate can be adjusted. The image dimensions can also be adjusted. The desired new image width is specified and the height is then adjusted proportionally.
After optimizing the old and new data are compared, so you have a nice comparison. Above all, the saved file volume in percent convinced.
JPEG Optimizer

 

Optimizilla

With the tool Optimizilla you can upload and compress up to 20 JPG and PNG files at once. For each image is then displayed large and clear the saved file amount. If you want to adjust even finer, you can also individually adjust the compression for each image. Then you can download a ZIP archive with the compressed images.
Optimizilla

This tool basically replaces the two popular Compress JPEG and Compress PNG compression tools, each of which was only suitable for one file format.

 

Compressor

JPG, PNG, GIF can be compressed with this tool. There is lossless compression, but even with lossy compression, the differences are barely noticeable.
The tool convinces above all by the modern and intuitive operation. Something not every tool can shine with.

 

Responsive pictures

At the beginning of the article I have spoken of the image dimensions in pixels and that the image should be optimized to the output size.

With responsive webdesigns, however, it is usually the case that image dimensions change flexibly. There are not only “one” image size here, but many different ones. The format-filling image on a large monitor is in its dimensions on a smartphone, of course, totally oversized.

For example, images in responsive web design can be optimized in terms of pixel density. For high-resolution displays (such as Apple’s Retina display), images with a larger pixel size can be displayed.

With different screen resolutions different pictures (with different dimensions) can be displayed. This can be realized via breakpoints.
More about this, and especially technical details including sample source code, can be found in these two articles:
5 Tips for Responsive Images with HTML
Responsive Images – , srcset, sizes & Co.

Interesting is the tool Adaptive Images . This delivers the appropriate image size to the respective screen of the visitor. So it will be, so to speak in real time, each matching image sizes created. This not only saves loading time for the user, but also saves the creation of different image sizes in advance:

Alternatives to pictures

Image size, file format, responsive images – there is a lot to consider. But it can be optimized even more if necessary. And maybe already BEFORE the decision for a picture. So there is the option to completely abandon pictures.

CSS3 techniques

The (ok, not so new) CSS3 techniques allow effects that used to be implemented on web pages only with pixel images. Shadow rolls, curves, twists, distortions, transparencies, gradients or the Blendmodi (blending modes), which are so popular in Photoshop, and others can now be implemented quite simply using CSS.

If such “effects” are implemented with CSS3 instead of pixel images, this saves a considerable amount of data.

The following small example clearly shows some of the possible effects of CSS3:

See the Pen Button.css: CSS3 Button Animations by Zixuan (Kevin) Fan ( @ kevinfan23 ) on CodePen .

 

CSS sprites

Instead of loading several (smaller) pictures, there is the possibility to save them in a big picture. And then only one CSS, showing the matching, section of this image via CSS. This saves loading time, because only one (certainly larger) image must be loaded and not several (smaller). This will reduce queries to the server. Icons (eg social networks) or country flags are popular examples and fields of application for CSS sprites.

Reload images

Normally, all page content is loaded gradually. Regardless of whether the user also looks at all content. In the current development to ever longer pages with larger and larger images (which comes to a head in the one-pagers), large amounts of data are often loaded, to which the user never gets (be it because he leaves the site before or clicks on a link) – which of course is unfavorable for both sides.

Here helps the “lazy” shop. The images are only loaded when the user, ie the browser, also reaches the corresponding point on the page in which the image is displayed. This can lead to the fact that it always takes a moment until the corresponding image is loaded, so again and again an empty space can be seen. But the initial loading of the page itself is much faster. And above all, less “useless”, because not noticed, data loaded.

For this so-called “Lazy Load” there is a jQuery plugin that can be easily integrated and do the rest:
Lazy Load Plugin for jQuery .

In order not to have this short loading effect of the empty area, the pictures can already be loaded “shortly” before the user is in the appropriate place.

Tips for pictures in WordPress

Since many readers use WordPress, I have a few tips for this beautiful CMS.

Thumbnails in WordPress

From every uploaded image, thumbnails are created by default, ie small thumbnails. In the backend under “Settings” → “Media” you can change the generated image sizes. But this is only so for future image uploads and should therefore ideally be done directly after the first set up the WordPress site.

If you need additional previews in other dimensions, you can specify this in functions.php. A few helpful tips can be found in the article image sizes in the WordPress theme .

If you want to adjust the previews later, this works well with the plugin Regenerate Thumbnails .

Compress images in WordPress

Above, I have already presented a few tools to optimize images, or the amount of data. With the plugin https://wordpress.org/plugins/wp-smushit/ the images can be compressed loss-free directly in the WordPress backend and, if desired, the file size can be adjusted. The images can either be compressed directly when uploading or at the touch of a button all already existing simultaneously (or in the free version always 25 together).

This way the pictures can be optimized later on. The plugin also indicates whether an image has already been compressed or not.

Load pictures later

Above, I introduced the technique of the “Lazy Load”. There are of course also suitable WordPress plugins, including Lazy Load WordPress .

Conclusion

Optimizing images is part of the standard work of a web designer. This starts with the correct image size and file format and sometimes ends only when “lazy loading” …

What I almost forgot: At the very beginning, of course, the question could be whether an image is needed at all . Is he irreplaceable in understanding the content? Not infrequently, large-format images are used, which should look especially “nice”. For example, large format landscapes, which are not even directly related to the topic of the website or the content. Despite all the “visuality” that we are exposed to and in which it means to “enforce” and attract attention:

Maybe it is sometimes better to use fewer images and instead refine the typography!

So, in this article, I’ve introduced some aspects and techniques to optimize your images in the future and to keep the user experience as great as possible for your visitors, or not to worsen by unnecessary amounts of data.
If you have more tips, always here in the comments!