.svg?iar=0&hash=F6049510E33E4E6D8196C26CCC0A64A4){kind=logo}
/hfh-logo-main--white.svg?iar=0&hash=ED491CBFADFB7670FAE94559C98D7798){kind=logo}
Images
Section topics
Images in content
Content images are images that are placed within the rich text area of a page. Adhering to these requirements will ensure proper placement across all device types. Text will wrap around images that are smaller than the width of the content area. A good rule of thumb for floated images is that they should be no more than half the width of the main content area. It is recommend that images be no more than 450x300 pixels, although the height can be variable if the image is not square.
All image file sizes should be 100 KB or less, unless reducing the size greatly compromises the quality of the image.
Images should be floated right. In the content editor (WYSIWYG ), apply the "right" aligned class from the style class drop-down menu to images once you have inserted them into the content.
Images in content may also appear within tabs and accordion and should be sized the same as general content images. See examples below.
Images with captions
When the image with caption code snippet is placed, a placeholder image of 300x200 pixels is added. The image used should be no less that 300x200 pixels so that it will display with optimal image quality. Caption images may also appear within tabs and accordion and should be sized the same as general content images with caption.
Uploading images
Follow design and brand standards set forth for image creation.
Upload images to the appropriate location in the media library in Sitecore.
The editor can be used for finding and inserting images into content. If you are unsure where an image should be uploaded, contact the Web Services Department for assistance.
- Images and files can not contain underscores (_) within their file names.
- Images should be sized correctly before they are uploaded. The CMS is not an image editor.
- Images should be no larger than 100 KB, whenever possible.
- Use alt text appropriately to label images.
- Images should always be floated right unless they occupy the full width of their content area. Images may be floated left only when this position is crucial to the understanding of content.
It is important to consider image format and optimization when providing images for use on the website. The following are guidelines from current best practices.
Image and video guidelines
Photographic images
For photographic images, JPG is the preferred image format. JPG images can be significantly optimized for file size while retaining a high image quality. A good baseline is to set the quality of your JPG image to 50%. In most cases, this will provide the optimal file size to quality ratio. Some images can go lower and still retain a high quality look; others may need to be increased (usually no higher than 75% quality is necessary). Recommended resolution is 72ppi.
Non-photographic images
For non-photographic images (illustrations and other more flat/simple imagery), PNG-24 is the preferred image format to use. If transparency is needed (for photographic or non-photographic images), PNG-24 is the format you should choose. Recommended resolution is 72ppi.
Vector-based images
For vector-based images (ex: icons and logos), SVG is the preferred image format to use. SVG images are scalable for responsive viewing on high-ppi devices, staying sharp without losing quality. In some cases, as required for older browsers without SVG support, a PNG-24 image backup may be necessary.
Photoshop PDFs
Do not create a PDF directly out of Photoshop. If you need to create a PDF from an image (vs. a more text-based document), import the image into Adobe InDesign and create the PDF there.
In most tools (InDesign/Illustrator, etc), we recommend the "Press Quality" option. We would also recommend outlining any copy before outputting to PDF, to avoid any font display or inclusion issues.
Video
For video, we typically recommend using YouTube, which does a great job of serving the video at the optimal quality vs. bandwidth needed by the user on the fly. Upload the video at the highest quality possible and YouTube does all the work.
Audio
For audio, we would recommend providing audio in MP3 format, which will bring the file size down without sacrificing much quality.
-
Tab Images
-
Tab Images with Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nunc orci. Etiam blandit, leo quis vestibulum laoreet, lectus justo rhoncus velit, nec sollicitudin mi dolor a nibh. Integer sed orci augue. Cras euismod, neque a consequat scelerisque, quam nulla aliquet arcu, vel dignissim dolor risus ut odio. Duis in ante cursus, tempor libero a, aliquet lorem. Ut porttitor odio orci, sit amet sodales lacus ultrices tristique. Integer consectetur nunc a molestie faucibus. Duis in diam scelerisque, aliquam nulla eu, dignissim nibh. Vivamus porttitor sem ante, at condimentum lectus ultrices eget. Nunc hendrerit ante quam, non ultrices neque venenatis eget.
Praesent eu risus nec ante porttitor euismod vel in nisi. Maecenas velit dolor, accumsan vitae nibh laoreet, pretium lobortis augue. Praesent ac lacus non enim venenatis mattis. Aliquam iaculis metus dictum, vulputate libero condimentum, placerat diam. Nullam accumsan odio et ultricies convallis. Pellentesque non quam vel ante dictum venenatis in vitae augue. Curabitur vitae malesuada ante.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ac vulputate neque. Aenean rhoncus est eget scelerisque lacinia. Ut mollis nulla sit amet eros dignissim, a faucibus felis rhoncus. In non diam sed diam tristique venenatis. Quisque ultrices erat urna, in lobortis tortor vehicula et. In at rhoncus metus. Proin cursus mi arcu. Donec ornare, lacus malesuada gravida tempor, nibh libero sollicitudin risus, sed volutpat sem magna in nisi. Nulla feugiat feugiat sodales.
In euismod ligula at sem faucibus venenatis. Curabitur tristique ac est quis pretium. Integer tincidunt velit ac pellentesque pretium. Suspendisse suscipit metus ligula, quis faucibus mauris luctus non. Quisque faucibus purus eu arcu tempor, sit amet lobortis lectus convallis. Vestibulum sed sem nec lacus gravida venenatis et blandit mauris. Nulla elementum felis eu metus pulvinar, nec gravida risus cursus. Sed interdum sagittis nibh nec pharetra. Pellentesque ac nisi non nunc sodales consectetur.
Mauris aliquam, felis nec tempus faucibus, purus tortor posuere neque, ut facilisis nunc magna quis magna. Vivamus ultrices, dolor et ultrices ultrices, turpis justo porttitor purus, quis vestibulum risus ipsum id massa. Phasellus eget interdum ipsum, vitae ullamcorper nisi. Integer a ligula nec orci tristique sollicitudin vel a tellus. Vestibulum justo arcu, luctus in lacus ut, vulputate gravida nulla. Cras vitae leo interdum, dapibus risus porttitor, placerat dolor. Aliquam rhoncus leo at ornare congue. Sed viverra mollis turpis nec mattis. In hac habitasse platea dictumst. Vestibulum sit amet metus luctus, semper felis eu, dignissim ipsum. Nulla at placerat lorem. Donec ac urna pulvinar, pulvinar augue id, pharetra turpis. Pellentesque sagittis, ante sed mollis laoreet, libero quam pulvinar nulla, et convallis justo neque in dolor.
-
Accordion Images
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nunc orci. Etiam blandit, leo quis vestibulum laoreet, lectus justo rhoncus velit, nec sollicitudin mi dolor a nibh. Integer sed orci augue. Cras euismod, neque a consequat scelerisque, quam nulla aliquet arcu, vel dignissim dolor risus ut odio. Duis in ante cursus, tempor libero a, aliquet lorem. Ut porttitor odio orci, sit amet sodales lacus ultrices tristique. Integer consectetur nunc a molestie faucibus. Duis in diam scelerisque, aliquam nulla eu, dignissim nibh. Vivamus porttitor sem ante, at condimentum lectus ultrices eget. Nunc hendrerit ante quam, non ultrices neque venenatis eget.
Praesent eu risus nec ante porttitor euismod vel in nisi. Maecenas velit dolor, accumsan vitae nibh laoreet, pretium lobortis augue. Praesent ac lacus non enim venenatis mattis. Aliquam iaculis metus dictum, vulputate libero condimentum, placerat diam. Nullam accumsan odio et ultricies convallis. Pellentesque non quam vel ante dictum venenatis in vitae augue. Curabitur vitae malesuada ante.
-
Accordion Images with Caption
Lung cancer patient Jeff Clark values time to play with his dogs. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ac vulputate neque. Aenean rhoncus est eget scelerisque lacinia. Ut mollis nulla sit amet eros dignissim, a faucibus felis rhoncus. In non diam sed diam tristique venenatis. Quisque ultrices erat urna, in lobortis tortor vehicula et. In at rhoncus metus. Proin cursus mi arcu. Donec ornare, lacus malesuada gravida tempor, nibh libero sollicitudin risus, sed volutpat sem magna in nisi. Nulla feugiat feugiat sodales.
In euismod ligula at sem faucibus venenatis. Curabitur tristique ac est quis pretium. Integer tincidunt velit ac pellentesque pretium. Suspendisse suscipit metus ligula, quis faucibus mauris luctus non. Quisque faucibus purus eu arcu tempor, sit amet lobortis lectus convallis. Vestibulum sed sem nec lacus gravida venenatis et blandit mauris. Nulla elementum felis eu metus pulvinar, nec gravida risus cursus. Sed interdum sagittis nibh nec pharetra. Pellentesque ac nisi non nunc sodales consectetur.
Mauris aliquam, felis nec tempus faucibus, purus tortor posuere neque, ut facilisis nunc magna quis magna. Vivamus ultrices, dolor et ultrices ultrices, turpis justo porttitor purus, quis vestibulum risus ipsum id massa. Phasellus eget interdum ipsum, vitae ullamcorper nisi. Integer a ligula nec orci tristique sollicitudin vel a tellus. Vestibulum justo arcu, luctus in lacus ut, vulputate gravida nulla. Cras vitae leo interdum, dapibus risus porttitor, placerat dolor. Aliquam rhoncus leo at ornare congue. Sed viverra mollis turpis nec mattis. In hac habitasse platea dictumst. Vestibulum sit amet metus luctus, semper felis eu, dignissim ipsum. Nulla at placerat lorem. Donec ac urna pulvinar, pulvinar augue id, pharetra turpis. Pellentesque sagittis, ante sed mollis laoreet, libero quam pulvinar nulla, et convallis justo neque in dolor.