A quick guide to web-friendly images

Admin Tips and Shortcuts
1

Images can make an intranet page feel more polished and easier to use. The main thing is to use images that look clear without being too large.

For SharePoint and Origami, a web-friendly image should:

  • Look sharp on desktop and mobile
  • Load quickly
  • Crop well in responsive layouts
  • Use the right file type for the image

Focus on pixels, not DPI

For web pages, the pixel size matters more than DPI.

For example, an image that is 1920 × 1080 px is usually a better reference point than whether it is 72 DPI or 300 DPI.

A simple rule:

  • Use larger images for banners and full-width areas
  • Use smaller images for cards, thumbnails, icons, and quick links
  • Avoid uploading very large print-sized images when they are not needed
Recommended image sizes

These are starting points. You can adjust them based on your design, but these sizes usually work well for SharePoint and Origami pages.

Full-width banners and carousels

Best for:

  • Carousel with Expanding Links
  • Banner with Links
  • Banner with News
  • Banner with News Plus
  • Slick Banner
  • Search Banner
  • Banner Half Image

Recommended size:

  • 1920 × 1080 px
  • 16:9 ratio
  • JPG for photos
  • PNG if transparency is needed
  • Target file size: 400 KB to 600 KB

Tips:

  • Keep faces, logos, and important parts near the center of the image
  • Avoid placing text inside the image
  • Use the web part title, description, and buttons for text instead

News thumbnails and content images

Best for:

  • News Center thumbnails
  • Social Corner posts
  • Post Carousel
  • Images inside SharePoint pages

Recommended size:

  • 1200 × 675 px
  • 16:9 ratio
  • JPG or PNG
  • Target file size: 200 KB to 400 KB

Tips:

  • Use the same image ratio across similar cards so the layout stays clean
  • If the image only appears in a smaller card, you can use a smaller image

Square tiles and quick link images

Best for:

  • Quick Links Plus
  • App-style tiles
  • Icons and simple visual links

Recommended size:

  • 600 × 600 px or 650 × 650 px
  • 1:1 square ratio
  • PNG for icons and logos
  • JPG for photo tiles
  • Target file size: 100 KB to 250 KB

Tips:

  • Use simple images or icons
  • Avoid tiny details that may be hard to see on mobile
  • Keep the main part of the image centered
Quick file size guide

Try to keep images around these sizes when possible:

  • Icons and logos: under 100 KB
  • Standard content images: under 300 KB
  • News thumbnails: 200 KB to 400 KB
  • Large banners: 400 KB to 800 KB

Large images can slow down pages, especially on mobile, so it is best to resize and compress images before uploading them.

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.

Before uploading an image

Use this quick checklist:

  • Is the image the right size for where it will be used?
  • Is the file size reasonable?
  • Is the important content centered?
  • Does it still look good on mobile?
  • Is the file type correct?
  • Is text added through the web part instead of inside the image?

If the answer is yes, the image should be ready to use.