Image Formats

Choosing Image Types and Sizes

Summary

Choosing JPG or PNG image formats, and the correct sizes for various images types available for display on websites.

Audience

Editors, Publishers, Site Managers, and Site Admins

How To

  • 1

    Choose Image Format

    Both PNG and JPEG image formats 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. 

    The referenced media source is missing and needs to be re-embedded.

    JPEG is typically better for photos of people, scenes, or illustrations with complicated gradients or textures. 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.

  • 2

    PNG or JPEG

    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.

     

  • 3

    Lossy Versus Lossless Compression

    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.

  • 4

    Minimum Recommended Image Sizes

    Content or Paragraph Type Width x Height
    Carousel or Home Page Main Image with Search Box 3840 × 1200
    Landing page or Site Page Main image (Home Page without Search Box) 3840 × 750
    Article Card Image 1000 × 750
    — Full Width Band 3840 × 1000
    — Two Column Full Width Band * 1760 x 1000
    — Three Column Full Width * 1140 x 860
    — Three Column Constrained Width * 800 x 850
    Profile Image  
    — Default 1000 x 750
    — Square 1000 x 1000
    — Portrait 750x1000
    Blog, Press Release, Event Images  
    — Page View 1480 x 833
    — Grid View 825 x 600
    Spotlight Image 1600 x 735
    Catalog Image 500 x 360

    * If an Article Card uses a background image, then the height should be double the selected card height (540 or 600).

    The minimum recommended resolution is double the desktop view size for clearer, better-looking images on high resolution screens.