General Rules

  • For image code, use: img class="img-responsive" src="/util/images/" alt="" width="" height="" /
  • Do not include width and height values within the image code, instead use the img-responsive class along with a col-[breakpoint size]-[column size] class (if needed)
  • Use lowercase with dashes to create descriptive filenames
  • File path should ideally reflect the title (example: Dr. John Smith would be named dr-john-smith-md.jpg) since search engines rank images on both parameters
  • Use an optimized and descriptive title that reflects what the image is portraying
  • Image should be embedded on a page with appropriate relevant content without consuming entire page
  • Interior page images should always span the width of the page*
  • No more than one stock photo per page
  • We discourage the use of double/service line logos

*Exceptions may be made on a case by case basis. If an image is unable to span the width of the page, then it should always be right-aligned.

Accessibility

  • All non-text content must have alternative text – alt=“something” or null alt=“”
  • If the image is there only for aesthetic value, use null alt=“”
  • If the image contains text that is not in the surrounding content, alt should be the same as the text in the image – should be accurate & equivalent; succinct (short), NOT be redundant
    • If the content of the image is not on the page (like 1 huge infographic), then a link should be provided to a page that contains the content description.
  • Do not use 'image of', 'picture of', 'smiling lady', etc.
  • Alt text should not repeat a heading
  • If an image is the only thing within a link, it must always have alt text; includes image maps and buttons
  • The title attribute should not be used on images, use alt attribute instead
  • The aria-describedby attribute can be used for longer descriptions of an image or infographic where the alt text isn't sufficient for the image description. Example:
<img src="/util/images/image.png" alt="short desc" aria-describedby="p1">
<p class="sr-only" id="p1">Include longer image desription here.</p>
View Additional Alt Text Procedures


Alignment & Margins

<img class="pull-left image-margin-left">
<img class="centered">
<img class="pull-right image-margin-right">

You may need adjust the col-sm number used in the class according to the size of the image. Class widths ranging from col-[breakpoint size]-[1] to col-[breakpoint size]-[12] can be used. For example, a smaller image could use col-[breakpoint size]-[4] and a larger image could use col-[breakpoint size]-[8].

Learn more about the grid system and floats


Captions

This is my caption that appears under this image.

<div class="pull-right image-margin-right">
  <img class="" src="/util/images/" alt="" width="" height="" />
  <p>This is my caption that appears under this image.</p>
</div>



Sizing & Saving

  • Save all images for web (72 dpi, RGB, 50% compression)
  • Save as .jpg for non-transparent and .png for transparent
  • Avoid the use of outdated images
  • Encourage lifestyle photography when applicable (both long range and close up photos are allowed)
  • Typographical or illustrative components are acceptable
    • Consider the use of marketing collateral wisely and use only the main component/focus of the material(s) in the banner
    • Limit the use of extraneuos verbiage like day, time, and description in banners
    • Additional text can be added to the banner text box or to the page where banner links
  • Clear, high resolution, original images are preferred.



Types

The following image specs are displayed by width x height:

Interior Page Images

  • Place in /util/images folder
  • Vertical images: 200 x 275px
  • Horizontal images: 250 x 200px
  • Large Group Shot: 350px (w)
  • Portrait/headshot: 150 x 200px

Physician Profile Images

  • 400 x 400px
  • Place in /util/images/physicians folder
View Additional Physician Profile Procedures

Location (Building/Facility) Images

  • Place in /util/images/building folder
  • Facility (main location - about us section): 250 x 250px
  • Building 1 (full size in locations map): 215 x 174px
  • Building 2 (thumbnail, landing page): 350 x 350px (no longer 54 x 54px)
  • Background image (landing page): 700 x 400px

Banners, Features, & Service Images

  • Homepage Banners: 1500 x 500px
    • Place in /util/images/adaptive-content folder
    • The ideal range for image size is 100kb - 300kb. Once you've selected your lifestyle photo, consider processing it through a site like: http://tinypng.org or http://minijpg.com
    • Titles: 2 lines
    • Descriptions: 3 lines
  • Home Featured Item Images: 300 x 300px
    • Place in /util/images/home-features folder
    • Titles: 2 lines
    • Descriptions: less than 175 characters
  • Services Explorer Featured Images: 300 x 175px
    • Place in /util/images/services folder

Awards & Accolades Images

  • Place in /util/images folder
  • High resolution versions are available on the Web Services share drive: Web Services\Design Backup\Logos
  • Square: 100x100px
  • Other Configuration: 100px (w)

Newsroom Images

All photos added in the file upload field should be at minimum 400px in width. Images that are larger that 400px in width will be resized to a maximum of 400px regardless of the device an individual is using to view the News Item.

  • Landscape Photo or Logo: 400px width with variable height (Preferred Size)
  • Landscape Photo or Logo: 400px x 225px
  • Portrait Photo: 400px x 400px
  • Headshot or Physician Photo: 400px x 400px (Preferred Size)
  • Headshot or Physician Photo: 400px x 550px
  • Award Logo: 400 x 400
  • Any additional images placed within the press release body should be added using the standard interior page image sizes.
  • Examples: http://web-q-hospital.prod.ehc.com/about/newsroom/
View Additional Newsroom Procedures

Other Image Types

Photo Unavailable/Missing

  • Place in /util/images/ folder
Standard Placeholder

150 x 200px

400 x 400px

Physician Placeholder

150 x 200px

400 x 400px

Favicon

  • 6 x 16px
  • Place in /local/images folder