Imagery on the Web can be a powerful tool for reinforcing brand identity, communicating a message and establishing a look and feel that informs and enhances the overall user experience. Because Marriott.com relies heavily on imagery for all of these purposes, the image selection process plays a vital role in ensuring consistency and quality throughout the site.

Although the stylistic standards for image selection on Marriott.com are constantly evolving, there are some basic guidelines that should be employed when searching for images.

What to Avoid

• Stereotypical subject matter that looks like generic stock photography
  Example: Smiling family on the beach, business people in boardroom/talking on cell phones, tropical sunsets, couples at candle lit dinner.

• Groups of people or objects that look artificially composed
  Example: Family portrait with subjects arranged and looking squarely into the camera.

• Unnatural coloration or visual treatments
  Example: Blue or yellow hues, background /Images/Online Style Guide Images/patterns, Photoshop mont ache designs, feathered edges, and collages.

• Excessively detailed images
  Example: Any complex image with many small objects, details or colors that dilute the visual impact of the image when viewed at 72dpi.

• Images of bare feet or bottoms of feet
  Example: Couple in bed with bare feet in the foreground.

What to Look for

• Bold, uncomplicated images that are cropped to eliminate excess detail and negative space

• People with ethnic/age diversity

• Interior or exterior locations with bright, natural lighting that evoke positive feelings of openness, relaxation and freedom

• Shallow depth of field focus
  Example: Focus on the details of tropical drinks with people and objects blurred in the background

• People viewed from a third party perspective
  Example: View of a couple on a beach with their backs to the camera

• Action shots with motion and energy featuring people enjoying an activity
  Example: Running on the beach, riding in a convertible, riding mopeds/bikes, laughing together in an outdoor cafe

• Universal humor
  Example: Kids burying each other in the sand, Jumping on the bed, snow angles, couple wading in a public fountain

The Graphic Interchange Format (GIF) is used for images that include areas of continuous color or simple graphics with fewer colors. For this type of image, GIF allows for the greatest level of compression while maintaining the highest image quality. File size is kept low by reducing the number of colors displayed in the image as much as possible without degrading the quality of the image. In order to achieve this reduction in k size, in most cases, the image should be saved in an “adaptive” palette. Applications such as Adobe Photoshop or Adobe Image Ready are excellent tools for image compression.

The JPEG image format is commonly used for photographic or continuous tone images where the color depth extends to thousands or millions of distinct colors. JPEG image files maintain 24- bit/pixel information while providing as much as a 20:1 file compression ratio with no loss of image quality. This is possible because JPEG compression is a "loose" compression method, as information about the image is discarded each time the file is compressed.

For JPEG optimization, image preparation can make the compression more effective. Applying a Gaussian Blur filter in PhotoShop to areas of the image that do not reproduce a great deal of detail often aids the JPEG compression. Once the image is prepared, the compression is adjusted (using the save for Web feature) in the optimization settings in Adobe Photoshop 6.0/ImageReady 3.0 to a level that offers the best combination of file size and image fidelity. The compression setting is reduced to a level where image artifacts are visible and then raised back to a level where the artifacts are not visible and the file size is as low as possible. It is very useful to use the side-by-side comparison feature when performing the compression adjustments to compare the original and optimized images. The "optimized" feature should be selected when performing compression adjustments

GIF image files are comprised of 256 (8-bits/pixel) colors maximum, and are best used for images with large areas of the same color. GIF compression stores information about colors in the image encoded in a "color + number of pixels" in a row format. For example, if there are 100 pixels on a line with the color #CC0000, the image file stores the color (#CC0000) and the length of the run (100). Methodology The first task is to determine the compression strategy for the given image, JPEG for photographic images, GIF for images with flat colors and rendered text. If the image contains both photographic material and text or flat colors, the file type that offers the best combination of color reproduction, sharp text, and file size is chosen. This is determined by attempting both types of compression.

For GIF optimization, the image is reviewed for an initial reduction of unnecessary colors. If any colors can be removed or made to be the same as similar colors—while maintaining the fidelity of the original art—that is done at this point. Next, in Adobe Photoshop 6.0/ImageReady 3.0 (using the save for Web feature) the image is reduced to a low bit-depth and reduced until the image begins to visibly degrade in quality. The bit-depth is then raised to a level at which no degradation of image quality occurs. The color palette settings most often used are Adaptive and Perceptual, however, if the image is comprised primarily of Web safe colors, the Web palette can offer good file size reductions as well.

 Back to top