What is included in HTML with Images Samples?

This page includes curated sample entries, related tools, and neighboring sample collections for HTML with Images Samples.

Elysia Tools

Navigation

Text Processing

HTML with Images Samples

HTML source code samples with images for testing extraction

Samples

Entries inside this sample collection

TextSimple

Basic HTML with Images

Simple HTML page with standard img tags

plaintext

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <img src="https://example.com/logo.png" alt="Company Logo">
    <p>This is a paragraph with an inline image <img src="/images/icon.png" alt="Icon"> in the middle.</p>
    <div>
        <img src="./images/photo.jpg" alt="Photo" width="300" height="200">
        <img src="../assets/banner.gif" alt="Banner">
    </div>
    <footer>
        <img src="/footer/logo-small.png" alt="Footer Logo">
    </footer>
</body>
</html>

TextIntermediate

Lazy Loading Images

HTML with data-src attributes for lazy loading

plaintext

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazy Loading Example</title>
</head>
<body>
    <h1>Image Gallery with Lazy Loading</h1>

    <!-- Lazy loaded images -->
    <div class="gallery">
        <img data-src="https://cdn.example.com/image1.jpg" class="lazy" alt="Image 1">
        <img data-src="https://cdn.example.com/image2.jpg" class="lazy" alt="Image 2">
        <img data-src="https://cdn.example.com/image3.jpg" class="lazy" alt="Image 3">
    </div>

    <!-- Mixed regular and lazy images -->
    <img src="https://example.com/hero-image.jpg" alt="Hero (not lazy)">
    <img data-src="https://example.com/content-image.jpg" class="lazy" alt="Content (lazy)">

    <!-- Lazy loading with placeholder -->
    <img src="https://example.com/placeholder.jpg" data-src="https://example.com/actual-image.jpg" alt="With placeholder">

    <!-- Background images with data attributes -->
    <div data-bg="https://example.com/background.jpg" class="lazy-bg"></div>
    <div data-bg="/images/gradient.png" class="lazy-bg"></div>
</body>
</html>

TextIntermediate

Responsive Images with srcset

HTML with srcset and sizes attributes for responsive images

plaintext

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive Images</title>
</head>
<body>
    <h1>Responsive Image Examples</h1>

    <!-- Basic srcset -->
    <img src="https://example.com/image-small.jpg"
         srcset="https://example.com/image-small.jpg 320w,
                 https://example.com/image-medium.jpg 640w,
                 https://example.com/image-large.jpg 1024w"
         sizes="(max-width: 320px) 280px,
                (max-width: 640px) 580px,
                1000px"
         alt="Responsive Image">

    <!-- Srcset with density descriptors -->
    <img src="https://example.com/photo.jpg"
         srcset="https://example.com/photo.jpg 1x,
                 https://example.com/photo-2x.jpg 2x,
                 https://example.com/photo-3x.jpg 3x"
         alt="High DPI Image">

    <!-- Picture element with multiple sources -->
    <picture>
        <source media="(min-width: 1024px)" srcset="https://example.com/desktop.jpg">
        <source media="(min-width: 768px)" srcset="https://example.com/tablet.jpg">
        <source media="(min-width: 480px)" srcset="https://example.com/mobile.jpg">
        <img src="https://example.com/fallback.jpg" alt="Responsive with Picture">
    </picture>

    <!-- Multiple formats in picture element -->
    <picture>
        <source srcset="https://example.com/image.webp" type="image/webp">
        <source srcset="https://example.com/image.jp2" type="image/jp2">
        <img src="https://example.com/image.jpg" alt="Multiple formats">
    </picture>

    <!-- Srcset with relative paths -->
    <img src="/images/default.jpg"
         srcset="/images/small.jpg 480w,
                 /images/medium.jpg 768w,
                 /images/large.jpg 1200w"
         alt="Relative paths">
</body>
</html>

TextSimple

E-commerce Product Page

Real-world e-commerce product page with multiple images

plaintext

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product - SuperStore</title>
</head>
<body>
    <header>
        <img src="https://cdn.superstore.com/logo.svg" alt="SuperStore Logo">
        <img src="https://cdn.superstore.com/search-icon.png" alt="Search">
    </header>

    <main>
        <div class="product">
            <!-- Main product image -->
            <img src="https://images.superstore.com/products/12345-main.jpg"
                 alt="Product Main Image"
                 id="main-product-image">

            <!-- Thumbnail gallery -->
            <div class="thumbnails">
                <img src="https://images.superstore.com/products/12345-thumb-1.jpg" data-full="https://images.superstore.com/products/12345-full-1.jpg" alt="View 1">
                <img src="https://images.superstore.com/products/12345-thumb-2.jpg" data-full="https://images.superstore.com/products/12345-full-2.jpg" alt="View 2">
                <img src="https://images.superstore.com/products/12345-thumb-3.jpg" data-full="https://images.superstore.com/products/12345-full-3.jpg" alt="View 3">
                <img src="https://images.superstore.com/products/12345-thumb-4.jpg" data-full="https://images.superstore.com/products/12345-full-4.jpg" alt="View 4">
            </div>
        </div>

        <div class="product-info">
            <h1>Awesome Product</h1>
            <img src="/media/stars-5.png" alt="5 Star Rating">
            <p>$99.99</p>
            <img src="/media/badges/best-seller.png" alt="Best Seller Badge">
        </div>
    </main>

    <aside class="recommendations">
        <h3>You may also like</h3>
        <img src="https://images.superstore.com/products/67890.jpg" alt="Related Product 1">
        <img src="https://images.superstore.com/products/67891.jpg" alt="Related Product 2">
        <img src="https://images.superstore.com/products/67892.jpg" alt="Related Product 3">
    </aside>

    <footer>
        <img src="https://cdn.superstore.com/payment-methods.png" alt="Payment Methods">
        <img src="/media/social-icons.png" alt="Social Media Icons">
    </footer>
</body>
</html>

TextSimple

Blog Article with Images

Blog post with various image types and placements

plaintext

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Awesome Blog Post</title>
</head>
<body>
    <article>
        <header>
            <h1>How to Build Amazing Websites</h1>
            <img src="https://blog.example.com/author-john.jpg" alt="Author John Doe" class="author-avatar">
            <p>By John Doe on December 29, 2024</p>
        </header>

        <div class="featured-image">
            <img src="https://blog.example.com/posts/web-design-hero.jpg"
                 alt="Web Design Featured Image"
                 class="featured">
        </div>

        <div class="content">
            <p>Welcome to this amazing tutorial!</p>

            <h2>Getting Started</h2>
            <img src="/images/step1.png" alt="Step 1 Diagram">

            <h2>Advanced Techniques</h2>
            <img src="https://cdn.blog.example.com/diagrams/architecture.png" alt="Architecture Diagram">

            <blockquote>
                <img src="/media/quote-icon.png" alt="Quote Icon">
                "Code is poetry"
            </blockquote>

            <h2>Screenshot Examples</h2>
            <img src="https://screenshots.example.com/dashboard.png" alt="Dashboard Screenshot">
            <img src="https://screenshots.example.com/settings.png" alt="Settings Screenshot">
        </div>

        <footer>
            <h3>About the Author</h3>
            <img src="https://blog.example.com/authors/john-large.jpg" alt="John Doe Large">
            <p>John is a web developer with 10 years of experience.</p>
            <img src="/social/twitter-icon.png" alt="Twitter">
            <img src="/social/github-icon.png" alt="GitHub">
        </footer>
    </article>
</body>
</html>

TextIntermediate

Mixed Absolute and Relative URLs

HTML with various URL formats (absolute, relative, protocol-relative)

plaintext

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mixed URL Examples</title>
</head>
<body>
    <!-- Absolute URLs with https -->
    <img src="https://example.com/image1.jpg" alt="HTTPS Image">
    <img src="https://cdn.example.com/assets/image2.png" alt="HTTPS CDN">

    <!-- Absolute URLs with http -->
    <img src="http://example.com/image3.jpg" alt="HTTP Image">
    <img src="http://legacy.example.com/photos/pic.gif" alt="HTTP Legacy">

    <!-- Protocol-relative URLs -->
    <img src="//cdn.example.com/image4.jpg" alt="Protocol-relative 1">
    <img src="//example.com/assets/image5.png" alt="Protocol-relative 2">

    <!-- Root-relative paths -->
    <img src="/images/logo.png" alt="Root-relative 1">
    <img src="/assets/icons/icon.svg" alt="Root-relative 2">
    <img src="/static/img/banner.jpg" alt="Root-relative 3">

    <!-- Relative paths -->
    <img src="image.jpg" alt="Same directory">
    <img src="./photo.png" alt="Explicit current directory">
    <img src="../images/pic.gif" alt="Parent directory">
    <img src="../../assets/logo.svg" alt="Grandparent directory">

    <!-- Complex relative paths -->
    <img src="../img/subfolder/deep/nested/image.png" alt="Complex relative">
    <img src="./../../assets/../static/img.jpg" alt="Very complex relative">

    <!-- Absolute paths with domain variations -->
    <img src="https://subdomain.example.com/image.jpg" alt="Subdomain">
    <img src="https://example.co.uk/photo.png" alt="Different TLD">
    <img src="https://example.com:8080/image.gif" alt="With port">

    <!-- Query strings and fragments -->
    <img src="/image.jpg?v=1" alt="With query string">
    <img src="https://example.com/img.png#section" alt="With fragment">
    <img src="/photo.jpg?width=300&height=200&quality=90" alt="Multiple params">

    <!-- Edge cases -->
    <img src="IMAGE.JPG" alt="Uppercase extension">
    <img src="image.jpeg" alt="JPEG extension">
    <img src="photo.svg" alt="SVG format">
    <img src="graphic.webp" alt="WebP format">
    <img src="animation.gif" alt="GIF format">
    <img src="banner.bmp" alt="BMP format">
</body>
</html>

TextIntermediate

Duplicate Images

HTML with duplicate image URLs for testing deduplication

plaintext

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Duplicate Images Test</title>
</head>
<body>
    <!-- Exact duplicates -->
    <img src="https://example.com/logo.png" alt="Logo 1">
    <img src="https://example.com/logo.png" alt="Logo 2">
    <img src="https://example.com/logo.png" alt="Logo 3">

    <!-- Case variations (same URL) -->
    <img src="/images/Photo.JPG" alt="Photo 1">
    <img src="/images/Photo.jpg" alt="Photo 2">

    <!-- Query string variations -->
    <img src="https://cdn.example.com/image.jpg" alt="Original">
    <img src="https://cdn.example.com/image.jpg?v=1" alt="With version">
    <img src="https://cdn.example.com/image.jpg?v=2" alt="Different version">
    <img src="https://cdn.example.com/image.jpg?cache=1234" alt="With cache">

    <!-- Multiple uses of same image -->
    <img src="/icons/star.png" alt="Star rating 1">
    <img src="/icons/star.png" alt="Star rating 2">
    <img src="/icons/star.png" alt="Star rating 3">
    <img src="/icons/star.png" alt="Star rating 4">
    <img src="/icons/star.png" alt="Star rating 5">

    <!-- Different paths pointing to same logical image -->
    <img src="/images/logo.png" alt="Logo absolute">
    <img src="./images/logo.png" alt="Logo relative">
    <img src="../current/images/logo.png" alt="Logo parent relative">

    <!-- CDN duplicates with different hosts -->
    <img src="https://cdn1.example.com/image.jpg" alt="CDN 1">
    <img src="https://cdn2.example.com/image.jpg" alt="CDN 2">
    <img src="https://cdn3.example.com/image.jpg" alt="CDN 3">

    <!-- Protocol-relative duplicates -->
    <img src="https://example.com/pic.png" alt="HTTPS">
    <img src="//example.com/pic.png" alt="Protocol-relative">

    <!-- Repeated in different sections -->
    <section>
        <img src="/media/banner.jpg" alt="Banner">
    </section>
    <section>
        <img src="/media/banner.jpg" alt="Banner Again">
    </section>
    <footer>
        <img src="/media/banner.jpg" alt="Banner Footer">
    </footer>
</body>
</html>

Tools

HTML with Images Samples

Entries inside this sample collection

Basic HTML with Images

Lazy Loading Images

Responsive Images with srcset

E-commerce Product Page

Blog Article with Images

Mixed Absolute and Relative URLs

Duplicate Images

Tools frequently paired with this sample

Related sample collections

Sample-focused context for search and workflow understanding

Overview

When to use

How it works

Use cases

FAQ

Bulk Images Resize for Instagram

Markdown to HTML Converter

HTML Tag Stripper

HTML Tag Stripper (HTML标签清除)

HTML Attribute Extractor

Batch Image Watermark

Batch Image Rename

HTML to Markdown Converter

QR Code Samples

PDF Samples

SVG Samples

WebRTC Real-Time Communication Samples

Docker Image Tag Samples

Regex Named Capture Groups