The Science Behind Sizing Images For the Web
Although some people may have lightning fast high speed fiber connections to the Internet, the majority of users are still using slower connections such as DSL, so people designing for the web need to keep both sets of users in mind.
If you post a 3200×2400 pixel image that weighs in at eight megabytes to a website or blog your readers will not view the large image in their browser properly. They will curse you if they are reading your content on a mobile device and might mock and make fun of you when they are reading your site on their desktop. You are using up more server side disk space then necessary and are preventing return visitors to your website.
So how do we shrink images down for the web? What sizes are appropriate and what do we do if we want people to have the option of downloading the full sized image?
Sizing Images Using Photoshop
Photoshop has a built-in Save for Web feature that will take the guess work out of saving images for the web. I generally use the .PNG extension and rarely save any images larger than 620 pixels in width. My images are almost always under 300 KB in size and normally around 20-50 KB. Before you start guessing what size images are appropriate for your site, let’s take a look at where you will be posting them.
What I recommend doing is using a screen shot utility like Jing that allows you to see the size of the image you are selecting. Open the web page and start up Jing. I press my hot key and draw a box around the area in which my image will go. If I am working on a blog I will cut out an article on the front page like so:
When we have the total size of the canvas, we can see what our maximum image size can be. If we were to be creating a top header for a website instead of a blog post image we would measure the total size available at the top of the site.
After we have pasted the image into Photoshop, we can see the exact size of the image by pressing Control + Alt + I. That will bring up the image size screen which tells us the exact dimensions of our image.
I can see that the total width of my image is 656. So the largest image I could safely post would be around 650 pixels. but because we wouldn’t want the image to appear cramped so we should give it at least 15 pixels on either side. So the largest image I should post here would be about 620 pixels centered. When we have our approximate maximum width, we can start to size our image.
The next step is to open our image inside Photoshop. You can drag and drop the image or open it using the file–open menu item. As an example item to resize, I choose the PSD2HTML site header that you can see here:
You should first crop your image appropriately so that you are happy with your image. I like there to be an even amount of space on either side of the image. Getting rid of the empty space is better than shrinking your image as you want your image to stand out and shine.
After cropping my image I, was left with this:
Next, press Alt + Control + Shift + S to bring up the Save for Web dialogue. Save for Web is the function that will shrink your image down appropriately for the web. You will want to select PNG-8 for the file type and choose 256 colors. You can play around with the colors but this is usually perfect for the web. All we have left is to resize our image but before you change the image size make sure that the check box next to constrain proportions is checked. This check box makes sure to scale down your image evenly. This will prevent distortion; I typed 620 into the top box for the width and it automatically changed the height to be 371.
You can see a screen shot of my settings below:
After you make these changes to the settings the image that appears on the left hand side of the screen will change to represent the changes you have made. Once you are happy you can go ahead and hit save. You will be prompted to name your image and once complete you will have a graphic worthy of being published online.
If the image is something like a photograph or a large drawing you can display the slimmed down version on your website and allow your readers to download the full version by clicking on the image. This will give your readers the best of both worlds. They do not have to download the huge image while reading your site but, if they are intrigued and want to see the image they have the option available to them. All you need to do is add a hyperlink to the large version of image which you can host on a separate page.
In graphic design there are many ways to resize images for the web. Every web designer has his or her preferred method. We would love to hear what yours is and what applications you use to shrink your images. What file format do you like best and what is the maximum size image you would post on your site? Do you have scripts or applications that automatically resize your images for you? We would love for you to share them with us in the comments.