Optimizing images using parcel 2

Question

I want to optimize my images dynamically using the Parcel 2 built in image optimizer. The image url is coming from the data.js and then I pass it to render it.

When I use this code, it's working:

_generateMarkupProjects(project) {
  const imageUrl = new URL('../../images/projectOne.webp?width=640', import.meta.url);
  return `
    <div class="projects__box">
      <figure class="projects__img-box">
        <picture>
          <img
            src="${imageUrl}"
            sizes="(max-width: 800px) 45vw"
            alt="${project.name} Photo"
            class="projects__image"
          />
        </picture>
        <figcaption class="projects__caption">
          <button class="projects__maximize-btn" data-id="${project.id}">
            <svg class="projects__icon">
              <use
                xlink:href="${icon}#icon-maximize"
              ></use>
            </svg>
          </button>
          <div class="projects__caption-content">
            <h3 class="projects__caption-title u-mb-xxs">
              ${project.name}
            </h3>
            <p class="projects__caption-description u-mb-xxs">
              ${project.description}
            </p>
            <div class="projects__language">${project.languages.join(
              ', '
            )}</div>
          </div>
        </figcaption>
      </figure>
    </div>
  `;
}

But when I do this: parcel does not optimizing the image.

const imageUrl = new URL(`${project.image}?width=640`, import.meta.url);

This is how I import the project image:

//data.js
import projectOne from 'url:../images/projectOne.webp';

Answer 1

I think this is expected behavior, unfortunately. Parcel needs to be able to determine how to transform the image (dimensions, quality, etc.) statically at build time. This can only be done if it finds a reference to the image location, along with query parameters specifying the desired transformations in one place (for example, const imageUrl = new URL("./image.webp?width=640", import.meta.url); or import imageUrl from "url:./image.webp?width=640"

It looks like your intention is to create a function that accepts (un-transformed) image urls as a parameter and then dynamically applies a width transformation. In order to do this correctly at build time, Parcel would need to have a complete understanding of the flow of your code at runtime - eg which untransformed image urls will be fed to the function, and therefore need to be transformed? It might be knowable in a simple case, but it would be next-to-impossible to solve in a general way.

So I think you need to refactor your code so that you apply the width transform when you reference the image in the first place (eg in data.js ). If you need multiple image sizes you could make the project object have multiple properties, one for each size, eg:

const project1 = {
  smallImageUrl: new URL(`../images/projectOne.webp?width=240`, import.meta.url);
  bigImageUrl: new URL(`../images/projectOne.webp?width=640`, import.meta.url);
  // etc.
}