Suggested Image Sizes
Suggested sizes for images in Framework/Framework+ as they appear on our demo site.
Note: These are merely suggestions based on the content present in our demo site. The best-looking size may differ for your own site depending on the length and layout of your content.
The pixel size presented is based on how they would present on mobile (size usually being around 2x more of the rendered size to account for retina devices, unless it’s an SVG image) and hence may not render at that size on desktop. The aspect ratio will allow you to scale your images up or down in pixel size while still keeping in line with the width to height ratio. You can use a ratio calculator if you need help scaling.
For the most part, the width is what is most important while the height should be whatever fits your content length best. For example - while our Background Hero pixel size suggestion is 1920x1080 you could easily make the height shorter or longer to fit the amount of content in your hero, but you would want the width to remain at least 1920px so that it can fit across the largest average desktop size without pixelating.
Caution**:** For faster loading times we suggest keeping all images under 2000px wide and use image compression to optimize them.
Cropped images (such as backgrounds, blog thumbnails, team listings, etc.) will crop differently on different sized devices. We suggest ensuring your main focus is in the center of your image so that it is less likely to be cropped out.
Type
Pixel Size
Aspect Ratio
Background Hero
1920x1080
16:9
Background Two Tone
1350x900
3:2
Blog Featured Image
1140x760
3:2
2 Column
960x640
3:2
Case Study Featured
870x580
3:2
Case Study Thumbnail
870x435
2:1
Team Listing
768x690
10:9
Logos
126x42
3:1
Blog Author Portrait
100x100
1:1
Icon (Large)
65x65
1:1
Icon (Small)
24x24
1:1
Testimonials Profile Image
140X140
1:1
Tabs 2 Column
768x704
12:11
Resource Slider Card Background
900x800
9:8
Resource Grid (Landscape)
1080x540
2:1
Resource Grid (Portrait)
768x1200
5:8
Resource Grid (Square)
768x768
1:1
Masonry Gallery (Landscape)
300x200
3:2
Masonry Gallery (Portrait)
300x375
4:5