Intro

Today our web browsing experience is largely populated by images and photos. While this is beneficial and visually stimulating, having large amounts of unoptimized images can steer viewers away from a website. Images being too large, image files taking too long to load, or images not loading properly are all issues that can negatively effect your website user's experience. Here is a tutorial that will help you create the most efficient images for your website:

For this tutorial we will be using Adobe Photoshop CS5 to prepare and optimize our images. The guidelines aren’t restricted to but will be shaped around Photoshop. There are a number of other software titles that can achieve similar results. The general idea and procedures are the same across each software title. Continue to the bottom for a list of software suggestions.

Images are too large

One of the biggest issues with images on websites is that many website administrators do not resize their images before uploading. Images that are too large can take up too much real estate, add unnecessary download time, and make your website difficult to view.

Follow these instructions to resize your images:

1. With your image open, go to Image > Image Size from the main menu.

Photoshop Image Size Menu

2. In the dialogue box that appears, we want to make sure a few things are checked.

  • Scale Styles
  • Constrain Proportions
  • Resample Image: Bicubic Sharper (for reduction and Bicubic Smoother for enlargement).


Photoshop Image Resize Popup

3. Resize your image accordingly by changing either the pixel dimensions or document size.

  • Resolution should be set to 72 pixels per inch (higher resolutions will contain more pixel data than can be displayed on most screens)

QUICK TIP:

You might be asking “what size should I save this as?"
To be honest, there’s no simple answer.

What size you use all depends on each individual image and how that image should appear on your website. Ideally images are resized to conform with the overall design of your website. If you do not know the exact size needed consider resizing to an approximate size. Next you want to resize accordingly until satisfied. Here are some useful sizes as reference.

If you are still lost consider contacting the web professionals at Design Brooklyn for help.

Photoshop Image Resize Popup 2



4. Click OK after you have chosen the image size.

Congratulations, your image is now successfully resized for website use.

BUT — before you upload, be sure to save your image for the web.


Save for the Web

Now that your image is at the proper size and resolution, you’ll want to optimize the image and rename the file to conform with web standards. Image optimization helps to reduce your image’s file size which can dramatically decrease image load time and keep your website visitors happy.

1. After properly resizing your image, go to File > Save for Web & Devices.

Photoshop Save for the Web Menu

2. Make sure you are in the Optimized tab. This will allow you to see a preview of the optimized image. Alternatively you can use the 2-Up or 4-Up tab to compare the original and the optimized image.

Photoshop Save for the Web Optimized Tab

3. Choose the file format for the image you want to save.

Photoshop Save for the Web File Format

Choosing the right file format will greatly affect how your images look on your website. For some images choosing the wrong file format will render it to not load properly. For example if you used .jpg for an animated image or if your image has more colors than the file format can handle.

Loading GIF .gif
GIF is great for simple graphics like logos, shapes, patterns and solid colors. It allows for transparency but only supports 8-bit or up to 256 colors so it isn’t recommended for realistic photos or images that have a high range of colors. GIF also supports animated images but be aware that long animations will result in larger file sizes.
JPG Ruby .jpg
JPG or JPEG are ideal for photorealistic images, it supports 24-bit or up to 16.7 million colors but doesn’t support transparency.
Dog Paw PNG .png
PNG is very similar to GIF in it’s functions except for animation. While PNG-8 offers the same amount of color support as GIF (8-bit/256 colors), PNG-24 offers up to 24-bit or 16.7 million colors. PNG-24 also offers alpha transparency unlike other formats which allows for variable opacity to achieve more realistic effects such as transparency around shapes and curves as well as shadow and glow effects.
WBMP Logo .wbmp
WBMP or wireless bitmap format is used for mobile phones, it only supports 1-bit or 2 colors (grayscale). This format is generally not recommended.

Settings to keep in mind

If choosing GIF keep in mind four settings: Color, Dither, Web Snap, and Lossy

Color: GIF only allows up to 256 colors, reducing or increasing (up to 256) colors will result in less/more colors but smaller/larger file size. Using the Color Table you can choose colors you want to include or exclude.

Dither: Simulates colors that aren’t in the color palette by bending colors that exist in the image. This helps to create smoother looking images.

Web Snap: Snaps colors in your palette to web-safe colors.

Lossy: Changes pixel patterns in areas for more solid colors, it results in smaller filesize but generally creates noise. Adjust as needed for the less amount of noise.

Photoshop Gif Format


If choosing JPG keep in mind 2 settings: Quality and Blur

Quality: Allows you to sacrifice image quality for better compression (file size).

Blur: applies a layer of blur on your image to reduce artifacts or noise.

Photoshop Jpeg File Format


4. Click Save and name your file accordingly.

Now your image is properly optimized to upload to your website. As an added bonus, your resized images should upload much more quickly!

Software suggestions:

Adobe Photoshop or Photoshop Elements (cross platform)
GIMP (cross platform)
Corel PaintShop Pro (Windows)
Paint.NET (Windows)
Seashore (Mac)

Back to Blog