Starting a website is an incredibly fulfilling, but challenging experience depending on your web design needs. While it’s easier to have a professional web designer do the job for you, many put matters into their own hands and build from scratch or have, at least, worked from a particular theme and then customized it to their needs.
One problem for many is proper image optimization, an important aspect of web design. Optimizing images not only makes your web pages load faster, but also reduces your bandwidth consumption, which can translate to significant savings in your hosting bills.
There are several tools available at your disposal to optimize images. For the purposes of this article we will be using Adobe Photoshop. If you don’t have Adobe Photoshop there are some alternatives available. I’ve included links to some at the end of this article to some free alternatives available online. This is “Web Design on a Dime” afterall.
Step 1. Optimize Resolution
First, to get the size information about an image in Photoshop, click on
Image > Image Size in the menu bar. The resulting dialog window will tell you all the information you need to know including pixel dimensions and document size.
Next, you will need to change the resolution to 72dpi; this will ensure you have a crisp, clean image. You can do this by editing the section marked “Resolution” and changing the resolution to 72.
Step 2. Resize Your Image
After changing the resolution, change the pixel dimensions of the image to your desired setting, preferably less than 600px wide. Anything under this pixel width will provide you with the optimum image size for your blog.
Tip 1. Changing image size actually changes the colour information in the image, so you might want to save a copy before resizing an image to decide how you like it. Every time the image is transformed in this way it removes or adds pixels, slightly lowering image quality.
Step 3. Proper Colour
Anything that you design for the web should be in RGB – your monitor can only display in RGB – while images for print will be CMYK. Your image should automatically be in RGB colour mode so don’t worry about changing it. If you are optimizing images that will be uploaded to your website be sure to use RGB.
Step 4. Search Engine Optimization Best Practices
Almost done! Your next step will be to do some SEO (Search Engine Optimization) in order to get the most out of your image. Tactics for optimizing your images for search include applying relevant alt text, file naming and placement within relevant content.
If your website doesn’t have a CMS it’s a little trickier (and why don’t you have a CMS?). In order to do this, you’ll need to first find the image source in your website’s script. It should look something like this:[html]<img src=””optimized_file-name”” alt=”” />[/html]
Alt tags are the textual description of an image that appears when your mouse is over an image and the file name is simply the name of the image file.
For both the file name and the alt text, always input names that are relevant to the image.
Step 5. Save As
Finally, after you’ve successfully optimized the image quality and SEO, you’re going to want to save your image and make sure the file type and image quality are as preferred.
Optional Photoshop Option: Make sure to use Photoshop’s “Save for Web” option. The “Save for Web” command is an easy and comfortable way to save graphics for the Web. It allows you to save files in GIF, JPEG and PNG formats directly from a Photoshop file, and most important, without affecting the original.
And that’s it! By following these 5 simple steps, you’ve successfully optimized an image on your website that will attract less spammers, will more than likely attract attention, take up little bandwidth, will have faster loads and is still visually appealing.
What we’ve learned
How to fully optimize images for your web site including: image size, resolution, image quality, and image SEO. All are important aspects of web design optimization. They grab attention, increase load speed and lower bandwidth used.
Free Alternatives to Photoshop
You may be thinking “Hey, this would be easy… if I could afford Photoshop. Is there anything out there a little more affordable”. We fully support adobe and recommend Photoshop however there are alternatives that you could also use to optimize your images. Here are two of our favorites:
Pixlr – Pixlr is a free online photo editor that is fast, simple and boasts enough features to make this a great find for low, to moderate, level photo editing. If you’re already familiar with Photoshop you’ll find the Pixlr Editor familiar in both layout and tool options.
Picasa – A free download from Google, Picasa is great for all-around photo correction and editing and includes ample tools for resizing and cropping.