How to optimise JPEG images for the web?

How to optimise JPEG images for the web?

Despite the rapidly increasing power of server hardware and software, reducing page sizes and load times is still a major consideration. The best way to drastically cut back on both is by optimizing images before uploading them. By their nature, JPEGs benefit the most from popular optimization techniques. The following is a quick step-by-step guide for making your images look great while taking up as little space as possible on your server.

Get Your Tools Together

There are literally dozens if not hundreds of fine programs out there that can be used to tweak images for your website. Popular options include desktop programs such as Photoshop, ImageOptim and Gimp as well as online services like Pixlr and JPEG Mini. If you use a CMS like WordPress, there are plugins available such as EWWW Image Optimizer or CW Image Optimizer that can automate the process.

Crop and Sharpen Your Photos

Before you compress anything, it’s important to perform a little pre-optimization. First things first, crop out any unwanted space on the margins of the images and resize them to your desired resolutions. Play around with both sharpness and luminance until you get the look that you want. Finally, be sure to strip out any unwanted or irrelevant meta data such as keyword and geo-location details.

Shrink and Upload Images

Once you’re good to go, you’ll have to settle on a compression ratio. You can easily shrink a 1MB JPEG down to 50K or less and still have a fairly crisp image to work with. A compression ratio of 40% results in 60% image quality, which is typically more than adequate. If you click the “File > Save for Web” option in Photoshop, it’ll display a preview of various compression levels.

Add Meta Data to Your Media

While image quality is the most important aspect of JPEG optimization, updating meta data once images are uploaded is also key. The alt and image text that you associate with your JPEGs can have a major impact on your site’s SEO health. When you’re uploading your images, add relevant keywords and meta text that make sense in the context of the photo as well as its related content.

Gauge the Results and Fine-Tune

The final piece of the puzzle is ensuring that your efforts have yielded positive results. Fortunately, there are a number of free and paid apps available online that can simplify the process. Use Screenfly to ensure that everything looks good on a variety of browsers and computing devices. You’ll also want to ensure that page load times have decreased using tools like Image Delivery Test and Pingdom.

The Upsides of Optimized Images

While optimizing your JPEGs can save you some money in terms of hosting storage and bandwidth costs, that’s not the primary reason to do it. The fact of the matter is that a site with properly optimized images is simply faster and delivers a superior experience to visitors. This can greatly reduce bounce rates, increase search rankings and make your site more profitable.

Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *