Optimal image sizes for tiles

Document created by oliver.beirne Administrator on Sep 22, 2017
Version 1Show Document
  • View in full screen mode

Source document: Optimal Image Sizes | JiveWorks 

 

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.

 

Image locationOptimal dimensions
Optimal file sizeNotes

Hero Tile

  • Banner on top of community homepage (tile enabled homepage)
1260px (W) x 328px (H)
Profile avatar128 x 128 pixelsFrom 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 topExamples 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 tileratio 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, The specified item was not found.)
Place banner dimensionsVariable 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 (The specified item was not found. )**
    • ** 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 The specified item was not found.
Place image/avatar dimensionsratio 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)

The specified item was not found. - 1280px x 400px

The specified item was not found. - 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 [The specified item was not found.]

 

The specified item was not found. 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 The specified item was not found.

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

1 person found this helpful

Attachments

    Outcomes