An image that is too heavy slows the page down; too small, and it turns blurry on a Retina screen. The right size also depends on where the image is shown: inside a page, in a browser tab, in a LinkedIn preview or on a Google listing.
At Digidop, we check these sizes on every website we ship. This guide lists the values that apply in 2026, each linked to the platform's official documentation, and shows where to set them in Webflow.
Originally published in 2022, fully updated on October 6, 2026.
The sizes to remember in 2026
| Image | Size | Format | Limit | Source |
|---|---|---|---|---|
| Full-width image (hero, banner) | 1,920 px wide | WebP or AVIF | as light as possible | Digidop practice |
| Image inside an article | 2 × the display width (often 1,400 to 1,600 px) | WebP or AVIF | as light as possible | Digidop practice |
| Favicon | square, larger than 48 × 48 px | PNG, ICO, SVG | — | Google Search Central |
| Webclip (home screen icon) | 180 × 180 px (Apple), 256 × 256 px (Webflow) | PNG | — | Apple, Webflow |
| Open Graph (share preview) | 1,200 × 630 px, 1.91:1 ratio | JPG or PNG | 8 MB | Meta for Developers |
| YouTube banner | 2,560 × 1,440 px (minimum 2,048 × 1,152) | JPG, PNG | 6 MB | YouTube Help |
| YouTube thumbnail | 3,840 × 2,160 px recommended, 16:9, at least 640 px wide | JPG, PNG | 2 MB (mobile), 50 MB (desktop) | YouTube Help |
| Google Business Profile photo | 720 × 720 px (minimum 250 × 250) | JPG, PNG | 10 KB to 5 MB | Google Business Profile Help |
Images on your website
Full-width images: 1,920 px
An image that spans the whole screen (hero, section banner) should be exported 1,920 px wide. That's the width we use on our projects: it covers most desktop screens without adding needless weight. Beyond that, the extra sharpness is rarely visible, while the extra weight always is.
Images inside content: twice the display size
High-density screens (Retina on Mac and iPhone, most Android phones) render two physical pixels where the layout plans for one. An image displayed 700 px wide should therefore be supplied at 1,400 px to stay sharp.
You don't need one version per screen: the srcset and sizes attributes let the browser pick the right one. Webflow generates them for images placed in your pages, with one important exception for AVIF (see below).
Logos and icons: SVG
Logos, icons and simple illustrations belong in SVG: the file is vector-based, so it stays sharp at any size, and it's often lighter than a PNG. SVG is not meant for photos.
Site icons: favicon and webclip
Favicon
The favicon appears in the browser tab, in bookmarks and next to your site in Google results. Google requires a square of at least 8 × 8 px and recommends larger than 48 × 48 px so it looks sharp everywhere (Google Search Central).
Practical tip: start from a sharp square of at least 256 px, simplified (a letter or the logo symbol, not the full logo), and let your tool generate the smaller sizes.
Webclip
The webclip is the icon shown when a visitor adds your site to their iPhone or iPad home screen. Apple uses a 180 × 180 px icon on iPhone (Apple). Webflow asks for a 256 × 256 px webclip. Prefer a solid background over transparency.
YouTube and Google Business Profile
Google Business Profile
What used to be "Google My Business" is now Google Business Profile. Its photos (logo included) follow the same rules: JPG or PNG, between 10 KB and 5 MB, 720 × 720 px recommended and 250 × 250 px minimum (Google Business Profile Help). Google doesn't publish separate sizes for the cover photo.
Which image format should you use?
| Format | Use it for | Support |
|---|---|---|
| AVIF | photos, detailed visuals: the lightest at equal quality | 96% of browsers (Can I use) |
| WebP | photos and visuals, the default choice | 97% of browsers (Can I use) |
| SVG | logos, icons, simple illustrations | universal |
| PNG | images with transparency when SVG isn't an option | universal |
| JPEG | replace with WebP or AVIF in your pages, keep for the Open Graph image | universal |
WebP and AVIF are now supported by nearly every browser. There's no longer a reason to serve heavy JPEGs or PNGs inside a website's pages.
Images and Core Web Vitals
Images mostly affect two of Google's three Core Web Vitals:
- LCP (Largest Contentful Paint) measures how long the largest visible element takes to render, very often the page's main image. The target is 2.5 seconds or less (web.dev). A main image that is too heavy, or lazy-loaded, directly hurts this score.
- CLS (Cumulative Layout Shift) measures layout shifts during loading: an image without a declared width and height pushes the text down as it appears.
The third metric, INP (Interaction to Next Paint), measures responsiveness to clicks. It replaced FID on March 12, 2024 (web.dev) and depends mostly on JavaScript, not much on images.
Google crawls and indexes websites in their mobile version, a switch it announced as complete in October 2023 (Google Search Central). Mobile performance is what counts.
To measure and fix it: how to improve your website loading speed.
In Webflow, step by step
- Favicon and webclip: Site settings → General → Icons. Upload a square image and Webflow generates the sizes it needs.
- Open Graph: in each static page's Page settings, under Open Graph settings. For the blog and other CMS collections, bind the Open Graph image to the collection's image field so every article gets its own preview.
- WebP or AVIF conversion: the Assets panel offers bulk conversion. Note that the original file is replaced by the converted one, so download your originals first if you want to keep them. And Webflow doesn't generate responsive variants (
srcset) for AVIF images: convert the images that need them to WebP, and keep AVIF for images shown at a fixed size. We cover the process in Webflow now accepts the WebP format. - Responsive images: Webflow generates
srcsetandsizesfor JPG, PNG and WebP images placed in your pages. Upload a source that is large enough (twice the display size) and let Webflow create the variants. For CMS images, whose display size Webflow can't know in advance, prepare an image at the right width yourself. - Loading: in the image element settings, Lazy mode defers images below the fold. Set the page's main image to Eager: lazy-loading it delays LCP.
Our take
We often see teams spend time on the favicon and webclip while leaving a 2 or 3 MB hero image at the top of the homepage. It should be the other way around: the image that matters most is the first one to appear, on mobile. If you only do one thing after reading this, check its weight, its format and its loading mode.
The rest (Open Graph, icons, YouTube) is set once at launch and rarely changes. It's also something we check systematically before going live with a Webflow website built by Digidop.
FAQ
What is the best image size for a website?
For a full-width image, 1,920 px wide. For an image inside content, twice its display width, so it stays sharp on high-density screens. In both cases, use WebP or AVIF and keep the file as light as possible.
What size should an Open Graph image be?
1,200 × 630 px, at a 1.91:1 ratio, 8 MB max according to Meta. This format displays correctly on LinkedIn, Facebook, Slack and most messaging apps.
What size should a favicon be?
A square larger than 48 × 48 px, according to Google. In Webflow, upload a sharp square (32 × 32 px minimum, larger is better) in Site settings: the other sizes are generated automatically.
WebP or AVIF?
AVIF usually compresses better than WebP at equal quality, and both are supported by more than 96% of browsers. WebP is the safest default, and in Webflow it's the only one of the two that gets responsive variants. AVIF is worth it for large photos shown at a fixed size.
Should I still use JPEG and PNG?
Inside your pages, not really: WebP and AVIF do better. For the Open Graph image, stick to JPG or PNG, the formats Meta and LinkedIn accept everywhere. PNG is still useful for an image with transparency when SVG isn't an option.
