Images used on websites have the power to attract visitors and enhance site credibility. However, simply uploading beautiful images is not enough to provide a consistent user experience across various devices. As high-resolution screens such as Retina displays become more widespread, image optimization has become unavoidable.

In this article, we explain HTML markup methods that support both high-resolution displays and standard-resolution displays.

Contents
  1. Introduction
  2. Specific Examples of Image Sizes
  3. Specific Examples of Markup Methods
  4. Advantages
  5. Disadvantages
  6. Optimal Solution and Summary

Introduction

When setting optimal HTML markup and image sizes for Retina displays, it is necessary to provide sharp images for users with high-resolution displays while also achieving optimized page load times for users on standard displays.

Specific Examples of Image Sizes

JPG/PNG

On Retina displays, pixel density is higher, so images should be prepared at twice the resolution of those used for standard displays.
For example, when displaying a 300x300px image on a standard display, prepare a 600x600px image for Retina displays.

SVG

Vector-based SVGs are resolution-independent, making them especially suitable for icons and logos. Quality does not degrade even when resized.

Specific Examples of Markup Methods

By using the srcset attribute, you can provide the browser with appropriate images depending on the display resolution.

<img src="example-300x300.jpg" srcset="example-600x600.jpg 2x, example-300x300.jpg 1x" alt="Description">

　
This code instructs the browser to use a 300x300px image on standard displays and a 600x600px image on Retina displays.

Advantages

  • Enables sharp image display on high-resolution displays.
  • Improves user experience.

Disadvantages

  • High-resolution images have larger file sizes, which may increase page load times.
  • Increased storage and bandwidth consumption.

Optimal Solution and Summary

The optimal solution is to use a combination of srcset and sizes attributes to create markup that supports various display sizes and resolutions. In addition, utilizing lazy loading for images helps maintain performance during the initial page load. Furthermore, by using SVGs whenever possible and avoiding unnecessarily large images, you can optimize performance from an SEO perspective as well.

　
*Please use this information at your own risk if you choose to reuse it.*

Retina Display