Image Formats

Guidance for Image Types and Sizes

Summary

How to choose the right file type, best image dimensions, and be sure that your image content is accessible. 

Audience

Editors, Publishers, and Web Managers 

Enhance your Website with Images

  • 1

    Find the Dimensions for your Content Type or Component

    This table provides the ideal image dimensions in pixels for all Content Type Main Images and Paragraph Components. The minimum recommended resolution is double your desktop view size for sharper images on high resolution screens. 

    Content Type or Paragraph ComponentWidth x Height
    Article Card - Default (Rectangle)1152 x768
    Article Card - Portrait 752 x 1000
    Article Card - Square1152 x 1152
    Blog Entry Main Image1400 x 934
    Carousel3840 x 1200
    Catalog Item Main Image600 x 400
    CTA Card Icon75 x 75 (.svg only)
    Event Main Image1400 x 934
    Event Card - Default (Rectangle)1152 x 768
    Event Card - Portrait752 x 1000
    Event Card - Square1152 x 1152
    Home Page Main Image (with Search Box)2880 x 1254
    Landing Page Main Image2880 x 1254
    Logo for Website
    Submit a ServiceNow support request    		250 x 75
    Press Release Main Image1400 x 934
    Profile Main Image752 x 1000
    Profile Card - Default (Rectangle)1152 x 768
    Profile Card - Portrait752 x 1000
    Profile Card - Square1152 x 1152
    Site Page Main Image2880 x 1254
    Text Editor - Inline Extra Large1540 x 1028
    Text Editor - Inline Large960 x 640
    Text Editor - Inline Medium600 x 400
    Text Editor - Inline Small300 x 200
  • 2

    Choose the Image Format

    The Media Library allows you to upload these image file types: .png, .gif, .jpg, .jpeg, and .svg. 

    Scaleable Vector Graphics

    Scaleable Vector Graphics (.svg) are used exclusively for the icons on the CTA Card component. See the Icons Help Topic for more information. 

    JPEG vs PNG

    For most content, you will choose between PNG and JPEG image formats, both of which are popular and widely supported across the web. Both are raster image files, meaning they are made up of a certain number of pixels. For that reason, neither format produces good results when scaled to a size larger than the original image size. 

    • JPEG is typically better for photos of people, scenes, or illustrations with complicated gradients or textures. (See Comparing Examples). JPEGs can be saved with different levels of compression, so you can more finely control the file size and image quality. However, a JPEG loses image quality if you keep opening the same image and modifying it. 
    • PNG retains its quality when repeatedly edited. See Lossy Versus Lossless Compression.
    Accordion

    Comparing JPEG vs PNG

    Tab/Accordion Items

    Good Choices for PNG:Good Choices for JPEG:
    Infographic
    Pimo Pinnacle
    N.C. Museum of Natural Sciences logo.
    People
    Movie Ticket graphic.
    N.C. Museum of History statue.

    With the exception of transparency, both formats can be used, but each yields better results in particular uses.

    Image format uses.

    When you save an image from its original format to JPEG or PNG, the information is compressed to make a smaller file. Smaller files are desirable on the web because they load faster.

    PNG preserves all of the original image information when it compresses (lossless compression). Thus, the file can be modified over and over without a loss of quality.

    JPEG makes the file smaller by discarding information, irrevocably (lossy compression). This works fine for one generation, and is a great way to make a photo small enough for use on your website. However, if that file is edited again, even more loss occurs, and the quality degrades significantly. Don’t let this deter you from using JPEGs when they’re the best option—simply make sure to preserve the original file and modify copies for your website. When you need a different size or other modification, go back to the original to make a new version, not to the second-generation image.

  • 3

    Add Alternative Text for Accessibility

    All meaningful images must have descriptive alternative text (alt text) to be accessible for visitors with low or no vision. Learn more about Alternative Text. 

    If the image does not convey meaningful information and is purely decorative, check the box for Decorative Image and leave the Alternative Text field empty. This allows screen reading software to skip over the image. 

    If both the Alternative Text field is empty and the Decorative Image box remains unchecked, the Editoria11y accessibility checker will flag the image and prompt you to provide a description. 

    Example of alternative text added to describe an image in the Media Library of the Digital Commons Platform.
    Example of alternative text added to an image in the Media Library.