Improving Web performance via image optimization

Web performance refers to the speed at which web pages are downloaded and displayed on the user’s web browser.

Faster website download speeds have been shown to increase visitor retention and loyalty and user satisfaction, especially for users with slow internet connections and those on mobile devices. Some aspects which can affect the speed of page load include browser/server cache, image optimization, and encryption (for example SSL), which can affect the time it takes for pages to render.

Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render useful content on the screen.

image-optimization

Image Optimization

Image optimization is an art that you want to master. Optimizing web images is a process of delivering the high-quality images in the right format, dimension, size, and resolution while keeping the smallest possible size without sacrificing quality so that your page load times remain low. It’s also about image SEO. That is, getting your product images and decorative images to rank on Google and other image search engines.

The importance of images in connecting users to your products has been proven. If your website takes more than 3 seconds to load, users are more likely to abandon it which will drastically increase your bounce rate and eventually, it will affect your conversions.

How to optimize images?

Image optimization can be done in different ways be it by resizing the images, caching or by compressing the size. One of the simplest and most effective image optimization techniques is to ensure that we are not shipping any more pixels than needed to display the asset at its intended size in the browser.

There are numerous online tools you can use for image editing. Adobe even has a free image editing application for smartphones and tablets, Photoshop Express. This tool doesn’t have all of the capabilities of the desktop version of Adobe Photoshop, but it covers all the basics of image editing and doesn’t cost an arm and a leg.

Online image editing tools:

  • PicMonkey has been described by experts as a “staggeringly great photo editing tool”.
  • PIXLR is super user-friendly and comes with a 100% free app for your smartphone so you can edit on the go.
  • Canva is another fairly advanced online image editor.

Powerful image processing on the fly:

If you want responsive images on the fly Imgix is a great tool to try. Imgix transforms, optimizes, and intelligently caches your entire image library for fast websites and apps using simple and robust URL parameters. Resizing, cropping, and automatic content negotiation and enhancement are just the beginning of what you can do. Using Imgix, you can overlay text, stylize images, apply masks, add borders and padding, and much more.

In this digital world, every factor related to your website performance matters. And the expectation of visitors is only going to increases with time. One can not ignore the amazing benefits of optimizing images. These benefits are not restricted to the page load speed and SEO ranking only. Image optimization is capable of turning up your conversion and revenue numbers.

Advertisements

Easy Web Fonts with Google Font API

Web fonts allow you to step outside of the normal web-safe fonts by taking advantage of CSS’s @font-face rule. However, right now, browsers aren’t uniform in its implementation of @font-face. More specifically, web browsers differ in the types of font files they support (hopefully this will change with the WOFF standards). Additionally, you must be careful with the fonts you use since some of them might not be licensed for web use.

To sidestep the issues with @font-face, the Google Font API is here to the rescue. Here is an example of using the Cantarell font on elements that takes advantage of Google Fonts API. If you want to use the Cantarell font from Google Font API, first reference the remote stylesheet inside your tags:

href="http://fonts.googleapis.com/css?family=Cantarell"

To use the font in h1 elements, simply use the font-family CSS property.

h1 {
    font-family: 'Cantarell', Arial, serif; /*Use a font stack, just in case.*/
}