بهینه سازی تصویر با Astrojs – انجمن DEV

Summarize this content to 400 words in Persian Lang

هنگام ساخت برنامه های وب مدرن، بهینه سازی تصویر نقش مهمی در بهبود عملکرد سایت، بهبود سئو و ارائه تجربه کاربری بهتر ایفا می کند. Astro، با یکپارچه سازی تصویر قدرتمند خود، این فرآیند را آسان تر می کند. با این حال، مدیریت کارآمد تصاویر، به خصوص زمانی که آنها در دایرکتوری عمومی / ذخیره می شوند، همچنان می تواند یک چالش باشد.

برای ساده‌سازی این موضوع، ما یک جزء تصویر سفارشی را به عنوان بخشی از منبع باز Astro boilerplate – Astrolate ایجاد کرده‌ایم.

این مؤلفه مدیریت تصویر را ساده می کند و ویژگی های بهینه سازی داخلی را ارائه می دهد و مدیریت تصاویر را در پروژه های Astro برای توسعه دهندگان آسان تر می کند.

در این راهنما، نحوه استفاده از این مؤلفه سفارشی را به شما آموزش می دهیم، ویژگی های آن را بررسی می کنیم و نشان می دهیم که چگونه می تواند کارایی و عملکرد سایت شما را بهبود بخشد.

کامپوننت تصویر سفارشی

برای بهینه سازی تصاویر در astro، ما یک جزء تصویر سفارشی بر روی یکپارچه سازی تصویر داخلی Astro ساخته ایم، که روشی ساده برای مدیریت تصاویر در پروژه Astro، به ویژه برای تصاویر ذخیره شده در دایرکتوری عمومی / به ما ارائه می دهد. این مؤلفه همچنین به طور خودکار تصاویر را از مکان ارائه شده وارد می کند زیرا astro برای استفاده باید تصاویر محلی وارد شود. شما می توانید جزء را از اینجا از دیگ بخار astro ما دریافت کنید.

ویژگی ها

واردات خودکار تصاویر محلی با استفاده از مکان تصویر
اعتبارسنجی مسیر تصویر خودکار
رابط props ساده شده
مدیریت خطای داخلی با هشدارهای کنسول
پشتیبانی از چندین فرمت تصویر
گزینه های بارگذاری تنبل
بهینه سازی خودکار تصویر

نصب و راه اندازی

1.ما باید مطمئن شویم که ادغام Astro Image را در خود فعال کرده ایم astro.config.mjs:

import { defineConfig } from **”astro/config”;**

export default defineConfig({
integrations: [
// The Image integration is included by default in Astro 3.0+
],
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. و فایل کامپوننت (به عنوان مثال، ImageMod.astro) را در فهرست اجزای ما قرار دهید.

اینجا بیشتر بخوانید – https://themefisher.com/astrojs-image-optimization

import { defineConfig } from **"astro/config";**

export default defineConfig({
  integrations: [
    // The Image integration is included by default in Astro 3.0+
  ],
});