Images: three optimisation tips to help speed up your site

People like fast websites and so does Google.

In fact, your website’s speed is a ranking factor in Google search engine results.

If your site loads quickly, it’s more likely to appear when people search for your brand. This along with the knowledge that a fast site provides a better user experience (UX), means that a faster website can lead to higher conversions.

If your website isn’t loading as quickly as you’d like, it’s very likely that your images are to blame.

Here are a few common mistakes people make regarding optimising images for their website.

Images are too big

Many marketers and publishers like to use big, high-resolution images on their site, believing that these images will provide a better user experience.

The problem is that high-res images often have a very large file size, and take a long time to load, especially when there are multiple images on the same web page.

We’ve seen many publishers uploading images in the range of 2Mb to 5Mb in their blog or content posts. This image size is way too large for the web, and is one of the most common mistakes that slows down websites.

If your image is larger than 500kb, something might be wrong, and the image could be compressed.

Before you upload new images to your web page or blog post, remember these tips:

• Before you upload any image, double-check the file size (right click the image, and choose properties)
• Keep image files sizes below 500kb (and below 100kb if possible)
• There are many online tools that can help you compress your images to get a smaller file size, such as io, CompressJPG, and TinyPNG.
• If you use Photoshop to prepare your images, keep an eye on the dimensions and make sure the DPI is set to 72dpi (Image/Image Size) and remember to ‘Save for Web’ in order to control the final outputted file size.
• Convert your images to the proper file types. In most cases, you’ll want to use JPG. However, if your image uses transparency (such as an image with a “see through” background) you’ll need to use PNG. There are some rare cases when GIF is best, but, when in doubt, always use JPG.

A specific example: An exclusive online designer footwear brand uses a lot of large banners and products images on its fashion site that dragged the Google PageSpeed score down to just 20/100.

We created a daily cron job (automated task that runs daily) to automatically resize big images down to smaller web standards, while maintaining a good quality.

In the screenshot below, we reduced the file size of an image from 1.3MB to only 142KB.

Simply by reducing image file size, we increased the Google PageSpeed score from 20/100 to 58/100.

Auto-scaling images

Another common mistake with images, is auto-scaling large images so they display smaller than they really are.

Doing this is often more convenient for the developer and content creators, but can really slow down a website.

For example, a big photo banner in a post might also be used as a small thumbnail elsewhere on the site.

The developer, rather than creating multiple versions of the image (e.g. 1000×425 for the banner and 64×64 for a side column), uses code to auto-scale the same big image to display as a small thumbnail. So a big image is being loaded unnecessarily. This shortens development time, but the page speed pays the price.

Not to mention, auto-scaled images can end up looking distorted because they’ve been stretched with code. For example, the thumbnail below is auto-scaled from 1000×425 pixels down to 64×64 pixels, and becomes distorted.

Keep an eye out for times when the same image is used many times on your site. If your site requires 12 different size variations used in 12 locations (something like 25×25, 40×40, 200×200, 658×258, 56×56, 64×64, 92×92, 150×156, 110×110, 160×160, and 180×180) that’s probably too many, and you might want to limit that down to less than four.

Then create a separate image for each different size, and load the correctly-sized image version rather than auto-scaling large images to look smaller than they really are.

Lack of image caching

Even if you use proper image compression, and serve properly-scaled images, a page that’s very image-heavy can still take a long time to load. Since images are static content, a great way to speed up the load time is to use CDN caching.

Caching (pronounced “cashing”) is the process of storing data in a temporary storage area called a cache. For example, you’ve probably noticed that a website you’ve visited in the past will load more quickly than a site you’ve never been to. This is because the visited website is cached by your computer.

A CDN (Content Delivery Network) is a network of servers that delivers cached content (such as images) from websites to users, based on the geographic location of the user.

For example, if you’re in New York, and you’re looking at a website from India, you can load the images from a server that’s actually in New York, rather than loading images from halfway around the world.

A site using CDN caching can deliver images and other static content much faster, especially in peak traffic time, because images are not loaded directly from the web server, but from a cached server with much faster speed.

On top of this, a CDN also helps you serve more visitors at the same time. If your site experiences a sudden or unexpected spike in traffic, a CDN can keep your site functioning effectively.

Some of our favorite CDN providers are CloudFare, Akamai CDN, Amazon CloudFront, MaxCDN, and CDN77.

Mike Le is the Co-Founder and COO of CB/I Digital, a digital agency based in New York and a contributor to SEW. You can connect with Mike on Twitter or LinkedIn.

from Content – Search Engine Watch http://ift.tt/2a0a0m3
via SEW ref=da&site=blogger">IFTTT