لینک، تصویر، فهرست و جدول
تصاویر
تصویر با img: متن جایگزین (alt) برای کسی که تصویر را نمی‌بیند، ابعاد برای جلوگیری از پرش صفحه، قالب درست، و بارگذاری تنبل.
در این درس یاد می‌گیرید
- تصویر را با alt، width و height درست بگذارید
- قالب مناسب را انتخاب کنید (JPEG، PNG، SVG، WebP، AVIF)
- تصویر و توضیحش را با figure و figcaption کنار هم بگذارید
<img src="/images/cat.webp" alt="گربه‌ای نارنجی که روی کتاب خوابیده" width="640" height="427">- src نشانی فایل تصویر است.
- alt توصیف تصویر است برای صفحه‌خوان، برای وقتی تصویر بار نمی‌شود، و برای موتور جست‌وجو. تصویری که فقط تزئینی است alt="" خالی می‌گیرد تا صفحه‌خوان از آن بگذرد.
- width و height جای تصویر را از قبل نگه می‌دارند تا صفحه موقع بارگذاری نپرد (همان چیزی که گوگل با CLS می‌سنجد).
کدام قالب؟
- JPEG برای عکس؛ PNG برای تصویری با پس‌زمینهٔ شفاف؛ SVG برای لوگو و آیکون (برداری، در هر اندازه تیز).
- WebP و AVIF قالب‌های امروزی‌اند و با همان کیفیت خیلی سبک‌ترند؛ مرورگرهای امروزی هر دو را می‌شناسند.
<figure>
<img src="/images/yazd.webp" alt="بادگیرهای یزد در غروب" width="800" height="533" loading="lazy">
<figcaption>بادگیرهای یزد در غروب</figcaption>
</figure> تمرین
نشان مشعل را با یک alt معنادار، عرض و ارتفاع ۱۲۸ و داخل یک figure با توضیح (figcaption) نشان دهید. نشانی تصویر: /images/brand/locked-20260920/mark-256.webp
باید برسید به:
- یک تصویر داخل figure
- alt معنادار (دست‌کم چند حرف)
- عرض و ارتفاع ۱۲۸
- یک figcaption
آزمونک درس
۳ پرسش — سرور مشعل تصحیح می‌کند و دلیل هر پاسخ را می‌گوید.
۱alt برای چیست؟
۲چرا width و height را می‌نویسیم؟
۳برای لوگویی که در هر اندازه تیز بماند کدام قالب؟