Images for Websites: Common Mistakes and Solutions

Today, in the year 2016, all modern websites are rich of media, with even large format images being used. On average, images have a loading volume share of over 60 percent. This should be enough reason to take care of the optimization of photos and graphics, as well as to uncover the most common mistakes. Many mistakes when it comes to images are made by designers and developers already. However, users are very careless as well, and often approach using photos for the web without the necessary knowledge. The careless use of image media can come with disadvantages for a website's loading speed. Taking a close look at a typical blog makes the problem evident:

Image Shares of a Regular Blog

To illustrate this, I measured my personal blog. Here, it becomes apparent that the image shares make up 76,8 percent of my website's file size. In addition to that, the graphics trigger 20 HTTP queries. Enough reason to take a close look at the most common mistakes when it comes to images, and provide the proper solutions.

1 - Using Graphics for Things That Could be Done Via CSS

Before CSS3, there was a time where graphics were used for all kinds of layout purposes. Back then, they were used for backgrounds, shadows, and symbols. Graphics were used for processes as well. Before CSS3, there was no other way to accomplish all of the above. However, there are still too many designers and developers that don't use pure CSS, but instead leave the job to graphics and icons.

The Solution

Now, however, CSS3 is supported by all standard browsers. There is no reason to use graphics for any job anymore. Literally, all possible areas of application can be solved with pure CSS and Icon fonts. This brings big advantages regarding loading speed and helps saving bandwidth.

2 - The Wrong Graphic Format is Used

A very common mistake when it comes to using images on the web. All in all, one can say that the three most common graphic formats for the internet are JPG, PNG, and GIF. That's the difficulty, as not every format can be used for every area of application. Every format has advantages and disadvantages. So generally, the goal is to find the right format for a particular area, because that's the only way to assure that the website loads fast, while the images are still displayed in high quality.

The Solution

Photos should always be used as a JPG. This helps both loading time and quality. The right format for logos, diagrams, supportive graphics with shadows, and anything similar is the PNG format. Here, you should check if a PNG8 is sufficient or if you need to use a PNG24. This can also save file size. The use of GIFs can still be justified as well. Nowadays they are used to display short videos. However, it is often ignored that their file size is enormous. A conversion into a modern MP4 format helps you save a lot of file size. Did you know that a 6,3MB GIF is only 311KB after being converted into MP4??

Activating WebP Support

To save lots of bandwidth and file size, you could use the WebP format, developed by Google, to accelerate the internet. However, Chrome and Opera are the only browsers currently supporting the image format. There is no doubt that other popular browsers will follow soon, though. As you can see from this screenshot, the advantage is quite evident:

3 - Using Non-optimized Images

Unoptimized images are one of the biggest speed hazards for websites. A lot of times, the images used are way too large, forcing the CSS to scale them down. I've seen countless amounts of blogs that used extremely high-resolution images. Accordingly, the loading time drops into unacceptable areas.

The Solution

Every image and every graphic should be optimized for the web before you use it for your website. The easiest way to do so is the "save for web and devices" function of Adobe Photoshop. Before that, the photo should be cropped to the proper size. Here, the article image sizes and the width of the content area can help you. When using WordPress, a plugin for the optimization is a good idea. At the moment, the best one is Optimus HQ (19 Euro a year). But a free plugin like WP Smush is capable of achieving good results as well. Both plugins offer a function that lets you optimize all images in the media library belatedly. When using one of these plugins, every image will automatically be optimized upon being uploaded into the library.

4 - Using Way Too Large Image Formats

Today, the majority of websites is responsive. It adjusts to any screen resolution so that it can be utilized on both smartphone and desktop computer without any issues. This makes the right way to handle images even more challenging. Now you may be tempted just to use images that are needed for the maximum resolution. The CSS will take care of the adjustment to smaller screens. However, the file size stays the same, meaning that the image displayed on the smartphone is still huge, but merely adjusted to the small screen. This will drive up the loading time on mobile devices for no reason.

The Solution

The answer to this problem is to create different miniature versions of the same image and deliver the proper size depending on the device's resolution. WordPress is already following this approach. However, the service Cloudinary is a far more efficient choice that offers a CDN for the images at the same time. Cloudinary also offers a free account which should be sufficient in most cases. A WordPress plugin is available as well.

5 - Not Using a Browser Cache for Images

This mistake is also very common, although very easy to remove and significant. Without a browser cache, the image material is reloaded upon every page call up. With a cache, however, it will only be loaded once and after that, it will be accessed from the cache, which takes significantly less time.

The Solution

A couple of lines of code for the .htaccess file can get rid of the problem very quickly. All necessary files are included in the cache. https://gist.github.com/HechtMediaArts/b146b399dd39a04bf8f5

Conclusion

In 2016, handling images and graphics is still the most important task when it comes to a website. In this section lies the largest potential for the increase of a website's loading speed. When all addressed points are taken care of, a significant performance boost is to be expected. Depending on how you handled the image material before, the difference can be up to multiple seconds.

Via: Source

Photo by Igor Miske on Unsplash

(dpe)