Web Development : Image Formats & Optimization - Part 1

Getting started on Image Formats & Optimization

We begin to optimize and export images the mockup should be complete, and all aspects should be sized appropriately. This means if we plan to use a web page image at 300px by 300px, it should be just that size in the design document (in Photoshop or another graphics program).

 
For example, above shows a header image for a school website built with Wordpress. The Wordpress
template required a header image 920 pixels wide by 175 pixels tall. We used Photoshop to create the image, making sure to plug in the correct dimensions right from the start below.

But what if you inadvertently created the image in the wrong size?

Any of the following options will enable you to resize the image prior to exporting it:
• To resize an entire image in Photoshop, choose Image > Image Size and follow the prompts.
• To resize a portion of an image in Photoshop, navigate to the appropriate layer, then press Control-t (Command-t on the Mac) or choose Edit > Transform > Resize. Drag the edges of the transformation box until you are satisfied with the new size. To maintain the original image’s proportions, hold down the Shift key while dragging. Press Return/Enter to complete the transformation.
• To resize an entire image without Photoshop, visit http://www.resize.it and follow the prompts.

Piece of the puzzle

In order to translate your appropriately-sized designs into fully functional web pages, we need to make some additional decisions about how they are to be optimized and exported.

Web pages are like finished puzzles: when you view a page in a browser, it’s usually not too obvious where the edges of the individual pieces lie. To see what we mean, compare above.

 
Consider Hershey Park’s website (Image above).

Can you easily identify the individual images used to create the entire page?

 
If we look at the site again with images disabled above, we have some clues.

While you might have readily guessed the photographs were images and most of the text was not, did you identify the bottom footer as being image-based?

How about the search box in the upper right corner?
(Notice both are missing in above.)

In many cases, certain page elements such as textures, backgrounds, and patterns must also be saved as small images, then incorporated into the page in the HTML and/or CSS. With this in mind, our first step in determining how to produce a web page design is to identify the individual pieces that must be exported.

Read Next Web Development : Image Formats & Optimization - Part 2