How to Replace Images in an HTML Template

To replace an image in an HTML template, locate its source reference, prepare a suitable replacement and update the relevant HTML or CSS. Check responsive variants, dimensions, cropping and alternative text, then preview the result at several widths. Confirm that you have permission to publish the new image.

Replacing the file is only part of the task. A technically valid image can still be too large, poorly cropped or misleading in context. Work through one representative image before replacing an entire gallery.

Locate every reference

Search the project for the current filename. It may appear in an img element, a picture source, a srcset list or a CSS background declaration.

Also check cards, social preview metadata and thumbnails. One photograph can have several exported versions, each used in a different position. Replacing only the main file can leave the old image visible elsewhere.

If the template generates output, locate the original source reference rather than editing only the generated HTML. The HTML template overview explains why source and published files may differ.

Choose a replacement that fits the role

Inspect the visible aspect ratio and subject placement. A wide hero area may crop a portrait photograph severely. A square project card may need a different export from the same original.

Decide what the visitor needs to see. If an image demonstrates a venue’s reception layout, the crop should preserve the space rather than only a decorative detail. A staff photograph should not cut away the face at narrow widths.

Keep text in HTML where practical instead of embedding essential copy in a photograph. That makes the message easier to adapt, translate and read with assistive technology.

Prepare dimensions and file size

Export a version appropriate for its displayed role and supported formats. Avoid using an enormous original when the site only displays a small card.

Compression and resizing serve different purposes. Compression reduces file size; resizing changes pixel dimensions. Review the exported image visually so that important details remain clear without transferring unnecessary data.

If the template already supplies multiple sizes, preserve that arrangement or update it deliberately. A smaller on-screen display does not automatically mean the browser downloads a smaller source file.

Update an ordinary image element

A simple replacement might look like this:

<img
  src="assets/images/consultation-room.webp"
  width="1200"
  height="800"
  alt="Meeting table beside a window in the consultation room"
>

The width and height should describe the source image’s intrinsic proportions. CSS can then control its rendered size. The alternative text should reflect the image’s purpose in context rather than repeat an old filename or add search keywords.

MDN’s img reference explains the element and its attributes. Keep your replacement consistent with the package’s loading and layout conventions.

Preserve responsive image choices

A srcset list can offer several image resources, while sizes helps describe the expected display width. A picture element can select alternative sources for particular conditions.

If these exist, check every listed resource. Replacing one filename while leaving mismatched variants can make desktop and mobile visitors see different photographs accidentally.

MDN’s responsive image guide explains resource selection. For a routine replacement, retain the template’s documented pattern and provide the necessary exports rather than removing the markup to simplify the first edit.

Check CSS backgrounds and crops

A decorative background may use background-size and background-position. An img element may use object-fit and object-position. These rules influence which part of the photograph remains visible.

Adjust the position when the subject is important, then inspect several widths. A crop that works on a laptop can fail when the container becomes tall and narrow.

If the image communicates information, consider whether a CSS background is an appropriate implementation. Visitors who cannot see it still need access to essential details through the page’s text or another suitable alternative.

Verify paths after publishing

Relative paths depend on the document’s location. A reference that works from the homepage may point somewhere else from a nested page.

Check filename spelling and letter case. Some local environments are more forgiving than production hosts. Avoid assuming that Room.webp and room.webp identify the same file everywhere.

Preview through the intended local server and test the built output when the package has a build step. Inspect the browser’s network panel for failed requests if an image disappears.

Complete the content and permissions check

Confirm the photograph is accurate for the business and appropriately licensed. A template’s preview media may have different permissions from its source code.

Remove old captions and replace them with factual descriptions. Avoid presenting stock photography as a completed client project or a real member of staff.

Read responsive HTML templates explained for the wider layout review and inspect the HTML catalogue for examples of different image-led designs. Finish by testing the image in context, not only by confirming that the new file loads.