افزایش سرعت سایت با تصاویر واکنش‌گرا

نام فایل: generate_images.py؛ همهٔ سطرها را با همین نام ذخیره کنید.

"""Create a reproducible demo image; Pillow is required."""
from pathlib import Path
from PIL import Image, ImageDraw


def generate(output):
    output = Path(output)
    output.mkdir(parents=True, exist_ok=True)
    original = Image.new('RGB', (1280, 720), '#22292c')
    draw = ImageDraw.Draw(original)
    for x in range(0, 1280, 80):
        draw.rectangle((x, 120, x + 48, 600), fill='#b6cfbe')
    for width in (320, 640, 1280):
        image = original.resize((width, width * 9 // 16), Image.Resampling.LANCZOS)
        image.save(output / f'hero-{width}.webp', quality=82, method=6)


if __name__ == '__main__':
    generate(Path(__file__).resolve().parent / 'images')

این فایل بخشی از مثال کامل بالاست؛ ترتیب اجرا، پیش‌نیازها و محدودیت‌های نتیجه در متن مقاله توضیح داده شده است.

نام فایل: index.html؛ همهٔ سطرها را با همین نام ذخیره کنید.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>آزمایش تصویر واکنش‌گرا</title>
  <link rel="stylesheet" href="demo.css">
</head>
<body>
  <main>
    <h1>تصویر متناسب با عرض صفحه</h1>
    <img src="images/hero-640.webp"
         srcset="images/hero-320.webp 320w, images/hero-640.webp 640w, images/hero-1280.webp 1280w"
         sizes="(max-width: 960px) calc(100vw - 32px), 928px"
         width="1280" height="720" fetchpriority="high" loading="eager"
         decoding="async" alt="ستون‌های سبز روی زمینهٔ تیره برای آزمایش کیفیت تصویر">
    <p>در ابزار شبکه، حافظهٔ موقت را غیرفعال و صفحه را دوباره بارگذاری کنید.</p>
  </main>
</body>
</html>

این فایل بخشی از مثال کامل بالاست؛ ترتیب اجرا، پیش‌نیازها و محدودیت‌های نتیجه در متن مقاله توضیح داده شده است.

نام فایل: demo.css؛ همهٔ سطرها را با همین نام ذخیره کنید.

* { box-sizing: border-box; }
body { margin: 0; background: #eae9e3; color: #15342b; font-family: Tahoma, sans-serif; }
main { width: min(100%, 960px); margin-inline: auto; padding: 16px; }
img { display: block; width: 100%; height: auto; }
h1 { font-size: clamp(20px, 4vw, 30px); }
p { line-height: 1.9; }

این فایل بخشی از مثال کامل بالاست؛ ترتیب اجرا، پیش‌نیازها و محدودیت‌های نتیجه در متن مقاله توضیح داده شده است.

نام فایل: audit_images.py؛ همهٔ سطرها را با همین نام ذخیره کنید.

from html.parser import HTMLParser
from pathlib import Path
from PIL import Image


class Images(HTMLParser):
    def __init__(self):
        super().__init__()
        self.items = []

    def handle_starttag(self, tag, attrs):
        if tag == 'img':
            self.items.append(dict(attrs))


def audit(root):
    parser = Images()
    parser.feed((root / 'index.html').read_text(encoding='utf-8'))
    assert len(parser.items) == 1
    image = parser.items[0]
    assert image['loading'] == 'eager' and image['fetchpriority'] == 'high'
    assert image['width'] == '1280' and image['height'] == '720'
    assert image['sizes'] == '(max-width: 960px) calc(100vw - 32px), 928px'
    for entry in image['srcset'].split(','):
        filename, descriptor = entry.strip().split()
        with Image.open(root / filename) as variant:
            assert variant.width == int(descriptor[:-1])
            assert variant.width * 9 == variant.height * 16
    print('PASS: dimensions, candidates and eager main image; measure LCP in a browser.')


if __name__ == '__main__':
    audit(Path(__file__).resolve().parent)

این فایل بخشی از مثال کامل بالاست؛ ترتیب اجرا، پیش‌نیازها و محدودیت‌های نتیجه در متن مقاله توضیح داده شده است.