مرجع عناصر HTML : عنصر <img>
عنصر <img> در HTML یک تصویر را در سند جاسازی میکند.
مثال بالا نحوهی استفاده از عنصر را نشان میدهد:
ویژگی src مسیر تصویری را که میخواهید جاسازی کنید، نگه میدارد. اگر ویژگی srcset موجود باشد، این ویژگی اجباری نیست. با این حال، حداقل یکی از ویژگیهای src یا srcset باید ارائه شود.
ویژگی alt یک جایگزین متنی برای تصویر نگه میدارد که اجباری و برای دسترسیپذیری فوقالعاده مفید است - صفحهخوانها مقدار ویژگی را برای کاربران خود میخوانند تا بدانند تصویر به چه معناست. متن alt همچنین در صورتی که تصویر به دلایلی قابل بارگیری نباشد، در صفحه نمایش داده میشود: به عنوان مثال، خطاهای شبکه، مسدود شدن محتوا یا پوسیدگی لینک.
ویژگیهای بسیار دیگری برای دستیابی به اهداف مختلف وجود دارد:
کنترل Referrer/CORS برای امنیت و حریم خصوصی: به crossorigin و referrerpolicy مراجعه کنید.
از عرض و ارتفاع برای تنظیم اندازهی ذاتی تصویر استفاده کنید و به آن اجازه دهید قبل از بارگیری، فضایی را اشغال کند تا تغییرات طرحبندی محتوا را کاهش دهد. نکات مربوط به تصاویر واکنشگرا به همراه اندازهها و srcset (همچنین به عنصر و آموزش تصاویر واکنشگرای ما مراجعه کنید).
فرمتهای تصویر پشتیبانیشده
استاندارد HTML فرمتهای تصویری که باید پشتیبانی شوند را فهرست نمیکند، بنابراین مرورگرها ممکن است از فرمتهای مختلفی پشتیبانی کنند.
فرمتهای فایل تصویری که بیشتر در وب استفاده میشوند عبارتند از:
- APNG (گرافیک شبکهای متحرک قابل حمل) - انتخاب خوبی برای توالیهای انیمیشن بدون اتلاف (GIF عملکرد کمتری دارد)
- AVIF (فرمت فایل تصویری AV1) - انتخاب خوبی برای تصاویر و تصاویر متحرک به دلیل عملکرد بالا.
- GIF (فرمت تبادل گرافیکی) - انتخاب خوبی برای تصاویر و انیمیشنهای ساده.
- JPEG (تصویر گروه متخصصان عکاسی مشترک) - انتخاب خوبی برای فشردهسازی با اتلاف تصاویر ثابت (در حال حاضر محبوبترین است).
- PNG (گرافیک شبکهای قابل حمل) - انتخاب خوبی برای فشردهسازی بدون اتلاف تصاویر ثابت (کیفیت کمی بهتر از JPEG).
- SVG (گرافیک برداری مقیاسپذیر) - فرمت تصویر برداری. برای تصاویری که باید با دقت در اندازههای مختلف ترسیم شوند، استفاده کنید. WebP (فرمت تصویر وب) - انتخاب عالی برای تصاویر و تصاویر متحرک
فرمتهایی مانند WebP و AVIF توصیه میشوند زیرا عملکرد بسیار بهتری نسبت به PNG، JPEG، GIF برای تصاویر ثابت و متحرک دارند.
SVG همچنان فرمت پیشنهادی برای تصاویری است که باید با دقت در اندازههای مختلف ترسیم شوند.
اگر هنگام بارگذاری یا رندر یک تصویر خطایی رخ دهد و یک کنترلکننده رویداد onerror برای رویداد خطا تنظیم شده باشد، آن کنترلکننده رویداد فراخوانی میشود. این اتفاق میتواند در چندین موقعیت رخ دهد، از جمله:
- ویژگیهای src یا srcset خالی ("") یا تهی باشند.
- آدرس اینترنتی src همان آدرس اینترنتی صفحهای است که کاربر در حال حاضر در آن است.
- تصویر به نحوی خراب شده است که مانع از بارگذاری آن میشود.
- فرادادههای تصویر به گونهای خراب شدهاند که بازیابی ابعاد آن غیرممکن است و هیچ ابعادی در ویژگیهای عنصر مشخص نشده است.
- تصویر در فرمتی است که توسط عامل کاربر پشتیبانی نمیشود.
این عنصر شامل ویژگیهای سراسری است.
alt
متنی را تعریف میکند که میتواند جایگزین تصویر در صفحه شود.
مرورگرها همیشه تصاویر را نمایش نمیدهند. موقعیتهای مختلفی وجود دارد که ممکن است مرورگر تصاویر را نمایش ندهد، مانند:
- مرورگرهای غیر بصری (مانند مرورگرهایی که توسط افراد دارای اختلالات بینایی استفاده میشوند)
- کاربر تصمیم میگیرد تصاویر را نمایش ندهد (صرفهجویی در پهنای باند، دلایل حریم خصوصی)
- تصویر نامعتبر است یا از نوع پشتیبانی نشده است
در این موارد، مرورگر ممکن است تصویر را با متن موجود در ویژگی alt عنصر جایگزین کند. به این دلایل و دلایل دیگر، در صورت امکان، مقدار مفیدی برای alt در نظر بگیرید.
تنظیم این ویژگی روی یک رشته خالی () نشان میدهد که این تصویر بخش کلیدی محتوا نیست (تزئین یا پیکسل ردیابی است) و مرورگرهای غیر بصری ممکن است آن را از رندر حذف کنند. مرورگرهای بصری همچنین اگر ویژگی alt خالی باشد و تصویر نمایش داده نشود، نماد تصویر شکسته را پنهان میکنند.
این ویژگی همچنین هنگام کپی کردن و چسباندن تصویر به متن یا ذخیره تصویر لینک شده در یک بوکمارک استفاده میشود.
attributionsrc
مشخص میکند که میخواهید مرورگر یک هدر Attribution-Reporting-Eligible را همراه با درخواست تصویر ارسال کند.
در سمت سرور، این برای فعال کردن ارسال یک هدر Attribution-Reporting-Register-Source یا Attribution-Reporting-Register-Trigger در پاسخ، برای ثبت یک منبع انتساب مبتنی بر تصویر یا تریگر انتساب، به ترتیب، استفاده میشود. اینکه کدام هدر پاسخ باید برگردانده شود، به مقدار هدر Attribution-Reporting-Eligible که ثبت را فعال کرده است، بستگی دارد.
رویداد منبع یا تریگر مربوطه پس از دریافت پاسخ حاوی فایل تصویر توسط مرورگر، فعال میشود.
دو نسخه از این ویژگی وجود دارد که میتوانید تنظیم کنید:
- Boolean، یعنی فقط نام attributionsrc. این مشخص میکند که شما میخواهید هدر Attribution-Reporting-Eligible به همان سروری ارسال شود که ویژگی src به آن اشاره میکند. این مورد زمانی مناسب است که شما منبع انتساب یا ثبت تریگر را در همان سرور مدیریت میکنید. هنگام ثبت یک تریگر انتساب، این ویژگی اختیاری است و در صورت حذف، از یک مقدار بولی استفاده میشود.
- مقداری که شامل یک یا چند URL است، به عنوان مثال:
این در مواردی مفید است که منبع درخواستی روی سروری که شما کنترل میکنید نیست، یا فقط میخواهید ثبت منبع انتساب را در سرور دیگری انجام دهید. در این حالت، میتوانید یک یا چند URL را به عنوان مقدار attributionsrc مشخص کنید. هنگامی که درخواست منبع رخ میدهد، هدر Attribution-Reporting-Eligible علاوه بر مبدا منبع، به URL(های) مشخص شده در attributionSrc ارسال میشود. سپس این URLها میتوانند با هدر Attribution-Reporting-Register-Source یا Attribution-Reporting-Register-Trigger متناسب با نیاز برای تکمیل ثبت پاسخ دهند.
مشخص کردن چندین URL به این معنی است که میتوان چندین منبع انتساب را روی یک ویژگی ثبت کرد. برای مثال، ممکن است کمپینهای مختلفی داشته باشید که میخواهید موفقیت آنها را اندازهگیری کنید، که شامل تولید گزارشهای مختلف روی دادههای مختلف است.
crossorigin
نشان میدهد که آیا واکشی تصویر باید با استفاده از یک درخواست CORS انجام شود یا خیر. دادههای تصویر از یک تصویر دارای قابلیت CORS که از یک درخواست CORS برگردانده شده است، میتواند در عنصر بدون علامتگذاری "آلوده" دوباره استفاده شود.
اگر ویژگی crossorigin مشخص نشده باشد، یک درخواست غیر CORS ارسال میشود (بدون سربرگ درخواست Origin)، و مرورگر تصویر را به عنوان آلوده علامتگذاری میکند و دسترسی به دادههای تصویر آن را محدود میکند و از استفاده آن در عناصر جلوگیری میکند.
اگر ویژگی crossorigin مشخص شده باشد، یک درخواست CORS ارسال میشود (با سربرگ درخواست Origin)؛ اما اگر سرور اجازه دسترسی متقابل به دادههای تصویر توسط سایت مبدا را ندهد (با ارسال نکردن هیچ هدر پاسخ Access-Control-Allow-Origin، یا با عدم درج مبدا سایت در هر هدر پاسخ Access-Control-Allow-Origin که ارسال میکند)، مرورگر از بارگیری تصویر جلوگیری میکند و یک خطای CORS را در کنسول devtools ثبت میکند.
مقادیر مجاز:
- anonymous
یک درخواست CORS با حذف اعتبارنامهها ارسال میشود (یعنی بدون کوکیها، گواهیهای X.509 یا هدر درخواست مجوز).
- use-credentials
درخواست CORS با هرگونه اعتبارنامهای که شامل میشود (یعنی کوکیها، گواهیهای X.509 و هدر درخواست مجوز) ارسال میشود. اگر سرور اجازه اشتراکگذاری اعتبارنامهها با سایت مبدا را ندهد (با ارسال هدر پاسخ Access-Control-Allow-Credentials: true)، مرورگر تصویر را به عنوان آلوده علامتگذاری میکند و دسترسی به دادههای تصویر آن را محدود میکند.
اگر این ویژگی مقدار نامعتبری داشته باشد، مرورگرها آن را طوری مدیریت میکنند که انگار از مقدار ناشناس استفاده شده است.
decoding
این ویژگی به مرورگر راهنمایی میدهد که آیا باید رمزگشایی تصویر را همراه با رندر کردن محتوای DOM دیگر در یک مرحله ارائه واحد که "صحیحتر" به نظر میرسد (همگامسازی) انجام دهد، یا ابتدا محتوای DOM دیگر را رندر و ارائه دهد و سپس تصویر را رمزگشایی کرده و بعداً ارائه دهد (async). در عمل، async به این معنی است که رنگآمیزی بعدی منتظر رمزگشایی تصویر نمیماند.
اغلب درک هرگونه اثر قابل توجه هنگام استفاده از رمزگشایی روی عناصر استاتیک دشوار است. آنها احتمالاً در ابتدا به عنوان تصاویر خالی رندر میشوند در حالی که فایلهای تصویر (از شبکه یا از حافظه پنهان) دریافت میشوند و سپس به هر حال به طور مستقل مدیریت میشوند، بنابراین "همگامسازی" بهروزرسانیهای محتوا کمتر مشهود است. با این حال، مسدود شدن رندر هنگام رمزگشایی، اگرچه اغلب بسیار کوچک است، اما قابل اندازهگیری است - حتی اگر مشاهده آن با چشم انسان دشوار باشد. برای تحلیل دقیقتر src
آدرس اینترنتی تصویر. حداقل یکی از src و srcset برای یک عنصر مورد نیاز است. اگر srcset مشخص شود، src به یکی از دو روش زیر استفاده میشود:
به عنوان جایگزین برای مرورگرهایی که از srcset پشتیبانی نمیکنند.
اگر srcset از توصیفگر "x" استفاده کند، src معادل منبعی با توصیفگر چگالی 1x است؛ یعنی تصویری که توسط src مشخص شده است در صفحه نمایشهای با چگالی کم (مانند نمایشگرهای معمولی یا ) استفاده میشود.
srcset
یک یا چند رشته که با کاما از هم جدا شدهاند و منابع تصویر ممکن را برای استفاده توسط مرورگر نشان میدهند.
هر رشته از موارد زیر تشکیل شده است:
۱. یک URL به یک تصویر
۲. به صورت اختیاری، فاصله خالی و به دنبال آن یکی از موارد زیر:
- یک توصیفگر عرض (یک عدد صحیح مثبت که مستقیماً به دنبال آن w میآید). باید با عرض ذاتی تصویر ارجاع شده مطابقت داشته باشد. توصیفگر عرض بر اندازه منبع داده شده در ویژگی sizes تقسیم میشود تا چگالی پیکسل مؤثر محاسبه شود. به عنوان مثال، برای ارائه یک منبع تصویر که باید زمانی که رندرکننده به تصویری با عرض ۴۵۰ پیکسل نیاز دارد استفاده شود، از توصیفگر عرض ۴۵۰w استفاده کنید. هنگامی که یک srcset شامل توصیفگرهای "w" باشد، مرورگر از آن توصیفگرها به همراه ویژگی sizes برای انتخاب یک منبع استفاده میکند.
- توصیفگر چگالی پیکسل (یک عدد ممیز شناور مثبت که مستقیماً به دنبال آن x میآید). این توصیفگر شرایطی را مشخص میکند که در آن منبع تصویر مربوطه باید به عنوان چگالی پیکسل صفحه نمایش استفاده شود. به عنوان مثال، برای ارائه یک منبع تصویر که باید زمانی که چگالی پیکسل دو برابر چگالی استاندارد است استفاده شود، از توصیفگر چگالی پیکسل ۲x یا ۲.۰x استفاده کنید.
اگر هیچ توصیفگری مشخص نشود، به منبع توصیفگر پیشفرض ۱x اختصاص داده میشود. ترکیب توصیفگرهای عرض و توصیفگرهای چگالی پیکسل در همان ویژگی srcset نادرست است. توصیفگرهای تکراری (برای مثال، دو منبع در یک srcset که هر دو با 2x توصیف شدهاند) نیز نامعتبر هستند.
کاراکترهای فاصله، به غیر از فاصلهی خالی که URL و توصیفگر شرط مربوطه را از هم جدا میکند، نادیده گرفته میشوند؛ این شامل فاصلهی ابتدا و انتهایی و همچنین فاصلهی قبل یا بعد از هر کاما میشود. با این حال، اگر یک رشتهی کاندید تصویر حاوی هیچ توصیفگری نباشد و هیچ فاصلهی خالی بعد از URL وجود نداشته باشد، رشتهی کاندید تصویر بعدی، در صورت وجود، باید با یک یا چند فاصلهی خالی شروع شود، در غیر این صورت کاما بخشی از URL در نظر گرفته میشود.
هنگامی که srcset عنصر از توصیفگرهای x استفاده میکند، مرورگرها URL موجود در ویژگی src (در صورت وجود) را نیز به عنوان یک کاندید در نظر میگیرند و یک توصیفگر پیشفرض 1x به آن اختصاص میدهند. از سوی دیگر، اگر ویژگی srcset از توصیفگرهای width استفاده کند، src در نظر گرفته نمیشود و به جای آن از ویژگی sizes استفاده میشود.
عامل کاربر هر یک از منابع موجود را به صلاحدید خود انتخاب میکند. این به آنها آزادی عمل قابل توجهی میدهد تا انتخاب خود را بر اساس مواردی مانند تنظیمات کاربر یا شرایط پهنای باند تنظیم کنند. برای مثال به آموزش تصاویر واکنشگرای ما مراجعه کنید.
width
عرض ذاتی تصویر بر حسب پیکسل. باید یک عدد صحیح بدون واحد باشد.
usemap
URL جزئی (با شروع با #) یک نقشه تصویر مرتبط با عنصر.
اگر عنصر align
تصویر را با متن اطرافش تراز میکند. به جای این ویژگی، از ویژگیهای CSS مربوط به float و/یا vertical-align استفاده کنید. مقادیر مجاز:
- top
معادل یا
- middle
معادل
- bottom
پیشفرض، معادل یا
- left
معادل
- right
معادل
border
عرض یک حاشیه در اطراف تصویر. به جای آن از ویژگی border در CSS استفاده کنید.
hspace
تعداد پیکسلهای فضای خالی در سمت چپ و راست تصویر. به جای آن از ویژگی margin در CSS استفاده کنید.
longdesc
لینکی به توضیحات مفصلتر تصویر. مقادیر ممکن عبارتند از URL یا شناسه عنصر.
این ویژگی در مشخصات HTML منسوخ شده است. آیندهای نامشخص دارد؛ نویسندگان باید از جایگزین WAI-ARIA مانند aria-describedby یا aria-details استفاده کنند.
name
نامی برای عنصر. به جای آن از ویژگی id استفاده کنید.
vspace
تعداد پیکسلهای فضای سفید بالا و پایین تصویر. به جای آن از ویژگی margin در CSS استفاده کنید.
یک عنصر جایگزین شده است؛ به طور پیشفرض مقدار نمایش آن inline است، اما ابعاد پیشفرض آن توسط مقادیر ذاتی تصویر جاسازی شده، مانند inline-block، تعریف میشود. میتوانید ویژگیهایی مانند border/border-radius، padding/margin، width، height و غیره را روی یک تصویر تنظیم کنید.
خط پایه ندارد، بنابراین وقتی تصاویر در یک زمینه قالببندی درون خطی با استفاده میشوند، پایین تصویر روی خط پایه متن قرار میگیرد.
میتوانید از ویژگی object-position برای قرار دادن تصویر در کادر عنصر و از ویژگی object-fit برای تنظیم اندازه تصویر در کادر استفاده کنید (به عنوان مثال، اینکه آیا تصویر باید در کادر جا شود یا حتی اگر برش لازم باشد، آن را پر کند).
بسته به نوع آن، یک تصویر ممکن است عرض و ارتفاع ذاتی داشته باشد. با این حال، برای برخی از انواع تصویر، ابعاد ذاتی ضروری نیستند. به عنوان مثال، تصاویر SVG اگر عنصر ریشه آنها عرض یا ارتفاع تنظیم شدهای نداشته باشد، ابعاد ذاتی ندارند.
نوشتن توضیحات جایگزین معنادار
مقدار ویژگی alt باید یک جایگزین متنی واضح و مختصر برای محتوای تصویر ارائه دهد. نباید وجود خود تصویر یا نام فایل تصویر را توصیف کند. اگر ویژگی alt عمداً به دلیل اینکه تصویر معادل متنی ندارد، حذف شده است، روشهای جایگزینی را برای ارائه آنچه تصویر سعی در انتقال آن دارد، در نظر بگیرید.
این کار را نکنید:
یک آزمون مهم در دسترسیپذیری، خواندن محتوای ویژگی alt به همراه محتوای متنی قبل از آن است تا ببینیم آیا همان معنای تصویر را منتقل میکند یا خیر. برای مثال، اگر قبل از تصویر جمله "در سفرهایم، یک حیوان کوچک ناز دیدم:" آمده باشد، مثال "نباید" میتواند توسط یک صفحهخوان به صورت "در سفرهایم، یک حیوان کوچک ناز دیدم: تصویر" خوانده شود، که منطقی نیست. مثال "انجام دادن" میتواند توسط یک صفحهخوان به صورت "در سفرهایم، یک حیوان کوچک ناز دیدم: یک پنگوئن در ساحل" خوانده شود، که منطقی است.
برای تصاویری که برای شروع یک عمل استفاده میشوند، به عنوان مثال، تصاویری که درون یک عنصر یا قرار دارند، توصیف عمل شروع شده را درون مقدار ویژگی alt در نظر بگیرید. به عنوان مثال، میتوانید به جای بنویسید . همچنین میتوانید اضافه کردن یک توضیح اختیاری بیشتر درون ویژگی title را در نظر بگیرید. این توضیح در صورت درخواست کاربر میتواند توسط صفحهخوان خوانده شود.
وقتی ویژگی alt روی یک تصویر وجود ندارد، برخی از صفحهخوانها ممکن است نام فایل تصویر را به جای آن اعلام کنند. اگر نام فایل نمایانگر محتوای تصویر نباشد، این میتواند یک تجربه گیجکننده باشد.
یک درخت تصمیمگیری alt • تصاویر • آموزشهای دسترسیپذیری وب WAI
متنهای جایگزین: راهنمای نهایی — آزمایشگاه Axess
چگونه متن جایگزین عالی طراحی کنیم: مقدمه | Deque
MDN درک WCAG، توضیحات دستورالعمل ۱.۱
شناسایی SVG به عنوان تصویر
به دلیل یک اشکال در VoiceOver، VoiceOver تصاویر SVG را به درستی به عنوان تصویر اعلام نمیکند. برای اطمینان از اینکه فناوریهای کمکی به درستی SVG را به عنوان محتوای تصویر اعلام میکنند، به تمام عناصر که فایلهای منبع SVG دارند، را اضافه کنید.
ویژگی عنوان جایگزین قابل قبولی برای ویژگی alt نیست. علاوه بر این، از تکرار مقدار ویژگی alt در ویژگی عنوانی که برای همان تصویر اعلام شده است، خودداری کنید. انجام این کار ممکن است باعث شود برخی از خوانندگان صفحه نمایش، متن یکسانی را دو بار اعلام کنند و یک تجربه گیج کننده ایجاد کنند.
همچنین نباید از ویژگی عنوان به عنوان اطلاعات تکمیلی برای همراهی با توضیحات alt تصویر استفاده شود. اگر تصویری به عنوان عنوان نیاز دارد، از عناصر figure و figcaption استفاده کنید.
مقدار ویژگی عنوان معمولاً به عنوان یک راهنمای ابزار به کاربر ارائه میشود که کمی پس از توقف حرکت مکان نما روی تصویر ظاهر میشود. اگرچه این میتواند اطلاعات اضافی را در اختیار کاربر قرار دهد، اما نباید فرض کنید که کاربر هرگز آن را خواهد دید: کاربر ممکن است فقط صفحه کلید یا صفحه لمسی داشته باشد. اگر اطلاعاتی دارید که برای کاربر به ویژه مهم یا ارزشمند است، آن را به صورت درون خطی با استفاده از یکی از روشهای ذکر شده در بالا به جای استفاده از عنوان ارائه دهید.
استفاده از ویژگی عنوان HTML - بهروزرسانی شده | Vispero
مثال زیر یک تصویر را در صفحه جاسازی میکند و متن جایگزین را برای دسترسیپذیری در آن قرار میدهد.
این مثال بر اساس مثال قبلی ساخته شده و نشان میدهد که چگونه تصویر را به یک لینک تبدیل کنید. برای انجام این کار، تگ را درون قرار دهید. شما باید متن جایگزین را طوری بنویسید که منبعی را که لینک به آن اشاره میکند، توصیف کند، گویی که از یک لینک متنی استفاده میکنید.
در این مثال، ما یک ویژگی srcset را با ارجاع به نسخهای با وضوح بالا از لوگو اضافه میکنیم؛ این به جای تصویر src در دستگاههای با وضوح بالا بارگذاری میشود. تصویری که در ویژگی src به آن ارجاع داده شده است، در مرورگرهایی که از srcset پشتیبانی میکنند، به عنوان یک کاندید ۱x محسوب میشود.
استفاده از ویژگیهای srcset و sizes
ویژگی src در مرورگرهایی که از srcset پشتیبانی میکنند، زمانی که توصیفگر w گنجانده شده باشد، نادیده گرفته میشود. هنگامی که شرط رسانه () مطابقت داشته باشد، تصویر با عرض ۲۰۰ پیکسل بارگذاری میشود (تصویری که بیشترین تطابق را با ۲۰۰ پیکسل دارد)، در غیر این صورت تصویر دیگر بارگذاری خواهد شد.
برای دیدن تغییر اندازه در عمل، مثال را در یک صفحه جداگانه مشاهده کنید، تا بتوانید واقعاً اندازه ناحیه محتوا را تغییر دهید.
نگرانیهای امنیتی و حریم خصوصی
| مشخصه | توضیحات |
|---|
| دسته بندی محتوا | Flow content, phrasing content, embedded content, palpable content. اگر عنصری دارای ویژگی usemap باشد، آن عنصر نیز بخشی از دسته محتوای تعاملی است. |
| محتوای مجاز | هیچ؛ این یک عنصر پوچ است. |
| حذف برچسب | باید دارای تگ شروع باشد و نباید تگ پایان داشته باشد. |
| والدین مجاز | هر عنصری که محتوای جاسازیشده را میپذیرد.
|
| نقش ضمنی ARIA | با ویژگی alt غیر خالی یا بدون ویژگی alt: img
با ویژگی alt خالی: presentation |
| نقشهای مجاز ARIA | با ویژگی alt غیر خالی:
button
checkbox
link
menuitem
menuitemcheckbox
menuitemradio
option
progressbar
scrollbar
separator
slider
switch
tab
treeitem
با ویژگی alt خالی، none یا presentation
بدون ویژگی alt، هیچ نقشی مجاز نیست |
| رابط DOM | HTMLImageElement |
را ببینید.
استفاده از انواع رمزگشایی مختلف میتواند منجر به تفاوتهای قابل توجهتری هنگام درج پویای عناصر
در DOM از طریق جاوا اسکریپت شود.
مقادیر مجاز:
- sync
تصویر را همزمان با رندر کردن محتوای DOM دیگر رمزگشایی کنید و همه چیز را با هم ارائه دهید.
- async
تصویر را پس از رندر کردن و ارائه محتوای DOM دیگر، به صورت غیرهمزمان رمزگشایی کنید.
- auto
هیچ ترجیحی برای حالت رمزگشایی وجود ندارد؛ مرورگر تصمیم میگیرد که چه چیزی برای کاربر بهتر است. این مقدار پیشفرض است.
elementtiming
تصویر را برای مشاهده توسط API PerformanceElementTiming علامتگذاری میکند. مقدار داده شده به عنوان شناسهای برای عنصر تصویر مشاهده شده تبدیل میشود. همچنین به صفحه ویژگی زمانبندی عنصر مراجعه کنید.
fetchpriority
نشانهای از اولویت نسبی برای استفاده هنگام واکشی تصویر ارائه میدهد. مقادیر مجاز:
- high
تصویر را با اولویت بالا نسبت به سایر تصاویر دریافت کنید.
- low
تصویر را با اولویت پایین نسبت به سایر تصاویر دریافت کنید.
- auto
برای اولویت واکشی اولویتی تعیین نکنید. این پیشفرض است. در صورتی که هیچ مقداری تنظیم نشده باشد یا مقدار نامعتبری تنظیم شده باشد، استفاده میشود.
height
ارتفاع ذاتی تصویر، بر حسب پیکسل. باید یک عدد صحیح بدون واحد باشد.
گنجاندن ارتفاع و عرض، نسبت ابعاد تصویر را قادر میسازد تا قبل از بارگذاری تصویر توسط مرورگر محاسبه شود. این نسبت ابعاد برای ذخیره فضای مورد نیاز برای نمایش تصویر، کاهش یا حتی جلوگیری از تغییر طرحبندی هنگام دانلود و نمایش تصویر روی صفحه استفاده میشود. کاهش تغییر طرحبندی، جزء اصلی تجربه کاربری خوب و عملکرد وب است.
ismap
این ویژگی بولی نشان میدهد که تصویر بخشی از یک
است. در این صورت، مختصاتی که کاربر روی تصویر کلیک کرده است به سرور ارسال میشود.
توجه: این ویژگی فقط در صورتی مجاز است که عنصر
از نسل یک عنصر
با ویژگی href معتبر باشد. این به کاربران بدون دستگاههای اشارهگر، یک مقصد جایگزین میدهد.
loading
نشان میدهد که مرورگر چگونه باید تصویر را بارگذاری کند:
- eager
تصویر را بلافاصله بارگذاری میکند، صرف نظر از اینکه تصویر در حال حاضر در نمای بصری است یا خیر (این مقدار پیشفرض است).
- lazy
بارگذاری تصویر را تا زمانی که به فاصله محاسبهشدهای از viewport، مطابق تعریف مرورگر، برسد، به تعویق میاندازد.
بارگذاری lazy از پهنای باند شبکه و ذخیرهسازی مورد نیاز برای مدیریت تصویر تا زمانی که به طور معقولی مطمئن شود که به آن نیاز خواهد بود، جلوگیری میکند. این امر عملکرد را در اکثر موارد استفاده معمول بهبود میبخشد.
در حالی که ویژگیهای عرض و ارتفاع صریح برای همه تصاویر برای جلوگیری از تغییر طرح توصیه میشوند، این ویژگیها به ویژه برای تصاویر lazy-loaded مهم هستند. تصاویر lazy-loaded هرگز بارگیری نمیشوند اگر با قسمت قابل مشاهده یک عنصر تلاقی نداشته باشند، حتی اگر بارگیری آنها این قسمت را تغییر دهد، زیرا تصاویر بارگذاری نشده دارای عرض و ارتفاع 0 هستند. وقتی محتوای قابل مشاهده در viewport در وسط خواندن آن دوباره جریان مییابد، تجربه کاربری حتی مختلکنندهتری ایجاد میکند.
تصاویر lazy-loaded واقع در visual viewport ممکن است هنگام اجرای رویداد Window load هنوز قابل مشاهده نباشند. دلیل این امر این است که این رویداد بر اساس تصاویر eager-loaded اجرا میشود - تصاویر lazy-loaded حتی اگر در هنگام بارگذاری اولیه صفحه در visual viewport قرار داشته باشند، در نظر گرفته نمیشوند.
بارگذاری فقط زمانی به تعویق میافتد که جاوا اسکریپت فعال باشد. این یک اقدام ضد ردیابی است، زیرا اگر یک عامل کاربر از بارگذاری تنبل در هنگام غیرفعال بودن اسکریپت پشتیبانی کند، همچنان یک سایت میتواند موقعیت تقریبی اسکرول کاربر را در طول یک جلسه ردیابی کند، با قرار دادن استراتژیک تصاویر در نشانهگذاری صفحه به گونهای که سرور بتواند تعداد تصاویر درخواستی و زمان آنها را ردیابی کند.
referrerpolicy
رشتهای که نشان میدهد هنگام دریافت منبع از کدام ارجاعدهنده استفاده شود:
- no-referrer: هدر ارجاعدهنده ارسال نخواهد شد.
- no-referrer-when-downgrade: هدر ارجاعدهنده بدون TLS (HTTPS) به مبدأها ارسال نخواهد شد.
- origin: ارجاعدهنده ارسال شده به مبدأ صفحه ارجاعدهنده محدود خواهد شد: طرح، میزبان و پورت آن.
- origin-when-cross-origin: ارجاعدهنده ارسال شده به مبدأهای دیگر محدود به طرح، میزبان و پورت خواهد بود. پیمایشها در همان مبدأ همچنان شامل مسیر خواهند بود.
- same-origin: یک ارجاعدهنده برای همان مبدا ارسال میشود، اما درخواستهای cross-origin حاوی اطلاعات ارجاعدهنده نخواهند بود.
- strict-origin: فقط زمانی که سطح امنیتی پروتکل ثابت بماند، مبدا سند را به عنوان ارجاعدهنده ارسال کنید (HTTPS→HTTPS)، اما آن را به مقصدی با امنیت کمتر ارسال نکنید (HTTPS→HTTP).
- strict-origin-when-cross-origin (پیشفرض): هنگام انجام درخواست same-origin، یک URL کامل ارسال کنید، فقط زمانی که سطح امنیتی پروتکل ثابت بماند، مبدا را ارسال کنید (HTTPS→HTTPS) و هیچ هدری را به مقصدی با امنیت کمتر ارسال نکنید (HTTPS→HTTP).
- unsafe-url: ارجاعدهنده شامل مبدا و مسیر خواهد بود (اما قطعه، رمز عبور یا نام کاربری را شامل نمیشود). این مقدار ناامن است، زیرا مبداها و مسیرها را از منابع محافظتشده با TLS به مبداهای ناامن نشت میدهد.
sizes
یک یا چند مقدار که با کاما از هم جدا شدهاند، که میتوانند اندازههای منبع یا کلمه کلیدی auto باشند. این مشخصات ایجاب میکند که ویژگی اندازهها فقط زمانی وجود داشته باشد که srcset از توصیفگرهای عرض استفاده کند.
- اندازه منبع
اندازه منبع شامل موارد زیر است:
۱. یک شرط رسانه، که برای آخرین مورد در لیست حذف شده است.
۲. یک مقدار اندازه منبع.
به عنوان مثال، اندازه منبع زیر استفاده از یک منبع تصویر با عرض ۱۰۰۰ پیکسل را در صورتی پیشنهاد میکند که عرض نمای دید ۵۰۰ پیکسل یا کمتر باشد.
شرطهای رسانه ویژگیهای نمای دید را توصیف میکنند، نه تصویر. از آنجا که یک توصیفگر اندازه منبع، عرض مورد استفاده برای تصویر را در طول طرحبندی مشخص میکند، شرط رسانه معمولاً (اما نه لزوماً) بر اساس عرض است.
مقادیر اندازه منبع، اندازه نمایش مورد نظر تصویر را مشخص میکنند. مرورگرها از اندازه منبع فعلی برای انتخاب یکی از منابع ارائه شده توسط ویژگی srcset استفاده میکنند، زمانی که آن منابع با استفاده از توصیفگرهای عرض (w) توصیف میشوند. مقدار w که در sizes تعریف شده است، عرض پیشفرض طرحبندی تصویر را تعیین میکند. در صورت عدم وجود CSS، مرورگر تصویر را در این اندازه، صرف نظر از ابعاد فیزیکی پیکسل فایل دانلود شده، رندر میکند.
مقدار اندازه منبع میتواند هر طول غیر منفی باشد. نباید از توابع CSS غیر از توابع ریاضی استفاده کند. واحدها مانند پرسوجوهای رسانهای تفسیر میشوند، به این معنی که تمام واحدهای طول نسبی نسبت به ریشه سند نسبت به عنصر
هستند. به عنوان مثال، مقدار em نسبت به اندازه فونت ریشه است، نه اندازه فونت تصویر. مقادیر درصد مجاز نیستند. اگر ویژگی sizes ارائه نشده باشد، مقدار پیشفرض آن 100vw (عرض viewport) است.
- auto
کلمه کلیدی auto نشان میدهد که مرورگر باید از عرض طرحبندی مورد انتظار عنصر برای انتخاب تصویر برای نمایش استفاده کند. یعنی باید از اندازه واقعی تصویر استفاده کند که پس از اعمال طرحبندی از HTML و CSS محاسبه میشود. این فقط زمانی معتبر است که با
ترکیب شود، زیرا انتظار میرود صفحه تا زمان بارگذاری تصویر، CSS و سایر اطلاعات طرحبندی را داشته باشد.
استفاده از حالت خودکار شما را از تعیین دو بارهی شرایط رسانهی طرحبندی بینیاز میکند: یک بار برای طرحبندی، و یک بار برای انتخاب تصویر مناسب برای دریافت و نمایش.
اگر حالت خودکار نتواند آن را تعیین کند - یا به این دلیل که مرورگر از آن پشتیبانی نمیکند، یا به این دلیل که تصویر هنوز اندازهی طرحبندی ندارد - مرورگر برای تعیین عرض به اندازههای منبع در لیست، سپس به ویژگیهای عرض/ارتفاع تعریفشده روی عنصر، و در نهایت به اندازهی ذاتی پیشفرض برای عناصر
که در شیوهنامهی عامل کاربر تعریف شده است (300 پیکسل در 150 پیکسل) مراجعه میکند.
برای سازگاری بهتر با مرورگرهایی که از حالت خودکار پشتیبانی نمیکنند، میتوانید اندازههای جایگزین را پس از حالت خودکار در ویژگی اندازهها قرار دهید. همچنین باید ویژگیهای عرض و ارتفاع عنصر را بر اساس ابعاد ذاتی بزرگترین تصویر در مجموعهی src خود تنظیم کنید تا مرورگر بتواند با استفاده از نسبت ابعاد صحیح، فضا را رزرو کند:
درون یک عنصر
یا
باشد، نمیتوانید از این ویژگی استفاده کنید.
