In our time of Instagram celebrities, Photoshop and selfie doctoring apps, it can be easy to mistake the meaning of image optimization. On a related note, it can also be easy to not fully understand how important image optimization is for your website performance and user satisfaction.
Image optimization is a main component of front end optimization (FEO). The front end of your website refers to everything that goes into the interaction between your website and a user’s browser, so front end optimization is the steps taken to improve that interaction for excellent website performance as well as user experience.
The good news is that image optimization doesn’t have anything at all to do with mastering that teeth whitening app. The better news is that image optimization – and a big portion of front end optimization overall – can be easily accomplished through the use of a Content Delivery Network (CDN). Keep reading for the importance of reducing front end delays, the ins and outs of image optimization and how a CDN can be a powerful tool for your website’s performance.
On the front lines
According to Content Delivery Network provider Imperva Incapula’s guide to front end optimization, up to 80% of your website’s response time stems from front end delays. That means that 80% of the all-important time your users spend waiting for your site to load is caused by front end issues like file size and too many open connections.
Page load time has been shown to be one of the most important factors when it comes to website performance. Just a one-second delay in page load time has been shown to cause a 16% decrease in user satisfaction and an 11% decrease in page views. An Incapsula survey of online shoppers uncovered that 62% of shoppers were only willing to wait an absolute maximum of five seconds for a page to load.
What all these statistics translate to is one cold hard fact: in an internet landscape with an untold number of competing websites waiting for your frustrated users with open arms, you can’t afford to have these front end delays. Luckily, what you probably can afford is a CDN.
Inspecting your icons
Think about how many times you’ve sat in front of a web page, waiting for it to load, watching an image come creaking into view millimeter by millimeter. Now stop thinking about it because it’s annoying. That is why image optimization is so important.
To begin with, take a look at the image files you’re using for things like icons, diagrams and logos, images that are made up of lines, curves and other simple geometric shapes. Look into replacing some of these regular/raster images with their smaller file sized vector counterparts.
Vector vs. Raster (Source: Incapsula)
First steps in dealing with photos – file type and image size
Generally speaking, photos and images used on your website that do not fall into the above category of icons and diagrams should only be one of two file types, possibly three if you need movement. For photographs, default to .jpg because 1) photographs don’t need any transparency and 2) jpgs can be easily compressed into a smaller file size.
If your images require transparency, use png. These images will have a larger file size so be judicious about how you use it. And for those fun animated images, go with .gif of course. You get your animation and the file size is kept small.
Image compression (Source: Incapsula)
Most content management systems are designed to keep your website looking right no matter what. So that means if you upload a gigantic 2500 x 2500 pixel photo and try to stick in a blog with a maximum content width of 800 pixels, it’s going to make that big hog of a photo fit into that 800 pixel space instead of letting you blow out the frames of your website and cover half the page with your selected image. On one hand, great. Your website still looks right. But on the other hand, that giant file is going to be straining your system every time that page is loaded.
To eliminate these resource-straining, page-slowing files, simply resize the images to the size you need them to be prior to uploading and posting.
Caching, compression and CDNs
Aside from the points covered above, there are two main components when it comes to your image optimization: compression and caching. Compression isn’t as big of a deal for image files as it is for HTML, JavaScript and CSS files since web-ready image formats are already compressed, but image file size can be further reduced with the removal of data such as header information or by reducing the image quality with what’s called lossy compression. An advanced CDN makes it easy to optimize images this way by letting you choose between image quality and page load time.
Caching is by far the more effective image optimization technique anyway, and this is where a CDN really comes in. A CDN is a global network of servers that store your website’s content – including images – in order to serve it up to your users fast. An advanced CDN can also provide what’s called progressive rendering, which loads a lower quality version of your image fast and replaces it with progressively higher quality versions of the image until your full quality image is in place.
Progressive rendering (Source: Incapsula)
Beyond image optimization
CDNs do much more than providing image optimization. They also improve page load time by caching all static content as well as dynamic content for the period in which it remains unchanged, compressing HTML, JavaScript and CSS files, eliminating unnecessary characters from source code, optimizing the management of a website’s multimedia content resources, and providing network optimization.
Perhaps most significantly, CDNs improve website performance and reduce page load time by redirecting users to the server located closest to them in the network. The closer a user is to a server, the faster the website will load.
As a CDN is a multi-server environment, it provides built-in load balancing, helping to guarantee site uptime by keeping any one server from becoming overwhelmed by traffic, whether that traffic comes from actual users or from DDoS attacks. Advanced CDNs will also provide further dedicated DDoS protection as well as protection from malicious bots, such as scrapers and spammers.
A CDN can’t make you look skinnier on Instagram or remove your ex from what would otherwise be your favorite photos, but image optimization and front end optimization is much more important than any of that, and a CDN handles it all beautifully.
