Where can I find the code that controls the images on this Webflow site?

Published on
September 22, 2023

To find the code that controls the images on a Webflow site, you need to access the site's custom code section. Here's a step-by-step guide on how to do this:

  1. Log in to your Webflow account and select the desired project.
  2. In the Designer, click on the "Project Settings" button, which looks like a gear icon, located in the left sidebar.
  3. In the Project Settings panel, navigate to the "Custom Code" tab.
  4. Once you're on the "Custom Code" tab, scroll down to find the following sections: "Head Code," "Body Code," and "Footer Code."
  5. Depending on where you expect to find the code for images, you may need to inspect all three sections.
  6. To inspect the code for images within the "Head Code" section, simply scroll through the code area and look for <img> tags or any lines that reference images.
  7. If you don't find the image code within the "Head Code" section, move on to the "Body Code" section and repeat the process.
  8. Similarly, if you couldn't locate the code in the previous two sections, check the "Footer Code" section as the code could potentially be placed there.
  9. Once you've found the relevant code for the images, you can either modify it directly or use it as a reference for further customization.

It is important to note that Webflow generates responsive code for images and optimizes them based on the settings you have chosen for each image element. So even if you find the code, make sure to keep this in mind to ensure your changes don't negatively affect the responsiveness and optimization of the images on your site.

Additional questions users may search for:

  1. How do I customize the code for images in Webflow?
  2. Can I change the source code of images in Webflow?
  3. Where can I add alt text to images in Webflow?