Business owners
How to Handle Images on Your Website (2026 Best Practices)
Rodney Hall, COO— AI-assisted and reviewed prior to publication.
Handle images properly by converting to WebP format for smaller file sizes, sizing them at twice the display width (typically 1200-1500 pixels) for sharp rendering on high-resolution screens, enabling lazy loading so images below the fold load only when needed, and always setting explicit width and height attributes to prevent layout shift as the page loads.
What format should you be using?
WebP delivers files 25-35% smaller than JPEG at equivalent quality (pixltools.com), and lossless WebP images are generally 26% smaller than PNG files (wedevs.com). That makes it the best all-purpose format for website images in 2026, according to multiple performance experts.
If you upload a JPEG or PNG to a site builder like Squarespace or WordPress, the platform often converts it to WebP automatically. Neither Squarespace nor Wix currently supports direct AVIF file uploads. Both platforms convert uploaded images through their own optimization pipelines, typically serving WebP to supporting browsers (avif.expert).
Still, upload the right format from the start. JPEG is the best option for larger photos like banners, producing the highest quality image with the lowest file size (bealignedwebdesign.com). Use PNG for logos, screenshots, or graphics that need transparency or pixel-perfect clarity. Avoid GIF entirely for anything other than animation, and use compressed video formats instead where motion is needed.
How large should your images actually be?
For a full-width image, 1,920 pixels wide. For an image inside content, twice its display width, so it stays sharp on high-density screens. Most content images land around 1200 pixels on the longest edge.
File size matters as much as pixel dimensions. To keep your site running smoothly, aim to keep most images under 200KB. Background and banner images should ideally be under 200KB, though you should aim for the file size to stay under 500 KB for standard web use, going higher only if quality is critical like for hero banners, but even then, stay below 300 KB when possible.
Before uploading, compress with a tool like TinyPNG or Squoosh. Export JPGs at quality around 60-70% (go up to 80-90% for skies and smooth gradients). Then let your site builder handle responsive versions for different screen sizes.
Should you be lazy loading images?
Yes, for everything below the fold. Lazy loading means delaying loading images on your website until you get close to the image. The image at the bottom of the page loads just before you get to it instead of loading with the entire page. Since only a few images are loading, you save on bandwidth, and your website performs better.
In WordPress, this happens automatically. By default, WordPress automatically adds the loading="lazy" attribute to images inserted through the block editor. This automatic feature improves performance without requiring additional configuration. On Squarespace, lazy loading is implemented automatically for images below the fold.
Don't turn on lazy loading across the whole site and call it done. It's smart to build that rule into the template itself so hero images stay out of lazy loading. Never lazy-load the first image a visitor sees, or you will slow down the perceived load time.
You can check your site's performance with the free AI-visibility check (/check) to see how load time and other technical factors affect whether AI assistants like ChatGPT and Perplexity name your business in search results.
Why you need to reserve space for every image
The most common source of high CLS is images and media elements without explicit width and height attributes. When a browser renders an image before the file has loaded, it cannot reserve space for it and defaults to zero size. When the image loads, it pushes surrounding content down, causing a layout shift.
This is measured as Cumulative Layout Shift (CLS), a Core Web Vitals metric that Google uses for ranking. High CLS values typically arise from images loading in without reserved space, adverts loading late, or cookie banners inserted dynamically. Target: below 0.1 for "Good", 0.1–0.25 for "Needs improvement", above 0.25 for "Poor".
The browser uses the width and height attributes to compute the intrinsic aspect ratio and reserves a correctly-proportioned box before the image data arrives. The image still scales fluidly with CSS because the inline CSS overrides the rendered size, but the reserved space prevents any shift.
In HTML, this looks like <img src="hero.jpg" width="1600" height="900" alt="Description">. Most site builders let you set this without touching code. In Squarespace's image block settings, the platform calculates it automatically when you upload. In WordPress, the block editor adds dimensions by default, but older themes or manually inserted images may not have them.
Always define width and height on every image, or set a defined aspect ratio. That gives the browser space to reserve before the image loads and helps prevent Cumulative Layout Shift. When dimensions are missing, the image box can collapse, trigger CLS, and interfere with lazy-loading behavior.
What to do right now in your site builder
Open your site's image settings (usually under Design or Performance) and confirm lazy loading is enabled for images below the first screen. In Squarespace, this is automatic. In Wix, enable Wix Turbo under Site Settings. In WordPress, install a performance plugin like WP Rocket or check that the block editor is adding loading="lazy" to your markup.
Then audit one high-traffic page. Check the dimensions of each image against the space it actually occupies on screen. If you uploaded a 4000-pixel photo that displays at 800 pixels wide, resize the original to 1600 pixels (double the display width) and re-upload. Check ActiScore's pricing (/pricing) if you need to monitor how these changes affect your site's performance score over time across security, speed, and AI visibility on one dashboard.
Before publishing, open your browser's developer tools (right-click, Inspect) and check the Network tab while the page loads. Look for images over 500 KB. If you find any, compress them with TinyPNG or export them again at 70% quality. This one check catches the majority of image problems small businesses unknowingly ship to production.
For a complete operational view of your site's technical health, including how your image handling compares to competitors being recommended by AI assistants, the guide (/guide) walks through every category ActiScore measures, from DNS records to page speed.
Common questions
What is the best image format for websites in 2026?
WebP is the best all-purpose format for website images in 2026, delivering files 25-35% smaller than JPEG at equivalent quality and lossless WebP images that are generally 26% smaller than PNG files. Most modern site builders like Squarespace and WordPress automatically convert uploaded JPEGs and PNGs to WebP through their optimization pipelines. For best results, upload JPEG for larger photos and banners, and PNG for logos, screenshots, or graphics that need transparency or pixel-perfect clarity.
How big should images be on a website?
For full-width images, aim for 1,920 pixels wide, and for content images, use twice their display width to stay sharp on high-density screens, which typically means around 1200 pixels on the longest edge. File size matters as much as pixel dimensions—keep most images under 200KB and background or banner images ideally under 200KB but no more than 500KB for standard use. Compress images with tools like TinyPNG or Squoosh before uploading, exporting JPGs at 60-70% quality or 80-90% for smooth gradients and skies.
Should I use lazy loading for all images on my website?
You should use lazy loading for everything below the fold, but never for the first image a visitor sees, as this will slow down perceived load time. Lazy loading delays image loading until users scroll close to them, saving bandwidth and improving performance. WordPress automatically adds lazy loading to images inserted through the block editor, and Squarespace implements it automatically for images below the fold. The key is building this rule into your template so hero images and above-the-fold content load immediately.
What is Cumulative Layout Shift and why does it matter for images?
Cumulative Layout Shift (CLS) is a Core Web Vitals metric that Google uses for ranking, measuring how much content shifts unexpectedly as a page loads. The most common source of high CLS is images without explicit width and height attributes—when browsers cannot reserve space for images before they load, content gets pushed down when images appear. To prevent this, always define width and height on every image or set a defined aspect ratio. Target a CLS score below 0.1 for good performance, as anything above 0.25 is considered poor.
How do I optimize images in WordPress or Squarespace?
In Squarespace, lazy loading and dimension calculation happen automatically when you upload images through the image block settings. In WordPress, the block editor adds lazy loading and dimensions by default, but you should install a performance plugin like WP Rocket for additional optimization. For both platforms, audit high-traffic pages to check that uploaded images are sized at roughly double their display width, compress any images over 500KB with TinyPNG before uploading, and use your browser's developer tools Network tab to identify oversized files that need compression before publishing.