الصور والخطوط والأصول

صورة في src غير صورة في public

صورة جوّه src وتستوردها: Astro يقدر يغيّر مقاسها وصيغتها ويحط width و height عشان الصفحة متقفزش. صورة في public تتتنسخ كما هي. وسم <img src="/logo.svg"> مناسب لـ SVG أيقونة أو ملف مش عايز تلمسه.

---import { Image } from "astro:assets";import dish from "../images/koshary.jpg";---<Image src={dish} alt="طبق كشري" widths={[480, 960]} sizes="(max-width: 800px) 100vw, 960px" />

alt مش اختياري. صورة زينة فاضيّة تكتب alt="" عن قصد، مش تسيّب الخاصية. widths و sizes يخلّوا المتصفح يختار ملف قريب من عرض الشاشة، فموبايل مينزّلش صورة ديسكتوب.

<Picture> من astro:assets يطلع صيغ أحدث (زي AVIF و WebP) مع رجوع لصيغة أقدم. استخدمه للصور الكبيرة فوق الطيّة. Image يكفي لو مش محتاج تغيّر الصيغة.

صور بعيدة

رابط https:// جوّه Image محتاج إذن في الكونفج، عشان حد ميحقنش سيرفرك يحمّل أي عنوان (الباب ده SSRF). المفاتيح تحت image، وأشهرها domains و remotePatterns. راجع المرجع لأن شكل النمط بيتظبط.

للصور البعيدة غالبًا محتاج inferSize أو تمرّر العرض والارتفاع، عشان Astro يعرف الأبعاد من غير ما يخمن. تحسين الصور البعيدة بيحصل وقت البناء أو وقت الطلب على حسب الصفحة ثابتة ولا سيرفر.

صور مجموعة المحتوى المحلية (جوّه الـ schema كحقل صورة) بتعدّي على نفس الخدمة. المجموعة الحية متقدّرش تحسّن صور وقت التشغيل. اعرضها بـ img عادي أو حسّنها في مصدرها.

الخطوط من غير ما تبعت الزائر لحد تاني

من Astro 6 في Fonts API. بتسجّل الخط في الكونفج، و Astro ينزّله وقت البناء ويحطه في أصل موقعك (_astro/fonts). الزائر مش بيتصل بجوجل عشان الخط، والملف يتكاش مع أصول ثابتة.

import { defineConfig, fontProviders } from "astro/config";export default defineConfig({  fonts: [    {      provider: fontProviders.fontsource(),      name: "Cairo",      cssVariable: "--font-cairo",    },  ],});

المزوّدون الجاهزون منهم Google و Fontsource و Bunny وملفات محلية. مكوّن الخط من astro:assets بيحط الـ CSS و يقدر يعمل preload للملف المهم. أسماء الـ props (زي preload) راجعها في دليل الخطوط قبل ما تنسخ، لأنها اتزادت بالتدريج.

حط font-family: var(--font-cairo) على body. وخط احتياطي من النظام وراه عشان أول رسم ميحصلش بخط فاضي لو الملف اتأخر.

أصول تانية

ملف CSS أو صورة مستوردة من src بياخد اسم فيه هاش في البناء، فالكاش يفضل سنة وأنت مطمن: أي تغيير يغيّر الاسم. ملف public اسمه ثابت، فلو غيّرت المحتوى والمتصفح كاشه، الزائر ممكن يفضل شايف القديم لحد ما الكاش يخلص.

SVG صغير كأيقونة ممكن يتنحط inline في المكوّن. SVG كبير أو لوجو يتساب ملف. <img> للـ SVG في public مش بيمر على تحسين الصور، وده غالبًا اللي أنت عايزه.

خلّصت الفصل لما

• تستورد صورة من src وتعرضها بـ Image و alt
• تحط widths و sizes للصورة الكبيرة
• تعرف إن public مش بيتحسّن
• تقفل الصور البعيدة بـ image.domains أو نمط
• تسجّل خط في fonts وتستخدم متغير الـ CSS