Export to WebP or AVIF, resize to the largest dimension the layout actually displays, add srcset so phones get phone-sized files, lazy-load everything below the fold, and give every img tag width and height attributes so the page does not jump while loading. PageSpeed Insights will tell you which images to fix first.
Why Dispensary Sites Get So Heavy
Strain photography is the product. Macro flower shots, storefront photos, staff pictures, brand banners — a typical dispensary homepage carries more image weight than most e-commerce sites twice its size. And the files usually arrive straight off a phone camera at full resolution, get dropped into the CMS untouched, and quietly cost every visitor megabytes. Slow pages lose shoppers on their phones in a parking lot, which is precisely where your customers are.
Start With Format
Two modern formats do the work: WebP and AVIF. Both deliver visibly identical images at a fraction of JPEG's size; AVIF typically compresses tighter, WebP encodes faster and has universal browser support. The pragmatic setup is a picture element offering AVIF first with a WebP fallback, or simply WebP everywhere if you want one format and no ceremony. PNG stays only for images that need transparency, and even those usually convert.
One Hero Image, Start to Finish
Concrete numbers from a recent fix. A dispensary homepage hero arrived as a 4.2MB JPEG, 6000 pixels wide, shot on an iPhone. The layout never displays it wider than 1600 pixels. Resized to 1600 and exported as WebP at 80 percent quality in Squoosh, it came out at 174KB — about 4 percent of the original, indistinguishable on screen. That single file was most of the page's weight. Every heavy site has three or four of these.
Serve Sizes With srcset
One file cannot fit a 360-pixel phone and a 2560-pixel monitor. The srcset attribute lists several widths of the same image (say 480, 800, 1200, and 1600) and the browser picks the smallest one that fills the slot. Most CMS platforms generate these variants on upload and write the markup for you; the audit step is checking a product page's HTML to confirm the srcset is actually there and not pointing every device at the original.
Lazy-Load Below the Fold Only
Adding loading="lazy" to an img tag tells the browser to skip downloading it until the user scrolls near. For a long menu page with 60 product thumbnails, that is a huge saving on first load. The one rule: never lazy-load the hero or anything visible without scrolling, because delaying your largest visible image is the fastest way to wreck LCP, the loading metric in Core Web Vitals.
Reserve the Space, Then Measure
Every img tag gets width and height attributes. Without them the browser cannot reserve space, content jumps as images pop in, and the page racks up layout shift — the CLS metric, and the reason people tap the wrong button on your menu. With dimensions declared, CSS still handles responsive scaling; the attributes just fix the aspect ratio in advance. Then run PageSpeed Insights on the homepage, a menu page, and one product page. Its opportunities section names the exact files worth fixing, largest first. Work the list, re-test, done.
Key takeaways
- WebP or AVIF for everything; a phone-camera JPEG often shrinks 90-plus percent with no visible loss.
- Resize to the largest displayed dimension and let srcset serve smaller devices smaller files.
- Lazy-load below-the-fold images only, never the hero.
- Width and height attributes on every image prevent layout shift.
- Let PageSpeed Insights pick your fix list; a few oversized files usually carry most of the weight.
Frequently asked questions
WebP or AVIF?
AVIF usually compresses smaller at the same visual quality; WebP encodes faster and has been supported everywhere for years. Serving AVIF with a WebP fallback via the picture element is the thorough answer. WebP alone is a fine answer too.
Can lazy loading hurt SEO?
Only when it is applied to the wrong images. Never lazy-load the hero or anything else visible on first paint — delaying the largest visible image directly worsens LCP. Below the fold, lazy loading is pure win.
What tool should I use without a build pipeline?
Squoosh, Google's free in-browser compressor. Drag an image in, pick WebP or AVIF, watch the before-and-after preview, and download. For batches, most CMS platforms have plugins that convert on upload.
How small should a hero image be?
As small as it can be while still looking right on a large screen. In practice a 1600-pixel-wide WebP hero tends to land in the low hundreds of kilobytes, down from several megabytes as shot.
Do filenames and alt text still matter?
Yes. blue-dream-flower-eighth.webp tells search engines more than IMG_4471.jpg, and alt text describes the image for screen readers and image search. Neither affects load speed; both are free relevance.
Want this done for your brand?
We build cannabis & CBD search visibility with full transparency, for dispensaries, brands, and MSOs.
Get a free cannabis SEO audit ›