HTML Images With The IMG Tag

HTML images are embedded in a webpage using the <img> tag, which includes attributes like src for the image source URL, alt for alternative text, and optional attributes such as width and height for specifying dimensions.

Image Optimizer

Compressing and optimizing image files for the web is crucial to improve website load times, enhance user experience, and reduce bandwidth usage, which collectively contribute to better search engine rankings and lower hosting costs.

Drag & Drop File Here
or
Browse File

{{originMimeType}} | {{originImgWidth}} × {{originImgHeight}}px | {{originSize}}

Extension: same png jpeg webp gif
MaxW:
MaxH:
Width:
Height:

MinW:
MinH:
png to jpeg threshold: 1mb 2mb 5mb 10mb Infinity
Relax mode: Yes No
Fix jpg orientation: Yes No
Compression ratio:

Update

Format: {{outputMimeType}}
{{outputImgWidth}} × {{outputImgHeight}}px {{outputSize}}
Improvement: {{compressRatio}}

Download

Data:image

Image Formats

In HTML, common image formats include JPEG for photographs, PNG for images requiring transparency, SVG for scalable vector graphics, GIF for animations, BMP for simple bitmaps, and WebP for high-quality images with smaller file sizes.

JPG
Best for photographs and images with complex color variations and gradients.

PNG
Best for images needing transparency, logos, and icons.

GIF
Best for simple animations and low-color graphics.

SVG
Best for icons, logos, diagrams and illustrations requiring scalability.

BMP
Rarely used on the web due to large file sizes, limited browser support and lack of compression.

WebP
Best for web images requiring high quality with smaller file sizes.

Responsive Images

The srcset and sizes attributes in HTML are used to make images responsive, allowing the browser to choose the most appropriate image size for the user's device and viewport. This enhances performance by delivering the most optimized image based on the device's capabilities and the context in which the image is displayed.

• Performance Optimization: Only the most appropriate image size is downloaded, reducing load times and saving bandwidth.
• Better User Experience: Images are displayed at an optimal resolution for the device and viewport, enhancing visual quality.

By using srcset and sizes, you ensure that your images are responsive, adapt to different devices and screen sizes, and provide an optimal balance between image quality and performance.

The srcset Attribute

The srcset attribute allows you to specify a list of image sources with their respective descriptors. Each descriptor provides information about the size or density of the image, enabling the browser to select the best image to load. Here’s the syntax:

<img src="/img/img400.jpg"
   srcset="/img/img100.jpg 500w, 
   /img/img200.jpg 1000w, 
   /img/img300.jpg 1500w" 
   alt="Demo HTML image" />

In this example:

• img100.jpg is 500 pixels wide.
• img200.jpg is 1000 pixels wide.
• img300.jpg is 1500 pixels wide.

The w unit is a width descriptor that tells the browser the width of each image.

The sizes Attribute

The sizes attribute defines a set of media conditions (e.g., screen widths) and specifies the image size to use when those conditions are met. This helps the browser determine which image from the srcset to download and display.

Here’s an example:

<img src="/img/img100.jpg" 
   srcset="/img/img200.jpg 500w, 
           /img/img300.jpg 1000w, 
           /img/img400.jpg 1500w" 
   sizes="(max-width: 600px) 500px, 
          (max-width: 1200px) 1000px, 1500px"
   alt="Example image" />

Picture Tag

The <picture> HTML tag is used to provide multiple versions of an image for different device types or screen sizes. It allows for better control over which image is loaded based on the conditions specified, such as viewport size or image format support. This can help optimize loading times and improve responsiveness.

<picture>
  <source srcset="/img/img200.jpg" media="(max-width: 600px)">
  <source srcset="/img/img300.jpg" media="(max-width: 1200px)">
  <source srcset="/img/img400.jpg" media="(min-width: 1201px)">
  <img src="/img/img500.jpg" alt="Example for Picture Tag">
</picture>

Fluid Images

Fluid Images ensure images scale with the parent container by using a percentage-based width.

img {
  max-width: 100%;
  height: auto;
}

Use CSS Media Queries to adjust image styles based on viewport size.

img {
  width: 100%;
}
@media (min-width: 720px) {
  img {
    width: 50%;
  }
}

Lazy Loading

Lazy loading is a technique used to delay the loading of images until they are about to be viewed in the viewport, which can improve page load times and performance, especially for pages with many images. It can be accomplished by the Native Lazy Loading with the loading attribute or using JavaScript.

<img src="/img/img300.jpg" 
     alt="Lazy Loading" 
     loading="lazy">

AMP HTML Images

AMP HTML images use the <amp-img> tag to ensure images load quickly and efficiently on AMP (Accelerated Mobile Pages) by enforcing predefined dimensions and supporting lazy loading by default.

<amp-img src="/img/img300.jpg" 
    width="300" height="180" 
    layout="responsive" 
    alt="demo pic">