Over a million developers have joined DZone.

Image Optimization: Common Mistakes And Solutions

Learn how to choose the right image formats, sizes and caching strategies to optimize the performance of your site.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

In 2016, all modern websites are media rich. Among other media, images themselves represent over 60% of the average byte per content type downloaded when a web page is loaded. This is why, in your quest of an optimized, fast-loading website, image optimization must be a top priority. Here are the most common mistakes developers and designers make when it comes to handling images—and how to solve them.

Image title


Using Images for Things You Can Do With CSS

There was a time when the CSS specification was pretty basic and images were needed for backgrounds, shadows, icons, etc. However, with CSS3 being well-supported by all major web browsers, you can now make your website load faster and save on bandwidth by using modern CSS techniques.

Do you need a gradient? You can do it so with pure CSS. Fancy some icons? Don’t use images—use SVGs or an icon webfont instead.

Using the Wrong Image Format

One super common mistake when it comes to serving images online is to use the wrong format. Let’s sum it up: .jpg, .gif and .png are the three most common formats for images on the Internet. But it doesn’t mean that you should just use whichever format you want. In fact, each format has its own pros and cons, and using the right format for the right kind of image is something that will definitely save bandwidth and load your site faster while still displaying a good quality picture.

Photographs should always be in .jpg format. Logos or charts? Then, .png is the right choice. What about .gif? Only use it for very small images such as a repeated backgrounds, that you can’t do with pure CSS. GIFs are hugely popular when it comes to displaying short looped videos. But did you know that a 6MB .gif image can be expressed as a 300KB .mp4?

You should also consider emerging formats. Created by Google, WebP is a modern image format that provides superior lossless and lossy compression (26% smaller in size compared to PNGs) for images on the web. As of now, WebP is natively supported in Chrome and Opera, and there’s no doubt that other major browsers will follow. Microsoft has also created another modern format called JPEG-XR—supported exclusively by Microsoft browsers.

Using Non-Optimized Images

As a rule of thumb, every image that you display on your website should be optimized. The easiest way to optimize an image is to use Adobe Photoshop’s “Save for Web” feature.

If you’re using WordPress, then you should definitely install the WP Smush plugin: It automatically optimizes all images you upload through the WordPress uploader and reduces them up to 90% without any compromise in quality. It also has an option that allows you to batch smush images you have previously uploaded. This plugin is definitely a must-have! There’s also a premium version of the plugin available with extra features and increased optimization. I haven’t tested it yet but it looks super interesting.

Using Browser Resizing on Large Images

In 2016, it’s mandatory that your website adapts to various devices and resolutions. While making your website responsive is relatively easy, dealing with images is a lot trickier.

It can be very tempting to use one image, at the maximum resolution needed, and then use browser resizing to scale it down for smaller resolutions. The problem with browser resizing is that you still deliver the same big image, which consequently makes your website take a long time to load on mobile devices and wastes bandwidth—as well as your visitors' mobile data.

The solution to this problem is to create different thumbnails of the same image and deliver the right image size according to the client resolution. To do so, you can either use an open-source solution, such as the well known ImageMagick, or rely on a cloud-based service like Cloudinary.

Not Using Caching on Images

Not caching your image is a mistake that makes your website slower and costs you extra bandwidth. Images and other static resources should be cached in order to instruct the returning visitor’s browser to reuse a previously fetched resource.

Caching can be easily implemented by pasting the following code into your .htaccess file:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

If you’re using WordPress, I highly recommend the W3 Total Cache plugin, which offers image caching as well as many different options for a faster website.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
image compression ,images ,performance

Published at DZone with permission of Jean-Baptiste Jung, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}