یک مولفه تصویر مینیمال، چند چارچوبی و پاسخگو

انجام درست تصاویر وب ممکن است سخت باشد. را <img> برچسب فقط نقطه شروع است. در سال 2023، اگر می خواهید بهترین عملکرد را داشته باشید باید:

• استفاده كردن srcset برای ارائه وضوح های متعدد برای دستگاه ها و اندازه های مختلف صفحه نمایش
• استفاده كردن sizes به طوری که مرورگر بداند کدام وضوح تصویر را دانلود کند
• ارائه فرمت های تصویر مدرن مانند AVIF و WebP در صورتی که مرورگر از آنها پشتیبانی کند
• حصول اطمینان از تغییر اندازه تصویر به صورت پاسخگو و حفظ نسبت ابعاد
• هنگامی که تصاویر بارگذاری شده اند، از تغییر طرح بندی جلوگیری می کند
• از بارگذاری تنبل بومی و رمزگشایی غیر همگام برای تصاویر خارج از صفحه استفاده کنید
• از واکشی با اولویت بالا برای تصاویر مهم استفاده کنید
• از متغیرهایی برای تصاویر با بارگذاری تنبل پشتیبانی می کند

این به طور واقع بینانه چیزی نیست که بتوان آن را به صورت دستی انجام داد، اما خوشبختانه بسیاری از چارچوب های وب ابزارهایی را برای مدیریت این موضوع ارائه می دهند. بسته به چارچوب، اینها ممکن است تغییر اندازه تصویر را در زمان ساخت یا زمان اجرا انجام دهند و ممکن است مؤلفه ای را ارائه دهند که جاسازی تصاویر را آسان می کند. اگرچه همه اینها دارای اشکالاتی هستند – تغییر اندازه در زمان ساخت کند است و اجزاء اغلب نشانه گذاری پیچیده ای را ایجاد می کنند که سبک کردن آن دشوار است.

بگذارید CDN کار را انجام دهد

بسیاری از مشکلات جاسازی تصاویر، تولید همه اندازه‌های مختلف است. یک راه عالی برای حل این مشکل با یک CDN تصویر است که اندازه تصویر را در لحظه تغییر می دهد. ممکن است نام‌های بزرگ Clodinary و Imgix را شنیده باشید، اما چیزی که ممکن است ندانید این است که بسیاری از تصاویر دیگری که استفاده می‌کنید در حال حاضر در CDN تصویر هستند. به عنوان مثال، CMS هایی مانند Contentful، Sanity، Prismic و WordPress.com همگی تصاویر خود را از یک CDN تحویل می دهند که می تواند در لحظه تغییر اندازه دهد. Shopify نیز و همچنین Unsplash این کار را انجام می دهد. اگر فریمورک شما در حال دانلود و تغییر اندازه آنها است، هدر دادن بزرگی است. Next.js در اینجا یک مورد بسیار فاحش است. من در مورد این موضوع کنجکاو بودم و در Netlify سوالاتی در مورد داده ها انجام دادم – بیش از نیمی از همه next/image درخواست های ارائه شده توسط Netlify برای تصاویر CDN هایی بود که می توانستند اندازه خود را تغییر دهند.

با الهام از این، unpic را ساختم، کتابخانه ای برای شناسایی، تجزیه و تولید URL های CDN تصویر. گام بعدی استفاده از آن برای ایجاد یک مولفه تصویر بود که هر URL CDN تصویر را می گیرد و همه تصاویر منبع صحیح را تولید می کند.

Unpic img: یک جزء تصویر ساده تر برای هر فریم ورک

من Unpic img را ایجاد کرده‌ام، یک مولفه حداقل تصویر که انجام خوب تصاویر را آسان می‌کند. ویژگی هایی دارد که آن را متمایز می کند:

• این فقط یک است <img> برچسب زدن بدون لفاف، بدون فاصله. حتی نیازی به a ندارد <picture> برچسب زدن
• فقط HTML و CSS. اگر از قبل رندر شده باشد، اصلا JS زمان اجرا وجود ندارد.
• بهترین شیوه ها به طور پیش فرض تصویر بزرگ، بالای تاشو؟ عبور priority و مطمئن می شود که با واکشی با اولویت بالا بارگیری می شود تا LCP شما پایین بماند. در غیر این صورت آن را بارگذاری می کند و از رمزگشایی غیر همگام استفاده می کند.
• انتخاب چیدمان ها به طور پیش فرض استفاده می کند constrained طرح بندی، که دارای حداکثر اندازه تصویر است، اما برای نمایشگرهای کوچکتر کاهش می یابد و نسبت تصویر را حفظ می کند. را fullWidth طرح بندی برای تصاویر قهرمان طراحی شده است و دارای مجموعه ای پیش فرض از نقاط شکست بر اساس تمام عرض های صفحه نمایش محبوب است. را fixed طرح بندی همان چیزی است که به نظر می رسد، اما تضمین می کند که همچنان منابع مناسب برای نمایشگرهای رتینا تولید می کند.
• چند چارچوبی. در حال حاضر از React، Vue، SolidJS و Svelte پشتیبانی می کند. از آنجایی که هیچ اسکریپت زمان اجرا وجود ندارد، پشتیبانی از چندین فریمورک ساده است و از PR ها برای افزودن بیشتر استقبال می شود. تمام منطق در یک مشترک است @unpic/core کتابخانه
• API ساده این یک img برچسب، اما بهتر است. هر کدام را می پذیرد <img> صفت.

در React به نظر می رسد:

import { Image } from "@unpic/react";

function MyComponent() {
  return (
    <Image
      src="https://cdn.shopify.com/static/sample-images/bath_grande_crop_center.jpeg"
      layout="constrained"
      width={800}
      height={600}
      alt="A lovely bath"
    />
  );
}

این HTML زیر را تولید می کند:

    <img alt="A lovely bath" loading="lazy" decoding="async" sizes="(min-width: 800px) 800px, 100vw"
        style="object-fit: cover; max-width: 800px; max-height: 600px; aspect-ratio: 1.33333 / 1; width: 100%;" 
        srcset="https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center&amp;width=1080&amp;height=1440 1080w,
https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center&amp;width=1280&amp;height=1707 1280w,
https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center&amp;width=1600&amp;height=2133 1600w,
https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center&amp;width=640&amp;height=853 640w,
https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center&amp;width=750&amp;height=1000 750w,
https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center&amp;width=800&amp;height=1067 800w,
https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center&amp;width=828&amp;height=1104 828w,
https://cdn.shopify.com/static/sample-images/bath.jpeg?crop=center&amp;width=960&amp;height=1280 960w"
        src="https://cdn.shopify.com/static/sample-images/bath.jpeg?width=800&amp;height=600&amp;crop=center">

من می دانم که ترجیح می دهم کدام را بنویسم!

کد معادل Vue:

<script setup lang="ts">
import { Image } from "@unpic/vue";
</script>

<template>
  <Image
    src="https://cdn.shopify.com/static/sample-images/bath_grande_crop_center.jpeg"
    layout="constrained"
    width="800"
    height="600"
    alt="A lovely bath"
  />
</template>

شیک:

<script lang="ts">
  import { Image } from "@unpic/svelte";
</script>

<Image
  src="https://cdn.shopify.com/static/sample-images/bath_grande_crop_center.jpeg"
  layout="constrained"
  width={800}
  height={600}
  alt="A lovely bath"
/>

… و SolidJS:

import type { Component } from "solid-js";
import { Image } from "@unpic/solid";

const MyComponent: Component = () => {
  return (
    <Image
      src="https://cdn.shopify.com/static/sample-images/bath_grande_crop_center.jpeg"
      layout="constrained"
      width={800}
      height={600}
      alt="A lovely bath"
    />
  );
};

در حال حاضر کار بسیار در حال پیشرفت است، اما آن را امتحان کنید و نظر خود را به من بگویید. اگر می خواهید یک چارچوب پشتیبانی شده را ارائه دهید، از PR استقبال می شود.

من مت کین هستم و یک مهندس اصلی در Netlify هستم، جایی که روی یکپارچه سازی چارچوب کار می کنم. قبلاً به ساخت افزونه تصویر گتسبی کمک کردم