https://www.reddit.com/r/redesign/comments/87uu45/usage_guidelines_for_images_in_the_redesign/
created by goatfresh on 28/03/2018 at 19:35 UTC*
136 upvotes, 20 top-level comments (showing 20)
I know there's been a lot of requests for this. I've compiled all the sizes and limits for the images here. It's current as of Mar 28, 2018. Hope this helps!
┌─────────────────────────────────┬────────────────────────────────────────────┐ │ Image dimensions │ │ ╞═════════════════════════════════╪════════════════════════════════════════════╡ │ │ │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ **Theme colors** │ │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ │ Just don't make them very light, because │ │ Base and highlight colors │ that makes them very hard to see in many │ │ │ places. │ ├─────────────────────────────────┼───���────────────────────────────────────────┤ │ Body background │ 4000x4000px 5mb (unless tiling) │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ │ │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ **Icon** │ │ ├─────────────────────────────────┼───────────────��────────────────────────────┤ │ Community avatar │ 256x256px 64kb │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ │ │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ **Banner** │ │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ Small background │ 4000x80px 5mb (unless tiling) │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ Medium background │ 4000x144px 5mb (unless tiling) │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ Large background │ 4000x208px 5mb (unless tiling) │ ├─────────────────────────────────┼────────────────────────────────────────���───┤ │ Additional background images │ 512x176px 5mb │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ │ they are basically scaled down and │ │ How banners show up in the apps │ centered into 432px height on high res │ │ │ phones. Depends on your image, you way │ │ │ want to optimize it for this height. │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ │ When using the overlay method for the menu │ │ │ background, the banner height extends into │ │ Note │ the menu area by extra 36px. (116px, 180px │ │ │ and 244px respectively for the three │ │ │ banner sizes) │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ │ │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ **Menu** │ │ ├───��─────────────────────────────┼────────────────────────────────────────────┤ │ Background image │ 4000x40px 5mb │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ │ │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ **Posts** │ │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ Upvote and downvote │ 72x72px 64kb │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ Post background │ tiling is recommended because of the │ │ │ variance in post sizes │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ Link preview placeholder │ 142x106 px 64kb │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ │ │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ **Other** │ │ ├─────────────────────────────────┼────────────────────────────────────────────┤ │ Emoji │ 128x128px 64kb │ ├───────────���─────────────────────┼────────────────────────────────────────────┤ │ Image widgets │ 312px wide 5mb │ └─────────────────────────────────┴────────────────────────────────────────────┘
Update edit: Banners show up a max size of 1125x432px and vote icons are 72px square on a 3x phone
Update edit 2: Post placeholder image is actually larger in card view mod: 142x106px. ht u/Moonwalking_Eren
Update edit 3: actually the menu overlay adds 36px! ht u/TheChrisD
Comment by Georgy_K_Zhukov at 28/03/2018 at 20:19 UTC
29 upvotes, 1 direct replies
Are these values going to be put into the actual editing menu?
Comment by V2Blast at 28/03/2018 at 20:01 UTC
23 upvotes, 2 direct replies
You should admin-distinguish this post for visibility!
Comment by goatfresh at 28/03/2018 at 19:38 UTC
16 upvotes, 1 direct replies
Some of the recommendations are extremely wide to accommodate 4k monitors, but it's up to the designer's discretion, really
Comment by [deleted] at 28/03/2018 at 20:36 UTC
10 upvotes, 1 direct replies
[deleted]
Comment by [deleted] at 28/03/2018 at 19:49 UTC
8 upvotes, 0 direct replies
yessssssss
thank you for this.
Comment by tizorres at 28/03/2018 at 19:51 UTC
7 upvotes, 1 direct replies
u/goatfresh[1] is the true goat
Comment by raicopk at 28/03/2018 at 20:43 UTC
2 upvotes, 0 direct replies
Body background takes a few seconds to load (after tge page has loaded) though, at least for me.
Comment by [deleted] at 28/03/2018 at 20:47 UTC
2 upvotes, 1 direct replies
Thank you very much! :)
How banners show up in the apps
Isn't the app banner uploaded in the settings? Will this be changed in the future?
Comment by Tobs74 at 28/03/2018 at 20:58 UTC
2 upvotes, 0 direct replies
Having these all in one place is very useful, I was wondering about the best sizes for a couple of these. Thanks!
Comment by Thabass at 28/03/2018 at 21:13 UTC
2 upvotes, 0 direct replies
Clicks "..."
Click "Save"
Comment by WithYouInSpirit99 at 28/03/2018 at 22:17 UTC
2 upvotes, 1 direct replies
Thanks so much for this u/goatfresh[1]!
Comment by HyperxGaming at 30/05/2018 at 21:27 UTC
2 upvotes, 0 direct replies
Perfect thanks for the info!
Comment by likeafox at 28/03/2018 at 21:00 UTC
1 upvotes, 0 direct replies
Thanks!
Comment by borez at 28/03/2018 at 23:42 UTC
1 upvotes, 0 direct replies
Thanks.
Comment by elis8 at 29/03/2018 at 02:12 UTC
1 upvotes, 0 direct replies
Thank you!
Comment by [deleted] at 29/03/2018 at 18:42 UTC
1 upvotes, 1 direct replies
I just realized, for link preview placeholder, it says 80x60px. But isn't it bigger, especially on card view?
Comment by TheChrisD at 30/03/2018 at 00:05 UTC
1 upvotes, 1 direct replies
Note - When using the overlay method for the menu background, the banner height extends into the menu area by extra 40px.
Actually the way it's styled right now, it's only extending by 36px. (116px, 180px and 244px respectively for the three banner sizes)
Comment by Nasdaq401 at 01/07/2018 at 07:22 UTC
1 upvotes, 1 direct replies
1125x432 is incorrect as of right now July 1st, or im retarded possibly. I set my banner to every size on this post andn others and still its tiling or not showing enough vertically. Can someone PLEASE help =[ sorry if im an idiot in advance :D
Comment by TatterJack at 17/07/2018 at 12:42 UTC
1 upvotes, 1 direct replies
I'm probably doing something wrong, but I tried a banner on new reddit. It works - provided I;m using a laptop - 1366 * 468, 14" screen. However, when I look at the same sub-reddit under new reddit using a 1920 * 1080, 28" screen the banner fills badly. If I tile it there are tile repeats, and if I fill it the displayed banner cuts the bottom and some right side off. Er - am I doing it wrong? (blush)
Comment by [deleted] at 16/09/2018 at 22:42 UTC
0 upvotes, 0 direct replies
Mostly flawed.