How to Resize Graphics and Photos for Your Social Media Site - dummies

How to Resize Graphics and Photos for Your Social Media Site

By Janine Warner, David LaFontaine

As the designer of a social media site, it’s important for you to know how and when to resize your images and graphics to optimize your site. Resizing is important for two reasons:

  • The images must be small enough to be displayed well on a computer monitor.

  • You want the images to download quickly.

The smaller the image file size, the faster it will download.

Although some social media sites allow you to change the display size of an image, you get much better results if you change the dimensions of an image upfront in a photo-editing program such as Photoshop.

Reducing an image’s size for use on the web requires two steps:

  1. Reduce the resolution of an image, which changes the number of pixels in the image.

    When you’re working with images for the web, you want to reduce the resolution to 72 pixels per inch (ppi).

  2. Reduce the image’s physical size by reducing its dimensions.

    You want to size your images to fit well in a browser window and to work within the design of your site.

Follow these steps to lower the resolution and reduce the size of an image in Photoshop. In Photoshop Elements, Fireworks, or GIMP, you follow a similar process although the specific steps may vary.

  1. With an image open in Photoshop, choose Image→Image Size.

    The Image Size dialog box opens. Note the high resolution (240 Pixels/Inch) and large height and width (1698 x 1131). This photo is clearly too big to use on most social media sites.

    image0.jpg

    If you don’t want your original image to lose quality (or you just want to play it safe), make a copy of your image and resize the copy for your profile image.

  2. Change the resolution of your image.

    1. Deselect the Resample Image check box at the bottom of the Image Size dialog box.

      For best results, you always want the Resample Image check box deselected when you change the resolution. When you deselect Resample Image, the Scale Styles and Constrain Proportions options are grayed out, and you can no longer change the Pixel dimensions. Don’t worry — you work with these options after you turn on Resample Image in Step 3.

    2. Change the number in the Resolution field to 72.

      image1.jpg

      Make sure you don’t accidentally click the drop-down list next to Resolution and change the numbering units to Pixels/cm. You will notice a dramatic change in the document size in inches.

  3. Change the image size.

    1. Select the Resample Image check box.

      With the Resample Image check box deselected, you can’t change the Pixel Dimensions, so it must be checked when you change the image size.

    2. Enter a height and width for the image in the Height and Width fields.

      Change the size of this image to 851 pixels wide, which is the recommended width for a Facebook cover image. If the Constrain Proportions check box at the bottom of the dialog box is selected, any changes you make to the height automatically affect the width (and vice versa) to ensure that the image proportions remain constant.

      image2.jpg

      Releasing proportionality means that your image can get squished and distorted.

      Note also the drastic change in the file size for this photo. Previously, it was 5.49MB, but after the resizing process, the new size is 1.38MB.

  4. Click OK.

Saving the file at this stage is optional and not necessarily recommended because the final Save for web export that comes next generates a new version.

If you want to return the image to its previous size, choose Edit→Undo Image Size. Be aware that when you save the image, though, the changes become permanent.