Image Compression: Size Matters!
Picking the right image is important but what’s just as important is getting it at the right size. Smaller is always better when you’re adding images to content on your site. A good rule of thumb is to only make the image as big as it needs to be. Most of the time you will only need the smallest size the above photo sites offer. There is not one image in use within SEN that wasn’t the smallest size. And actually, most of them still needed to be reduced down from there.
When reducing an image down only do it once to keep its clarity and quality. And remember, a site that is too image heavy not only leaves visitors waiting but it kills your rankings because no one likes a slow site or one that is all images and no content. This rule does NOT apply to sites who want to rank for image search – as that is an entirely different process altogether.
Pro Tips on Image Optimization
Images tend to make up a large amount of data and can considerably slow a page. Consider the following options listed in order of importance to speed things up.
Pick the Smallest File Size – When choosing your image to download be smart and pick the smallest available file size. These images are meant to support your content and nothing more. However, if you have images that need resizing and cropping then use proper image editing software (like snagit) to reduce the actual file size. It’s a fact that designers frequently resize images by using the img height and width variables on the page itself because it’s easier than firing up an image editor and editing the actual file, aka they’re being lazy. Yes, the image looks smaller but the file size is still HUGE.
Simply put – smaller images require fewer bytes and will download faster so be smart about the images you add to any site!
Optimization – There are many image optimization methods for shrinking the file size of an image by reducing their color depth and/or using lossless compression for .jpg and .png file formats. Most image editors have a save for web feature that will do some compression, plus there are many other software image optimization options out there. Try the free TinyJPG.com, TinyPNG.com, and Optimizer IO for JPG, PNG, GIF and SVG files.
There’s also paid tools like Kraken.io that offers bulk capabilities and even a WordPress Plugin.
Combine Images – This is an advanced tip but since we’re talking image optimization I need to throw it in! By using CSS Sprites, you can use one image for all the little buttons, icons, logos, etc. found on the page. You combine all the images into one large one and use CSS to only display the portion of the image needed. This reduces the number of round trips the browser must make to the server; it can also reduce the total number of bytes downloaded. Sprites are frequently used for reoccurring images on a site and for images that don’t change that often.
Use IMG Height & Width – Specify all images height and width in pixels on every page. Failure to do so will require the images to download before the page can finish rendering.
Yes, you will find specifying height and width creates some conflicts with responsive images. In that situation you’ll have to avoid this step while we’re trying to find a work around, but at least be sure to use height and width on images that don’t need to be resized dynamically.
Article written by: Kristi Hagen at Search Engine News