如何在style标签及背景图场景下提供WebP、JP2等图片格式？

Great question! When it comes to serving optimized image formats like WebP or JP2 for background images (since the <picture> element only works for inline <img> tags), you've got a solid set of options to keep that SEO and performance boost going. Let's walk through the most reliable approaches:

This is the cleanest frontend-only method if you're targeting modern browsers. It works just like how <picture> handles source sets, but for background images. You define multiple format options, and the browser picks the first one it supports, falling back to your original JPG if needed.

Here's how to write it:

.myclass {
  /* Fallback for browsers that don't support image-set */
  background-image: url('img/image.jpg');
  
  /* Modern browsers will pick the best supported format */
  background-image: image-set(
    'img/image.webp' type('image/webp'),
    'img/image.jp2' type('image/jp2'),
    'img/image.jpg' type('image/jpeg')
  );
}

Most modern browsers (Chrome, Firefox, Safari 14.1+) support image-set, so this is a great default if your audience isn't stuck on ancient browser versions.

If you want a hands-off frontend approach that works for all browsers, let your server handle the format selection. The idea is: when a browser requests the JPG URL, your server checks the Accept header to see if the browser supports WebP or JP2, then serves the corresponding optimized file instead of the original JPG.

For example, here's how you'd set this up in Nginx:

location ~* \.(jpg|jpeg)$ {
  # Serve WebP if the browser accepts it
  if ($http_accept ~* "webp") {
    rewrite ^(.*)\.(jpg|jpeg)$ $1.webp break;
  }
  # Serve JP2 if WebP isn't supported but JP2 is
  if ($http_accept ~* "jp2") {
    rewrite ^(.*)\.(jpg|jpeg)$ $1.jp2 break;
  }
  # Fallback to original JPG if no optimized format is supported
  try_files $uri =404;
}

This method is perfect for SEO because the URL stays the same (no JS-dependent changes), and search engines will see the optimized format if their crawlers support it. You can do similar configurations for Apache or other web servers too.

If you need to support older browsers that don't recognize image-set, you can use JavaScript to detect format support and update the background image dynamically.

First, a helper function to check if the browser supports a given format:

function supportsImageFormat(format) {
  return new Promise((resolve) => {
    const testImg = new Image();
    testImg.onload = () => resolve(testImg.width > 0);
    testImg.onerror = () => resolve(false);
    // Use a tiny base64 test image for the format
    testImg.src = `data:image/${format};base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`;
  });
}

Then, apply the best format to your background element:

async function setOptimizedBackground() {
  const bgElement = document.querySelector('.myclass');
  if (!bgElement) return;

  if (await supportsImageFormat('webp')) {
    bgElement.style.backgroundImage = 'url("img/image.webp")';
  } else if (await supportsImageFormat('jp2')) {
    bgElement.style.backgroundImage = 'url("img/image.jp2")';
  } else {
    bgElement.style.backgroundImage = 'url("img/image.jpg")';
  }
}

// Run the function when the page loads
window.addEventListener('load', setOptimizedBackground);

Pair this with the CSS fallback from the first method, and you'll cover almost every browser out there.

Quick Notes to Keep in Mind #

• Always include a JPG/PNG fallback for browsers that don't support WebP/JP2.
• Test across target browsers to ensure your chosen method works as expected.
• Server-side negotiation is usually the top pick for SEO since it's invisible to users and crawlers alike.

内容的提问来源于stack exchange，提问作者Joël A