This is for a small business owner building or refreshing a site in a website builder, not a developer hand-tuning an image pipeline. The decision is not “make every image smaller”; it is which images must stay sharp enough to sell the work and which can be resized, cropped, deferred, or converted without weakening trust.
As of 2026-04-23, builder image-size recommendations can change; verify the specific slot guidance in your builder before launch.
Answer first: optimize crop and dimensions before compression; protect images that prove the business, such as hero photos, products, menu items, headshots, finished projects, and readable screenshots; do not lazy-load the first meaningful image or likely Largest Contentful Paint image; use WebP or AVIF when your builder supports them and the result still looks sharp.
Image optimization should make the site faster without making the business look cheaper. PageSpeed Insights reports on mobile and desktop performance using Lighthouse lab data and Chrome User Experience Report field data when available.[1] Google’s Web Vitals guidance marks a page as good when Largest Contentful Paint is 2.5 seconds or less, Interaction to Next Paint is 200 milliseconds or less, and Cumulative Layout Shift is 0.1 or less at the 75th percentile of page loads.[2] Those numbers matter, but the visual judgment still happens inside the actual page.
That matters because images often drive Largest Contentful Paint on small business sites. A hero photo for a contractor, a menu photo for a restaurant, a product image for a Shopify store, and a portfolio screenshot for a designer all carry different business risk. Compressing all of them the same way is how faces get soft, dishes lose texture, product grids jump around, and screenshots become hard to read.
Start With The Right Image For The Job
If you are launching through Website Builder, use the AI-built draft as a placement map before you upload final images: open the home page, list every hero, card, product/service section, testimonial, logo, and background, then decide the crop and quality target for each slot. Do this before upgrading a plan, buying a plugin, or replacing a theme; many “slow site” problems are oversized originals placed into small areas.
This is an image-optimization guide across major website builders, so the useful question is not which platform has the most documentation. It is which documented recommendation changes your next upload. Shopify’s product media docs are useful when product detail and zoom matter.[3] Squarespace’s image guidance is useful when a full-width site photo needs to stay crisp.[4] Wix’s service-image guidance is useful when a booking cover or service grid has a fixed slot.[5] WordPress’s Image block is useful when you need to choose size, crop, dimensions, caption, and alt text inside the editor.[11]
Use the builder’s own help page when a slot has a documented recommendation. Shopify says product and collection images can be up to 5000 x 5000 px, or 25 megapixels, and must be under 20 MB; it also says 2048 x 2048 px usually displays best for square product images.[3] Squarespace says 2500 pixels wide is ideal for most images, and that images under 1500 pixels wide may appear blurry.[4] Wix Bookings lists 1920 x 500 px for a cover image and 600 x 600 px for grid service images.[5]
| Image placement | Good source choice | Decision rule before compression |
|---|---|---|
| Homepage hero for a local service business | Use a wide crop with the subject away from the extreme edges; general builder guidance often points to a wide source image, while some booking layouts document specific cover sizes. | Check desktop and mobile. If the face, truck, storefront, or finished project gets cut off, fix the crop before changing file format. |
| Shopify product or restaurant menu item | Use consistent 1:1 or 4:5 source crops; for Shopify, 2048 x 2048 px is a practical starting point for square product images. | Make all featured product or menu images the same ratio before upload so the grid does not feel uneven or cheap. |
| Portfolio gallery card | Export a clean version for the card and keep the original high-resolution version separately. | If the card shows only a thumbnail, do not serve a full camera original into that card. |
| Software, booking, or design screenshot | Use a sharp PNG or modern format export and avoid heavy JPEG compression on text. | If the screenshot text explains the service, keep real HTML text nearby instead of trapping the explanation inside the image. |
| Logo or simple icon | Use a vector file such as SVG when your builder and theme support it. | Do not replace a crisp logo with a blurry raster copy just to reduce bytes. |
The smallest acceptable file is the one that still looks good in its real placement. For a first website, that usually means exporting one careful version for the hero, one consistent ratio for cards or products, one readable format for screenshots, and one separate social-sharing image if the builder asks for it. A single “quality 50” export setting across the whole site is too blunt.
Protect Cropping And Focal Points
Many image problems come from automatic cropping, not compression. Wix’s store image docs describe crop behavior as cutting images so they appear the same size, while fit behavior shows the whole image.[6] That choice changes what a visitor sees. For a florist, the bouquet edge matters. For a roofer, the finished roofline matters. For a restaurant, the dish texture and plating matter more than a decorative background.
Use these checks before publishing a page:
- For product grids, make the main images the same aspect ratio before upload; otherwise the collection can feel uneven even when every individual photo is sharp.
- For restaurant and service photos, keep prices, hours, phone numbers, and legal disclaimers out of the image itself; put that information in real page text so cropping, compression, and screen readers do not hide it.
- For headshots and team photos, keep eyes and faces away from the far left, far right, and bottom edge because mobile crops often remove edge detail first.
- For screenshots, zoom the browser or app before capture so labels stay readable after resizing; if the label is still hard to read on a phone, replace it with text next to the image.
- For meaningful images, write alt text that explains the image’s purpose. Google Search Central says Google uses alt text along with page content and computer vision to understand image subject matter.[7]
A concrete homepage hero workflow looks like this:
- Open the page at desktop width and phone width before replacing the placeholder image.
- Write down the slot shape: for example, a wide desktop hero and a taller mobile crop need different safe areas.
- Choose the focal point: face, product, storefront sign, finished project, plated dish, or artwork.
- Export a wide version for desktop and a mobile-safe version if the builder allows separate mobile images; if it does not, use one crop where the focal point sits near the center third.
- Run the published URL through PageSpeed Insights and inspect the actual image called out by the Largest Contentful Paint and image-size diagnostics.
Here is a simple before-and-after example without pretending every site will get the same score: before, a 4032 x 3024 phone photo is uploaded straight into a hero area where the visible subject is only the contractor standing beside the finished patio; after, the hero uses a 1600 x 900 crop centered on the contractor and patio, while the original stays archived for future print or social use. The visual story is the same, but the page is no longer asking the browser to download pixels that never appear on screen.
Use Modern Performance Practices
Compression, responsive image sizes, lazy loading, caching, and modern formats all help, but the order matters. Start with dimensions and crop, then choose format, then decide loading behavior. If the hero image is the likely Largest Contentful Paint element, treat it as a critical page asset, not a below-the-fold gallery image.
Browser-level lazy loading guidance says not to lazy-load images that are likely to be in the first viewport, especially LCP images, and to use lazy loading for images outside the initial viewport.[8] For a non-technical owner, the rule is simple: the first meaningful image should load right away; gallery images, extra portfolio rows, footer badges, and lower-page blog images can wait.
Chrome’s Lighthouse documentation on properly sized images says Lighthouse compares the rendered image size with the actual image size and flags images when the rendered size is at least 4 KiB smaller than the actual size.[9] That is a useful clue, not a command to destroy quality. If the flagged image is a tiny icon served as a large PNG, fix it aggressively. If the flagged image is a product photo that drives sales, resize it to the display slot and keep enough quality for detail.
Modern formats are worth using when they reduce weight without changing the buying signal. Chrome’s Lighthouse documentation points to AVIF and WebP as formats with better compression and quality characteristics than older JPEG and PNG in many cases.[10] That does not mean every image gets the same treatment. A background texture can be compressed hard; a chef’s signature dish, a handmade product closeup, or a consultant’s headshot gets a visual check after conversion.
Responsive images matter because one visitor may be on a 390 px-wide phone and another on a large desktop display. Google Search Central recommends using srcset or the picture element for responsive images and also keeping a fallback src URL.[7] WordPress handles many responsive image sizes when images are uploaded through the Media Library and inserted from the editor, but the WordPress Image block still lets you choose image size, crop, dimensions, caption, and alt text.[11] Check those settings instead of always choosing “Full Size.”
Use this launch checklist for each important page:
- Hero image: not lazy-loaded, cropped for desktop and mobile, and sharp at the actual display size.
- Product or service cards: same ratio across the row, no accidental face or product cutoffs.
- Below-the-fold galleries: lazy-loaded when the builder supports it, with stable width and height so the layout does not jump.
- Screenshots: readable on a phone without pinching, with explanatory text outside the image.
- Alt text: useful for meaningful images and empty or skipped for purely decorative images when the builder supports decorative handling.
Keep Visual Trust Intact
Visual trust is part of performance for a small business site. A page can load quickly and still fail if the product image is blurry, the team photo is stretched, the screenshot text is fuzzy, or the stock photo is so dark that the service is unclear. Visitors do not separate “performance” from “can I trust this business?” They experience one page.
Use a business-risk rule: protect images that help a buyer believe the claim, and save bytes on images that only decorate the page. Keep more quality for a restaurant’s signature dish, a contractor’s before-and-after photo, a handmade product, a consultant’s headshot, a venue interior, or a designer’s portfolio piece. Compress more aggressively on background textures, decorative dividers, repeated logos, and lower-page gallery thumbnails.
Do not judge the final image inside the media library only. Publish or preview the page, then inspect it on a phone, a laptop, and a slow connection if your browser tools make that easy. Look for four failures: visible blur, warped proportions, cropped meaning, and layout movement while images load. If reducing the file further changes a face, product detail, menu item, screenshot label, or finished-project proof at the actual display size, keep the sharper image and remove bytes somewhere else.
FAQ
Should I use WebP or AVIF for every image?
Use WebP or AVIF when your builder, theme, or export tool supports it and the converted version still looks clean in context. Do not convert a logo, small icon, or text-heavy screenshot in a way that makes edges fuzzy. For photos, modern formats are usually worth testing because they often reduce file size without the obvious JPEG softness.
What image should not be lazy-loaded?
Do not lazy-load the first meaningful image a visitor sees, especially the image that is likely to become the Largest Contentful Paint element. For many small business sites, that is the homepage hero, a featured product image, or the first portfolio proof image.
How large should my product photos be?
If you are using Shopify, 2048 x 2048 px is a practical starting point for square product photos, with Shopify’s own limits still applying. If you are not using Shopify, follow your builder’s help page and match the crop to the actual grid or product-detail layout. Consistent ratios usually matter more than uploading the biggest file you have.
Does alt text help SEO?
Yes, when it is accurate and useful. For a local service page, “licensed electrician replacing an outdoor panel in Austin” is more useful than “image” or a stuffed phrase that reads like a search keyword list. Write what the image contributes to the page.
Sources
- Google PageSpeed Insights overview: https://developers.google.com/speed/docs/insights/v5/about
- Google Web Vitals guidance: https://web.dev/articles/vitals
- Shopify product media requirements: https://help.shopify.com/en/manual/products/product-media/product-media-types
- Squarespace image formatting guidance: https://support.squarespace.com/hc/en-us/articles/206542517-Formatting-images-for-display-on-the-web
- Wix Bookings service image guidelines: https://support.wix.com/en/article/wix-bookings-guidelines-for-uploading-service-images
- Wix Stores crop and fit behavior: https://support.wix.com/en/article/wix-stores-setting-how-store-images-are-displayed/
- Google Search Central image SEO and responsive image guidance: https://developers.google.com/search/docs/advanced/guidelines/google-images
- web.dev browser-level lazy loading guidance: https://web.dev/articles/browser-level-image-lazy-loading
- Chrome Lighthouse properly sized images documentation: https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/
- Chrome Lighthouse modern image formats documentation: https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images/
- WordPress Image block documentation: https://wordpress.org/documentation/article/image-block/