Make Your Web Pages Load Faster

Recently I finished a web site for a friend of a friend. The project wasn’t too difficult, take his already made website and code it so he could use WordPress to edit the pages. Since my friend is also a designer and very knowledgeable about the web I left many of the pages with place a basic framework and place holder images so they could add more current information. Checking back to make sure the site was working OK as they are filling in new content I noticed a problem, the site is taking a long time to load the gallery. The culprit? Non-resized images used as thumbnails.

Whether you’re making your own website or just uploading photos to a gallery page you always want to make sure to do one thing, resize your photos to the proper size for the web. Although CSS is great about changing the physically viewed size of the image, it can’t cut down the resolution or the number of megabytes. This you’ll need to do in your favorite image editing program like Photoshop or Pixelmator on the Mac.

First figure out what you want the finished size of the image to be. Me, I choose about 800px wide and let it scale the height. This size image fits perfectly with the most commonly used resolution used by most web visitors, 1024 pixels wide.

Open Photoshop or whatever program you’re using to resize the image. In Photoshop go to Image then Image Size in the top menu bar. Change the width to 800 (or your size) and click OK. In Photoshop you’ll need to do this step again to change the image resolution. Go to Image again and Image size. Uncheck Scale Styles, Constrain Proportions and Resample Image. Then go to the field labeled resolution and change it to 72 pixels/inch (the resolution of your screen.) Save your image. You’re not done yet though so hang on.

Now you need to sharpen the image. I like the way Pixelmator does it better but since we’re already in Photoshop go to Filter > Sharpen > Smart Sharpen. Adjust the Amount and Radius until the picture looks sharp. If you have camera noise don’t try to oversharpen. You’ll get halos and weird artifacts on the image. You’ll just have to live with it. Save the image again.

Now you can use WordPress image uploader to automatically create a thumbnail image or resize your image again (keeping the same 72 pixels/inch) and resave it with a different name for use as a thumbnail then upload via FTP. That’s it! You’re done.