Why images not loading on your site — and how to fix it

How to fix images that are broken or missing on your public pages

You published the Acme Coffee Roasters homepage with a full-width product hero image. It looked correct in the admin page editor and in the SG-Builder preview. A visitor opens the live URL and sees a broken image icon — a grey box where the photo should be. This guide walks every reason that images can fail to load on public SGEN pages and gives you a clear, ordered path to identifying and resolving the cause.

Work through the four checks below in order. The most common cause — a media library reference that no longer resolves — takes under two minutes to confirm and fix. If you reach check 4 you are dealing with an upload that never completed, which requires a fresh upload from the original file.

What is this for?

This guide is for SGEN admins who are seeing broken images — grey boxes, question-mark icons, or missing visuals — on their public-facing pages, blog posts, or SG-Builder sections. It covers the path between "you uploaded and attached an image" and "a visitor sees it rendered", identifies every point where that path can break, and gives you one concrete action at each point to confirm or rule it out.

The guide applies to images attached through the SGEN Media Library, used in page body content, or placed inside SG-Builder sections. If the image is loading correctly in the admin preview but is broken only on the public page, check 3 is the most likely cause. If the image is broken in both the admin and the public page, check 1 or check 2 applies.

Good use cases

Example 1: Hero image replaced but old broken reference persists. The Acme Coffee Roasters team deleted the original homepage hero image from the Media Library and uploaded a replacement. The page body still referenced the deleted file. On the public site, the hero position showed a broken image icon — the reference pointed to a file that no longer existed. Check 2 identified the cause. Selecting the new image from the Media Library on the page edit screen and saving resolved the broken display within 30 seconds.

Example 2: Blog post image broken after slug rename. A blog post on Acme Coffee Roasters used an image with a filename that included the original post slug in its path. When the post slug was renamed, the image path reference in the post body was not updated. Check 1 showed the image URL in the post body still pointed to the old path. Updating the image reference on the post edit screen and saving restored the image.

Example 3: Incomplete upload showing a grey box. An Acme Coffee Roasters admin uploaded a large image file for the monthly feature banner. The upload appeared to complete — the file appeared in the Media Library list — but the public page showed a grey placeholder. Check 4 revealed the upload had stalled mid-transfer, leaving a partial file record. Deleting the incomplete entry and re-uploading the original file resolved it.

Example 4: SG-Builder image block pointing to deleted file. An SG-Builder image block on the Acme Coffee Roasters Our Story page had its source image deleted from the Media Library without removing the reference first. The block rendered a broken icon on the live page. Check 2 confirmed the file was no longer in the library. The team re-uploaded the original photo, then opened SG-Builder, reselected the image in the block, published the page, and the image reappeared correctly.

Example 5: Image correct in admin, broken in public. An Acme Coffee Roasters page editor saw the product image display correctly in the admin page preview but broken on the public URL. Check 3 identified a file format issue — the image was a WebP file uploaded at a point when the site's delivery configuration did not serve WebP to all browsers. Re-uploading as JPEG resolved the display issue across all browsers.

What NOT to use this for

How this connects to other features

Before you start

Before working through the checks, have the following available:

It also helps to open both the admin and the public page side by side, so you can compare what the admin shows against what the public visitor sees. On some broken-reference cases, the admin preview may show the image correctly while the public page does not — the two views can diverge when a page has been cached.

• Admin access to the page, post, or SG-Builder section where the broken image appears.
• The public URL of the page where the image is broken — you will open it during checks.
• If you know the original filename of the image, have it to hand — it helps when searching the Media Library.

Where to go

The checks in this guide touch several areas of the SGEN admin:

• Media Library — Admin → Media
• Pages — Admin → Pages → Edit (for the page where the image is broken)
• Blog posts — Admin → Blog → Edit (for the post where the image is broken)
• SG-Builder — accessed via Admin → Pages → Edit → SG-Builder for the affected page

Steps — four checks to restore broken images

1. Confirm the image file exists in the Media Library

When an image is uploaded to SGEN, it is stored in the Media Library and given a permanent URL. Page bodies, SG-Builder blocks, and blog post featured images reference that URL. If the file is later deleted from the library, the reference becomes a broken link — the URL the page is pointing to no longer returns a file, and the browser renders a broken image icon.

To confirm the file still exists:

1. Go to Admin → Media.
2. Use the search or filter tools to find the image. Search by filename if you know it, or browse by upload date to find recent files.
3. Check whether the file appears in the list and shows a valid status.

If the file is not in the library — or if it appears with an Incomplete or Error status — the reference is broken. Continue to Check 2 to fix the reference on the page or post.

If the file is in the library and appears healthy, continue to Check 3.

2. Re-attach the correct image from the Media Library

If the file exists in the Media Library (Check 1) but the page is showing a broken image, the reference stored on the page or post may be pointing to a different file — perhaps a deleted version, or a file uploaded under a different name. Updating the reference to point to the correct current file resolves this without needing to re-upload anything.

For a page or blog post body image:

1. Open the edit screen — Admin → Pages → Edit or Admin → Blog → Edit.
2. Locate the image in the body editor. Click the image to select it, then use the Replace image or Edit image option to open the Media Library picker.
3. Select the correct file from the library.
4. Click Save.
5. Reload the public page to confirm the image now loads.

For an SG-Builder image block:

1. Open the page in SG-Builder — Admin → Pages → Edit → SG-Builder.
2. Click the image block that is showing the broken state.
3. In the block settings panel, click the image source field and choose Select from Media Library.
4. Select the correct file.
5. Click Save in the builder, then click Publish.
6. Reload the public page to confirm the fix.

If the correct file was deleted and is no longer in the library, you will need to re-upload it first. Continue to Check 4 for the re-upload steps.

3. Check the image file format and delivery

Some image formats do not render in all browser versions. Specifically, older browsers may not display WebP or AVIF format images. If an image displays correctly in a modern browser but is broken in an older one — or if it loads in the admin preview but not on the public page — the file format is worth checking.

To check the format:

1. Go to Admin → Media.
2. Open the file record for the affected image.
3. Look at the file extension and the format information in the file detail panel.

If the format is WebP or another less-universally-supported type and the image is critical for all visitors, re-upload it as a JPEG or PNG. Both formats load reliably across all modern browsers and older browser versions.

To re-upload in a different format:

1. Export the image from your original design tool or convert it using an image editor.
2. Upload the converted file via Admin → Media → Add New.
3. Update the reference on the page, post, or SG-Builder block to point to the newly uploaded file (see Check 2 above).
4. Save and publish, then reload the public page to confirm.

If the file format is JPEG or PNG and the image is still broken in the public view, continue to Check 4 to look for an incomplete upload.

4. Re-upload the file if the original upload was incomplete

In some cases — particularly with large files or if the browser tab was closed or navigated away from during an upload — a file record appears in the Media Library but the actual file data did not transfer completely. The library shows the filename and a placeholder, but the file has no usable content. Any page referencing it will show a broken image icon.

Signs of an incomplete upload:

• The file appears in the library with no file size or with a file size of 0 KB.
• The file preview in the library shows a grey placeholder rather than a thumbnail.
• The file status column shows Incomplete or Error.

To fix an incomplete upload:

1. Go to Admin → Media.
2. Find the incomplete file record and delete it — select it and use the Delete action. This removes the broken placeholder record from the library.
3. Return to your original image file on your computer. If the file is large (over 5 MB), resize it before uploading — aim for under 2 MB for standard web use, under 500 KB for hero images.
4. Click Add New in the Media Library and upload the file again. Keep the tab open and the upload bar visible until it confirms completion.
5. Once the new file appears with a valid thumbnail and file size, update the page, post, or SG-Builder block reference to point to the new file (see Check 2 above).
6. Save and publish, then reload the public page.

If a large file consistently fails to upload completely, try uploading it in a stable network environment, or convert it to JPEG with compression applied before uploading. SGEN recommends uploading images optimised for web use — high-resolution originals can be kept locally as the source file.

What success looks like

What to do if it does not work

If you have worked through all four checks and the image is still broken on the public page, collect the following before contacting SGEN support:

1. A screenshot of the public page showing the broken image — include the area around the broken element so support can see the layout context.
2. The filename of the image you expected to appear, as shown in the Media Library.
3. A screenshot of the file's detail record in the Media Library showing its status and file size.
4. The page title and public URL where the broken image appears.
5. The steps you have already taken — specifically which checks you ran and what the outcome was.

If you were able to confirm that the file exists in the library and is Active (Check 1) but the image is still broken on the public page after re-attaching the reference (Check 2) and re-uploading (Check 4), that combination points to a delivery-layer issue that support will need to investigate on the server side.

Quick reference — the four checks

Preventing broken images in future

Most broken-image incidents follow one of three patterns, and each is preventable with a small change in workflow:

Delete files only after removing all references. Before deleting any file from the Media Library, use the Used on field in the file detail panel to find every page, post, or SG-Builder block that references it. Update those references first, then delete the file. Deleting first and cleaning up second is the most common cause of broken images across SGEN sites.

Keep the upload tab open until the file confirms complete. Large uploads can stall if the browser tab is navigated away or closed mid-transfer. Wait for the progress bar to reach 100% and the thumbnail to appear before leaving the Media Library screen.

Optimise images before uploading. Smaller files transfer more reliably and load faster for visitors. Resize hero images to no more than 1920 × 800 pixels and compress to under 500 KB before uploading. Keep the original high-resolution file on your local machine as your source.