Retina images (2K, 4K, 8K UHD screens)

[universewrld]

Today, screens with high pixel density (Retina, 2K, 4K, 8K UHD) are not uncommon.
Many modern smartphones, tablets, laptops and TVs have screens with high pixel density.

Will it be possible to add a website “Logo” and other images for the template (custom JPG, PNG icons, etc.) in different resolutions for screens with high pixel density?

For example:

• Logo of the site - an image in normal resolution, plus “Logo” for Retina displays 2K, 4K and 8K.
• custom menu icon in normal resolution, plus for Retina displays 2K, 4K, 8K

Not all images can be used in SVG format; some images will be loaded in JPEG, PNG, etc.
This option requires fields to load the same image for displays with different resolutions (pixel densities).

---

Responsive images

Designing responsive web pages leads to better user experience, since people can access them across a plethora of device types. Refer to our guide to responsive images to learn about the best practices for handling images on your website.

Web pages use the <picture> element or the srcset attribute of an img element to specify responsive images. However, some browsers and crawlers do not understand these attributes. We recommend that you always specify a fallback URL via the src attribute.

The srcset attribute allows specifying different versions of the same image, specifically for different screen sizes. For example:

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

The <picture> element is a container that is used to group different <source> versions of the same image. It offers a fallback approach so the browser can choose the right image depending on device capabilities, like pixel density and screen size. The picture element also comes in handy for using new image formats with built-in graceful degradation for clients that may not yet support the new formats.

Per section 4.8.1 of the HTML Standard, make sure that you provide an img element as a fallback with a src attribute when using the picture element using the following format:

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>

Responsive Images (Google dev article): https://developers.google.com/search/docs/appearance/google-images?visit_id=638423959705148045-107881438&rd=1&hl=en#responsive-images
web.dev: https://web.dev/articles/responsive-images