Optimizing images for the Web

Nov 17, 2011 articles, photoshop, web design

There are many reasons why you should optimize your images that you use on your website. First and foremost is that it creates a better user experience, no one wants to sit and wait on large images to load. Especially in the age of lightening fast internet. Back in the day when there was dial up it was just how things were, waiting on websites to load. But people are spoiled and conditioned to expect a fast load time. And if you have a huge file that hasn’t been optimized for the web your users are for sure going to bounce off your site and on to the next.

Let’s not forget about Google!

Yes Google. Google gives brownie points to websites that have fast load times. This means they will favor your website over another in the search results if you are faster than your competitor.

Optimizing your images for your website is still a big part of web design. By comparing image quality side by side you can push the limits of getting the smallest file size possible on each image. Sure it is a little more time consuming since you have to do it manually for each image, but in the end your website will be lightening fast and optimized for the fastest loading time without the loss of quality of any image.

Have a cookie cutter website like Wix or a flash based site? Or maybe you had someone program out an admin section where you can upload images yourself to your website. Even more the reason to optimize your images before you upload them. Sure a lot of these cookie cutter websites will re-size your image after you upload it, but most of them do it in the code and the file size doesn’t change! Think about it, if you upload a 1 megabyte image, that gets scaled from the code but not in file size and add that to a gallery of images you are talking about 12 megabytes for a dozen images. That is HUGE!

Resizing your image is pretty easy. Most image software will let you re size the image and let you set the pixels to 72ppi, as well as set your pixel width and height dimensions. Yes this will cut down on your file size but it isn’t the best or most effective way to optimize your images.

Photoshop Save for Web Feature

Photoshop has a handy feature called save for web. It has many controls and lets you compare the original to the optimized version. It also lets you switch between file formats and gives you the output size for your optimized image. Even if you keep the 100% saving for web feature in Photoshop is going to cut the file size down tremendously. But you can go even further and dial it back to a quality of 50-60 percent, and in rare cased as low as 40 percent. Also compare in 2 up mode this will show you the original verses your optimized version. If you start to get some funky jpeg artifacts push it back up about 10 percent. With this nifty little feature you can get super small file sizes and not compromise image quality.  Once you get a good idea of what percentage is optimal, you can just run a batch command with those settings and this will save you time if you have a lot of images to re-size.