Formatting Images for the Web

May 3rd, 2012
It is important to resize the images you upload to the web to the proper size and resolution. This assures images load quickly and correctly. Luckily, it is super simple if you have the right tools. You will need some imaging software to resize and save properly. I am using Photoshop, but this can be accomplished with most current imaging software such as Paint Shop Pro and Gimp. The pixel dimensions for images you upload are different according to where you are using the images, so make sure you consult Website Specifications to make sure you know the exact pixel dimensions you should use.

Step-By-Step Instructions »

 

1.

Open the image in your imaging software.

Right now my image size is 1600px x 1200px, which is way too big for what we are needing for the web.

2.

In Photoshop, go to Image > Image Size…

or you can use the hotkey:
Mac – option + command + I
PC –    ctrl + alt + I

3.

The dialog box appears giving you your current image dimension and resolution. Make sure you are measuring your dimension by pixels and not inches. Also, make sure you have constrain proportions selected. This assures the image does not skew and look weird.

For this tutorial, I am going to insert this image into a slideshow. The Website Specs say the slideshow dimensions are 735px x 410px. So I am going to insert 735 into the width. Because my proportions are constrained, the height adjusts automatically. Set the resolution to 72.

Click Ok

4.

My image has now been resized to 735px wide. However, in order to fit properly into the slideshow, we are going to have to crop the image a bit so we get the best composition.

Select the crop tool

5.

In the options panel at the top insert the pixel dimensions for the crop. I am going to insert 735px for the width and 410px for the height.

6.

Now, all you have to do is click and drag the crop tool across the image and adjust it until you have the best composition.

When you are happy with the composition, hit enter/return

7.

We now have an image that is set to the exact pixel dimensions for a slideshow. You can now upload the image in the Edit Content section under the Slideshow tab

 

Important Note

You can crop photos to fit in the slideshow, but it is very important that you do not crop artwork. When adding artwork to a slideshow, make the resolution 72 and match one dimension (width or height) to the required dimension pointed out in Website Specifications. The slideshow will adjust the image accordingly in the slideshow.