Optimal Image Sizes

Version 29

    There are lots of images within the Jive platform, and finding the optimal size to use can get confusing. Use this table to help. Add more or update what you see if you have better or more information. This is a crowd-sourced document, so we are looking for as much help as we can get to make it complete.

     

    This grew out of a question asked by Melissa Rosen. I've seen Dina Vekaria answer questions about some of these in various discussion posts in the community. And maybe Marya DeVoto's team has additional information that can help us flesh this out.

     

    Image locationOptimal dimensions
    Optimal file sizeNotes

    Hero Tile

    • Banner on top of community homepage (tile enabled homepage)
    1260px (W) x 328px (H)

    Profile avatar

    128 x 128 pixels

    From the Admin Console>People>Settings>Avatar Settings:

     

    Avatar Icons: The maximum size supported for an avatar icon is 128 pixels by 128 pixels (width x height). The supported file formats are GIF, JPEG, PNG.

    Profile picture image size (so that it doesn't get cut off)

    • Primary photo
    • Additional photos
    • Also, how to prevent sideways profile photos

    Profile Photo ratio 4:3*

    Images not in the 4:3 ratio can be either cropped or will have black bars added to the sides top

     

     

     

    Examples include:

    • 400 x 300
    • 200 x 150
    • 100 x 75
    Profile banner image (2016.2)Maximum height 200 pixelsWhile you can add an image that is taller, and can adjust the vertical positioning -- Top, Centered, or Bottom -- the profile itself will only show 200 pixels, vertically

    Carousel tile

    ratio 4:3*

    Examples include:

    • 400 x 300
    • 200 x 150
    • 100 x 75
    Gallery tileNo size restrictionsUploaded images will retain original ratio and will be scaled down depending on width of screen tile and number of images.
    Banner tileDetails in notes =>

    960px X 250px keeps everything that I cropped in the image itself, without zooming in so much. This image size looks great when you display just one image.

     

    800px X 500px looks great when you display 2, 3, 4 or 5 images on your banner tile.

    (see examples, Banner Tile - Image Dimensions)

    Place banner dimensions Variable x 150
    • 150px high; width is fluid/variable, so anticipate the image repeating, or seamlessly tile (horizontally only).
    • Alternately, no repeating, but identify a solid color for the image to transition to on the right side. Image can be transparent png with a fade on the right side (to transparent)
    • 1200px X 150px for place banners (Banner Sizing for Fluid Width )**
      • ** fyi, despite what this discussion indicates, a width of 1200 gets cut off in our instance (Jive-n cloud). for us, 1300 is the magic width.
    • You can also replace the stock OOTB banner.  see Can I replace the preset banner images in Jive-n and JiveX globally?
    Place image/avatar dimensions

    ratio 4:3*

    Examples include:

    • 400 x 300
    • 200 x 150
    • 100 x 75
    Blog post and event banner image dimensions

    1280px X 300px

    OR

    1280px X 150px

    OR

    1280x400

    (see notes)

    (so it doesn't distort or pixelate/blur)

    Blog Post Banner Size Tests - 1280px x 400px

    Content Evolution Blog Banners - Image Dimension - recommendation 1280px X 300px

    FYI, in my internal community, 1280 x 150 seems to have less cropping on the height of the image & is therefore what I recommend to my group owners [Melissa Rosen]

     

    mia.crampton@icann.org states: "I used the banner blog image size 1200 x 300 and on a desktop it looks great; but in Jive Daily the image doesn't render/isn't responsive so it gets cut off.  What is the best image size to use to make it mobile friendly?"

    Tile Images (i.e. if you use a Document Viewer tile to display images, what is the largest width you can insert)Variable

    All assumes fixed width layout setting

    Layout #1 -

    Layout #2 - wide left column = 900px

                       narrow right column = 290px

    Layout #3

    Layout #4

    Reward Badges

    Reward Level

    300x300 jpg

    100x100

    Taken from Jive Cloud Engagement and Rewards FAQ

    Video

    When recording, what canvas size provides the best resolution? I notice that when I preview my files in the recording software, they look crystal clear. But when I upload into Jive, they are blurry.

    [I just tried this at 1008x568, and it renders much more crisply than anything I've done before; equivalent to 126x71, which still seems an odd size.]
    Tips and tricks on inserting an image into your document (sometimes they resize and I'm not sure why-- I think I came across the reason in the JC or documentation somewhere, but now I can't find it).------
    Announcements

     

    * 4:3 ratio examples include 100px by 75px,  150px by 133px,  200px by 150px,  300px by 225px,  400px by 300px