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
  • When removing an image from a page, please be sure to archive the file in dotCMS if the image is not being used elsewhere on the site.

*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

Alt Text

  • All non-text content must have alternative text: alt=“description”, or the value should be null: alt=“”.
  • If the image is there only for aesthetic value, then use null: alt=“”.
  • If the image contains text that is not in the surrounding content, then alt text should be the same as the text in the image. Alt text should be accurate & equivalent, succinct (short) and not redundant.
  • If the content of the image is not on the page (i.e. infographic), then a link should be provided to a page that contains the content description.
  • If an image is the only thing within a link, it must always have alt text. This includes image maps and buttons.
  • Do not use 'image of', 'picture of', 'smiling lady', etc. in alt text.
  • Alt text should not repeat a heading.
  • The title attribute should not be used on images, use the 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. For 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

Links

  • When linking to any content on a website (i.e. internal/external page, file, etc.), be sure to use descriptive link text.
  • Do not use 'click here', 'learn more', 'download file', etc. in link text as it will be meaningless to those using a screen reader.
  • Some examples of acceptable link text include:
    • About our ER Wait Times
    • Assess your stroke risk
    • View all ER locations
    • Download our pre-registration form
    • Learn more about our maternity classes

GIFs

  • For GIFs with a small amount of text, use alt text.
  • For GIFs with a large amount of text, provide a link to the text version on another page.

Infographics

example of webpage correctly linking to the text version of an infographic
  • Typically, all infographics will require a text equivalent page. Once the text version is created, provide a button link to it near the original infographic.
  • On the text equivalent page, all of the text contained within the infographic must be listed.
  • If the infographic is displayed in a small format on the original page, then a larger version of it should be displayed on the text version page as well.



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.



Stock Photography

The following are approved for accessing stock photos to use our websites:

From the desk of Kearstin Patterson | 12/8/2017

VP Creative Services

The corporate Marketing, Communications and Creative Services teams continue work on developing the HCA brand and refining comprehensive and cohesive brand standards for the HCA enterprise. A component of our work includes the consolidation of the use of stock photo agencies by HCA. Getty Images (including its ThinkStock and iStock photo collections) has been selected as HCA’s primary image vendor effective immediately.

What this means...

  • MediaWorks now has a selection of high-quality images for your creative projects.This repository will be continually updated to ensure there is a fresh selection of quality images for use. Always review this repository first before downloading new images.
  • Our current Thinkstock accounts have been consolidated into HCA's Getty agreement.
  • We are still able to use images previously downloaded from Thickstock. These are located on the West Florida share drive.
  • April, Heidi and Tyler have access to acquire images outside of the new repository. If you are unable to find an image on Mediaworks to use, then please contact them to acquire a new image from Getty.
  • Agencies and vendors can use our Getty images to avoid stock photo charges for campaigns and creative, and there will be no charge for duplicative downloads or usage enterprise wide.
  • For 2018, we won’t be charging back any subscription costs, but we will be monitoring activity and will use that to develop a 2019 charge back model.

Banner Templates

Download the HUT Classic Banner Template

Download the HUT 2016 Banner Template

Banner Examples

The following are examples of images recommended for use with the HUT homepage rotator.

Long Range

Close Up

Logos, Seals, and Other Custom Graphics

Illustrative

Typographical




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)

Blog Images

  • Preview Image: 450x450px
    • Place in /util/images/blog/2018 folder
  • Featured Banner Image: 950x475px
    • Place in /util/images/blog/2018 folder

Example: "/util/images/blog/2018/2018-Feb-Things-To-Do-Before-Pregnant-950x475.jpg"

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