Images play a big role in how your intranet feels. Clean, sharp images can make a page look modern and professional. Very large or low quality images can slow things down and hurt the experience.
What “web friendly” means in SharePoint and Origami
When we say an image is web friendly, we want three things:
- It looks clear on common screens.
- It loads quickly, even on slower connections.
- It behaves well in responsive layouts in SharePoint
This is mainly about:
- Pixel dimensions (width and height in pixels)
- File size in KB or MB
- Image format (JPG, PNG, SVG, WebP)
If you get these right, your pages will feel faster and more consistent.
Resolution vs pixel dimensions
There is a lot of confusion around resolution.
On the web:
- Browsers care about pixel dimensions, for example 1600 × 900.
- The dpi value (72 dpi, 300 dpi and so on) is mostly for print.
For SharePoint and Origami, focus on:
- How wide the image needs to be on the page.
- Keeping enough detail so it still looks sharp on high resolution screens.
A simple rule that works well:
- Export images at about 1.5 to 2 times the width you expect on the page.
- Example: if your banner section is around 1200 px wide, use an image that is roughly 1800 to 2400 px wide.
Recommended image sizes
These are practical starting sizes. They are not strict limits. SharePoint and Origami will still scale and crop images as needed, but these sizes tend to give a good balance of clarity and performance.
You can adjust them based on your own design and branding.
3.1 Full width hero banners and carousels
Use these for strong visual headers at the top of a page.
Good for
- Carousel with Expanding Links
- Banner (with Links)
- Banner with News
- Banner with News Plus
- Slick Banner
- Search Banner
- Banner (Half image)
Recommended spec
- Aspect ratio: 16:9
- Suggested export size: around 1920 × 1080 px
- File type: JPG for photos or gradients, PNG if you need transparency
- Target file size: 400 KB to 800 KB
Tips
- Keep faces, logos and key content in the center 50 percent of the image.
- Avoid putting important text inside the image. Use web part text and buttons instead, so it stays readable on mobile.
Standard content images and news thumbnails
These are images that appear inside articles, news posts, tiles and cards.
Good for
- News Center story thumbnails
- Social Corner post tiles
- Post Carousel
- General content images inside SharePoint pages that use Origami web parts
Recommended spec
- Aspect ratio: 16:9 is a safe default
- Suggested export size: around 1200 × 675 px
- File type: JPG or PNG
- Target file size: about 200 KB to 400 KB
Tips
- Use the same aspect ratio across similar news or post layouts so the tiles line up nicely.
- If you know an image will only ever appear in a 2-column or 3-column layout, you can go a bit smaller, for example 1000 px wide.
Square tiles and app-style links
Square tiles work well for “app launchers” and visual link grids.
Good for
- Quick Links Plus (square layouts and “app” style tiles)
- Social Corner when using square images
Recommended spec
- Aspect ratio: 1:1 (square)
- Suggested export size: around 600 × 600 or 650 × 650 px
- File type: PNG for icons and logos, JPG for photo tiles
- Target file size: 100 KB to 250 KB
Tips
- Keep icons simple and bold. Thin or very detailed icons can become hard to
File size and compression
Large images can make pages feel slow, especially on mobile. As a starting point:
- Aim for under 300 KB for most content images.
- Banners can be a bit larger, around 400 to 800 KB, if they are visually complex.
- Small icons and logos should usually be under 100 KB.
Tips when exporting:
- Use “Save for Web” or export presets in your editor.
- Start with quality around 70 to 80 percent for JPG and adjust if needed.
- Crop away empty space instead of scaling a huge canvas.
Origami does not change your original file size, so it is best to optimise before you upload.
Image formats
You can use most common web formats in SharePoint and Origami.
JPG
- Good for photos and gradients.
- Smaller file sizes at good quality.
- No transparency.
PNG
- Good for logos, icons, UI elements and screenshots.
- Supports transparency.
- Larger file sizes than JPG, so use it when you need the transparency or very sharp edges.
SVG
- Vector format that stays sharp at any size.
- Great for logos and simple icons.
- Very small file sizes for flat designs.
WebP
- Modern format with very good compression.
- Often smaller than JPG and PNG at the same quality.
- Use it if your tools and processes support it. Some teams export both WebP and a fallback JPG or PNG.
Responsive behavior in SharePoint and Origami
SharePoint Online is responsive. This means:
- Layouts and Origami web parts adjust based on screen width.
- Images can be cropped slightly on the sides or top and bottom in different section layouts.
To keep your images safe:
- Keep important content in the center of the image.
- Avoid placing key text or faces right at the edges.
- Test your pages in at least three views: desktop, tablet, and phone.
Origami web parts use SharePoint’s section widths, so the same image can appear slightly differently in a one column section compared to a three column section. If a specific banner is critical, you can create one version per layout and reuse them as needed.
Quick checklist before you upload
Use this short list when preparing images:
- Is the pixel width appropriate for the web part or section?
- Is the file size reasonable for the type of image?
- Is the format correct for the content (JPG, PNG, SVG, WebP)?
- Does it look sharp on a high resolution screen?
- Are faces, logos and key content safely inside the central area?
- Does it still look good in desktop, tablet and mobile views?
If you can answer “yes” to these items, your image is ready to use.