Assets are every file your HTML requests after the first page: images, stylesheets, JavaScript, fonts, icons, video posters, and downloads. Keep them in the same ZIP as the HTML and reference them with portable paths.

A dependable layout

index.html
assets/
  site.css
  app.js
  fonts/
images/
  hero.webp
  logo.svg

Use the correct path and case

<img src="images/hero.webp" alt="Product preview">
<link rel="stylesheet" href="assets/site.css">
<script src="assets/app.js" defer></script>

Keep file names lowercase and avoid spaces. If HTML refers to images/logo.svg, the ZIP must contain that exact path. Test in DevTools Network after deployment; a 404 points directly to the missing asset.

Optimize without breaking quality

  • Use SVG for simple logos and icons.
  • Use WebP or AVIF for photographs when browser support is acceptable.
  • Set image width and height to reduce layout shifts.
  • Use loading="lazy" for below-the-fold images, not the main hero image.
  • Rename changed CSS/JS assets when publishing updates to reduce stale-cache confusion.

Do not hotlink assets from your local machine or rely on an untrusted third-party URL for an essential image. Put the file in the published folder whenever you need it to be reliable.