Image SEO

<img 
  src="hero.jpg" 
  alt="Descriptive text" 
  loading="lazy" 
  width="800" 
  height="600"
>

import Image from 'next/image'
import hero from './hero.jpg'

<Image 
  src={hero} 
  alt="Hero" 
  placeholder="blur" 
/>

<NuxtImg 
  src="/hero.png" 
  width="800" 
  format="webp" 
/>

<img src={heroUrl} alt="Hero" loading="lazy" />

<enhanced:img src="./hero.jpg" alt="Hero" />

import { Image } from 'astro:assets';
import myImage from '../assets/my_image.png';
<Image src={myImage} alt="A description" />

<%= image_tag "icon.png", lazy: true, alt: "Icon" %>

<img src="{{ asset('img/hero.jpg') }}" loading="lazy" alt="Hero">

{% load static %}
<img src="{% static 'images/hero.jpg' %}" alt="Hero" loading="lazy">

<img src="{{ url_for('static', filename='hero.jpg') }}" loading="lazy">

<img src="~/images/hero.jpg" asp-append-version="true" loading="lazy" />

<img th:src="@{/images/hero.jpg}" loading="lazy" alt="Hero" />