Let’s Get Speedy! Optimizing Images
I shared a wonderful article on testing the various WordPress plugins for automatically optimizing images (reducing the download size). Many folks upload large images for blog posts and pages, increasing the download time for their websites. Slow sites are bad news; users will click away if it takes more than three seconds (on average) to download.
Although a plugin can help, I don’t mean to advocate a cure-all for heavy images. As your trusty web designer, my advice is to keep it lean and mean. The more plugins you have, the greater potential for problems.
Take steps to ensure that images are prepared prior to uploading rather than relying on a plugin that may have a hammer approach to reducing image sizes. Quality is your goal, right? Here’s what I do.
Optimizing Images for the Web
- Resize in WordPress (non-Photoshop users). You can resize images in the Media area of WordPress (if a recent version). Once you have selected your image in the media library, click on "Edit Image" below the image. In the new window to the right – you can adjust your size under "scale image." Now that you have the size you want, download the image (grab the URL of the image and download from your browser). FYI, this is not optimal, but will do in a pinch. If you are image editing frequently, get Photoshop.
- Resize in Photoshop. First make sure your lovely image is sized for the place it’s going. If the area is 600 pixels wide by 350 pixels high, don’t load up a 2000 pixel heavy image. In Photoshop, go to menu item "Image" and drop down to "Image Size" and adjust. Keep the aspect ratio in place (link icon to the left should be on); you don’t want a "stretched" or distorted image.
- Reduce File Size in Photoshop. Use "Save for the Web" in Photoshop to prepare an image for usage on websites. You can reduce the quality a bit and get the file size smaller. I usually set it on "High" and start going down from there checking to make sure it still looks okay. Try png and jpg versions as well to see which yields the best results. Don’t be too strict, just make sure the image looks good.
- Cool Tool to Compress! A colleague shared her favorite compression tool called Compressor (it’s awesome). Once you’re in, upload your image and it will compress it. In many cases you will see a significant decrease (test Lossy vs. Lossless). Now your image is ready!
Speedy Websites Are Smart Marketing!
This little step will go a long way in making your website faster and friendlier to visitors. They want to get information quickly, so don’t risk them ditching your site before the image is done downloading. Speed counts! This is an easy way to get you closer to a lightning fast website they will read!
Another cool tool:
Speed test at Pingdom Tools