تصاویر

تصاویر تزئینی، مانند شیب پس‌زمینه روی دکمه‌ها یا تصاویر پس‌زمینه در بخش‌هایی از محتوا یا کل صفحه، نمایشی هستند و باید با CSS اعمال شوند. هنگامی که یک تصویر زمینه را به یک سند اضافه می کند، محتوا است و باید با HTML جاسازی شود.

روش اصلی برای گنجاندن تصاویر، تگ <img> با ویژگی src است که به منبع تصویر ارجاع می دهد و ویژگی alt تصویر را توصیف می کند.

<img src="images/eve.png" alt="Eve">

هر دو ویژگی srcset در <img> و عنصر <picture> راهی را برای گنجاندن چندین منبع تصویر با درخواست‌های رسانه مرتبط، که هر کدام با یک منبع تصویر بازگشتی همراه است، ارائه می‌دهند، که امکان ارائه مناسب‌ترین فایل تصویری را بر اساس وضوح دستگاه، قابلیت‌های مرورگر و اندازه درگاه نمایش فراهم می‌کند. ویژگی srcset امکان ارائه چندین نسخه تصویر را بر اساس وضوح و به همراه ویژگی sizes ، اندازه درگاه دید مرورگر فراهم می‌کند.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

این را می توان با عنصر <picture> به همراه <source> فرزندان نیز انجام داد که یک <img> به عنوان منبع پیش فرض می گیرد.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

علاوه بر این روش‌های داخلی پاسخ‌گوی تصویر HTML، HTML همچنین عملکرد رندر تصویر را از طریق ویژگی‌های مختلف بهبود می‌بخشد. تگ <img> و در نتیجه دکمه‌های ارسال گرافیکی <input type="image"> می‌تواند شامل ویژگی‌های height و width برای تنظیم نسبت تصویر برای کاهش تغییر طرح‌بندی محتوا باشد. ویژگی lazy بارگذاری تنبل را فعال می کند.

HTML همچنین از گنجاندن تصاویر SVG با استفاده از <svg> به طور مستقیم پشتیبانی می کند، اگرچه تصاویر SVG با پسوند .svg (یا به عنوان داده-uri ) را می توان با استفاده از عنصر <img> جاسازی کرد.

حداقل، هر تصویر پیش زمینه باید دارای ویژگی های src و alt باشد.

فایل src مسیر و نام فایل تصویر تعبیه شده است. ویژگی src برای ارائه URL تصویر استفاده می شود. سپس مرورگر دارایی را واکشی می کند و آن را به صفحه نمایش می دهد. این ویژگی توسط <img> مورد نیاز است. بدون آن، چیزی برای ارائه وجود ندارد.

ویژگی alt متن جایگزینی را برای تصویر ارائه می‌کند و برای کسانی که نمی‌توانند صفحه را ببینند (به موتورهای جستجو و فن‌آوری‌های کمکی و حتی الکسا، سیری و دستیار گوگل فکر کنید) توضیحی از تصویر ارائه می‌کند و در صورت بار نشدن تصویر ممکن است توسط مرورگر نمایش داده شود. علاوه بر کاربرانی با شبکه های کند یا پهنای باند محدود، متن alt در ایمیل های HTML فوق العاده مفید است، زیرا بسیاری از کاربران تصاویر را در برنامه های ایمیل خود مسدود می کنند.

<img src="path/filename" alt="descriptive text" />

اگر تصویر از نوع فایل SVG است، role="img" نیز وارد کنید، که به دلیل اشکالات VoiceOver ضروری است.

<img src="switch.svg" alt="light switch" role="img" />

توضیحات تصویر alt موثر بنویسید

هدف ویژگی‌های Alt کوتاه و مختصر است و تمام اطلاعات مرتبطی را که تصویر منتقل می‌کند، ارائه می‌کند، در حالی که اطلاعاتی را که برای محتوای دیگر در سند اضافی هستند یا در موارد دیگر مفید نیستند حذف می‌کنند. در نوشتن متن، لحن باید منعکس کننده لحن سایت باشد.

برای نوشتن متن جایگزین موثر، تصور کنید که کل صفحه را برای شخصی می خوانید که نمی تواند آن را ببیند. با استفاده از عنصر معنایی <img> ، کاربران و ربات های صفحه خوان مطلع می شوند که عنصر یک تصویر است. اضافه کردن "این یک تصویر/عکس از صفحه نمایش/عکس از" در alt است اضافی است. کاربر نیازی به دانستن وجود تصویر ندارد، اما باید بداند که تصویر چه اطلاعاتی را منتقل می کند.

به طور معمول، شما نمی گویید: "این یک تصویر دانه دانه از سگی است که کلاه قرمزی بر سر دارد." در عوض، آنچه را که تصویر منتقل می‌کند در رابطه با زمینه بقیه سند منتقل می‌کنید. بسته به زمینه و محتوای متن اطراف، آنچه منتقل می کنید تغییر می کند.

به عنوان مثال، عکس یک سگ بسته به زمینه، به روش های مختلفی توصیف می شود. اگر Fluffy یک آواتار در کنار بررسی غذای سگ Yuckymeat باشد، alt="Fluffy" کافی است.

اگر عکس بخشی از صفحه فرزندخواندگی فلافی در یک وب سایت پناهگاه حیوانات باشد، مخاطب هدف والدین سگ آینده است. متن باید اطلاعات منتقل شده در تصویر را توصیف کند که مربوط به یک گیرنده است و در متن اطراف تکرار نشده است. توضیحات طولانی تر، مانند alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth" مناسب است. متن صفحه فرزندخواندگی به طور کلی شامل گونه، نژاد، سن و جنسیت حیوان خانگی قابل پذیرش است، بنابراین نیازی به تکرار در متن جایگزین نیست. اما بیوگرافی نوشته شده سگ احتمالاً شامل طول مو، رنگ یا ترجیحات اسباب بازی نیست.

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

هنگام استفاده از تصاویر برای شمایل نگاری، از آنجایی که ویژگی alt نام قابل دسترسی را ارائه می دهد، معنای نماد را منتقل کنید، نه توضیحی از تصویر. برای مثال، ویژگی alt نماد ذره بین search است. نمادی که به نظر می رسد یک خانه دارای home به عنوان متن جایگزین است. شرح نماد دیسک فلاپی 5 اینچی save است. اگر از دو نماد Fluffy برای نشان دادن بهترین شیوه‌ها و ضد الگوها استفاده می‌شود، سگ خندان در کلاه سبز می‌تواند مجموعه alt="good" داشته باشد، در حالی که سگ خرخر با کلاه قرمز ممکن است alt="bad" را بخواند. همانطور که گفته شد، فقط از نماد نگاری استاندارد استفاده کنید و اگر از نمادهای غیر استاندارد مانند Fluffy خوب و بد استفاده می کنید، یک افسانه اضافه کنید مطمئن شوید که آیکون ها تنها راه های رمزگشایی معنای عناصر رابط کاربری شما نیستند.

اگر تصویر یک اسکرین شات یا یک نمودار است، به جای توصیف ظاهر، آنچه را از تصویر آموخته اید بنویسید. در حالی که یک تصویر قطعاً می تواند ارزش هزار کلمه را داشته باشد، توصیف باید به طور مختصر همه چیزهایی را که آموخته می شود بیان کند.

اطلاعاتی را که کاربر قبلاً از زمینه می داند و در غیر این صورت در محتوا از آنها مطلع شده است حذف کنید. به عنوان مثال، اگر در یک صفحه آموزشی در مورد تغییر تنظیمات مرورگر هستید و صفحه مربوط به کلیک کردن روی نمادها در مرورگر کروم است، URL صفحه در تصویربرداری صفحه مهم نیست. alt را به موضوع مورد نظر محدود کنید: نحوه تغییر تنظیمات.

alt ممکن است "نماد تنظیمات در نوار پیمایش زیر فیلد جستجو است." «اسکرین‌شات» یا «کارگاه یادگیری ماشینی» را وارد نکنید، زیرا کاربر نیازی ندارد بداند که این یک اسکرین‌شات است و نیازی هم ندارد که بداند نویسنده فناوری هنگام نوشتن دستورالعمل‌ها، کجا در حال گشت و گذار بوده است. توصیف تصویر بر اساس زمینه ای است که چرا تصویر در وهله اول گنجانده شده است.

اگر تصویر صفحه نحوه یافتن شماره نسخه مرورگر را با رفتن به chrome://version/ نشان می‌دهد، URL را به عنوان دستورالعمل در محتوای صفحه قرار دهید و یک رشته خالی به عنوان ویژگی alt ارائه کنید زیرا تصویر هیچ اطلاعاتی را ارائه نمی‌کند که در متن اطراف وجود ندارد.

اگر تصویر هیچ اطلاعات اضافی ارائه نمی دهد یا صرفاً تزئینی است، مشخصه باید همچنان وجود داشته باشد، درست به عنوان یک رشته خالی.

<img src="svg/magazine.svg" alt="" role="none" />

MachineLearningWorkshop.com دارای هفت تصویر پیش‌زمینه است، بنابراین هفت تصویر با ویژگی‌های alt: یک سوئیچ چراغ تخم مرغ عید پاک، یک نماد دستی، دو عکس بیوگرافی از هال و ایو، و سه آواتار یک مخلوط‌کن، یک جاروبرقی و یک توستر. تصویر پیش زمینه ای که شبیه یک مجله است تنها تصویری است که صرفاً تزئینی است. این صفحه دارای دو تصویر پس زمینه نیز می باشد. این تصاویر تزئینی هستند و با CSS اضافه شده اند، بنابراین غیر قابل دسترسی هستند.

این مجله، صرفاً تزئینی است، دارای ویژگی alt خالی است و role none به عنوان تصویر یک SVG صرفاً نمایشی است. اگر معنی دار باشد، تصاویر SVG باید شامل role="img" باشند.

<img src="svg/magazine.svg" alt="" role="none" />

سه بررسی در پایین صفحه وجود دارد که هر کدام دارای تصویری از پوستر هستند. معمولاً متن alt نام شخص تصویر شده است.

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

در عوض، از آنجایی که این یک صفحه شوخی است، باید آنچه را که ممکن است برای کاربران کم بینا آشکار نباشد، منتقل کنید تا طنز را از دست ندهند. ما به جای استفاده از نام کاراکتر از تابع ماشین اصلی به عنوان alt استفاده می کنیم:

<img src="images/blender.svg" alt="blender" role="img" />

عکس های مربیان فقط آواتار نیستند: آنها تصاویر بیوگرافی هستند و بنابراین توضیحات دقیق تری دریافت می کنند.

اگر این یک سایت واقعی بود، حداقل توصیف ظاهری معلم را ارائه می‌کردید، بنابراین یک دانش‌آموز آینده نگر ممکن است آنها را هنگام ورود به کلاس تشخیص دهد.

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

از آنجا که این یک سایت جوک است، به جای آن اطلاعاتی را که در زمینه جوک مرتبط است ارائه دهید:

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

اگر صفحه را برای یکی از دوستانتان تلفنی می‌خوانید، برای آنها اهمیتی نمی‌دهد که نقطه قرمز چگونه است. در این مورد، تاریخچه مرجع فیلم اهمیت دارد.

هنگام نوشتن متن توصیفی، در نظر بگیرید که تصویر چه اطلاعاتی مهم و مرتبط با کاربر را منتقل می کند و شامل آن می شود. به یاد داشته باشید، محتوای ویژگی alt برای یک تصویر بر اساس زمینه متفاوت است. تمام اطلاعات منتقل شده در تصویری که یک کاربر بینا می تواند به آن دسترسی داشته باشد و مرتبط با زمینه است، چیزی است که باید منتقل شود. هیچ چیز بیشتر آن را کوتاه، دقیق و مفید نگه دارید.

ویژگی های src و alt حداقل الزامات برای تصاویر جاسازی شده هستند. چند ویژگی دیگر وجود دارد که باید در مورد آنها بحث کنیم.

تصاویر واکنش گرا

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

ویژگی <img> srcset

ویژگی srcset پیشنهاد چندین فایل تصویری را امکان پذیر می کند، با مرورگر انتخاب تصویری که بر اساس درخواست های رسانه ای متعدد از جمله اندازه درگاه نمایش و وضوح صفحه نمایش درخواست کند.

برای هر عنصر <img> می‌تواند یک ویژگی srcset وجود داشته باشد، اما آن srcset می‌تواند به چندین تصویر پیوند دهد. ویژگی srcset لیستی از مقادیر جدا شده با کاما را می پذیرد، که هر کدام حاوی URL دارایی است و پس از آن یک فاصله به دنبال توصیفگرهایی برای آن گزینه تصویر وجود دارد. اگر از یک توصیف‌کننده عرض استفاده می‌شود، باید ویژگی sizes را با یک پرسش رسانه یا اندازه منبع برای هر گزینه srcset به غیر از گزینه آخر اضافه کنید. بخش‌های Learn که تصاویر واکنش‌گرا را srcset سینتکس‌های srcset و توصیفی پوشش می‌دهد ارزش خواندن دارد.

در صورت وجود مطابقت، تصویر srcset بر تصویر src اولویت دارد.

<picture> و <source>

روش دیگری برای ارائه منابع متعدد و اجازه دادن به مرورگر برای ارائه مناسب ترین دارایی، استفاده از عنصر <picture> است. عنصر <picture> یک عنصر محفظه برای چندین گزینه تصویر است که در تعداد نامحدودی از عناصر <source> و یک عنصر <img> مورد نیاز فهرست شده است.

ویژگی‌های <source> شامل srcset ، sizes ، media ، width و height است. ویژگی srcset برای img ، source و link مشترک است، اما عموماً کمی متفاوت در منبع پیاده‌سازی می‌شود، زیرا پرس‌وجوهای رسانه را می‌توان در ویژگی رسانه <srcset> فهرست کرد. <source> همچنین از فرمت های تصویر تعریف شده در ویژگی type پشتیبانی می کند.

مرورگر هر عنصر <source> را در نظر می گیرد و بهترین تطابق را از بین آنها انتخاب می کند. اگر هیچ منطبقی یافت نشد، URL ویژگی src عنصر <img> انتخاب می شود. نام قابل دسترسی از ویژگی alt در تودرتو <img> می آید. بخش‌های Learn که عنصر <picture> و نحو تجویزی را پوشش می‌دهند نیز ارزش خواندن دارند.

ویژگی های عملکرد اضافی

تعدادی ویژگی تصویر اضافی وجود دارد که می تواند عملکرد سایت شما را بهبود بخشد.

بارگذاری تنبل

ویژگی loading به مرورگر دارای JS می گوید که چگونه تصویر را بارگذاری کند. مقدار پیش‌فرض eager به این معنی است که تصویر بلافاصله با تجزیه HTML بارگیری می‌شود، حتی اگر تصویر خارج از نمای قابل مشاهده باشد. با تنظیم loading="lazy" بارگذاری تصویر به تعویق می افتد تا زمانی که به احتمال زیاد وارد نمای نمایش شود. "احتمالا" توسط مرورگر بر اساس فاصله تصویر از درگاه دید تعریف می شود. این با پیمایش کاربر به روز می شود. بارگذاری تنبل به صرفه جویی در پهنای باند و CPU کمک می کند و عملکرد را برای اکثر کاربران بهبود می بخشد. اگر جاوا اسکریپت غیرفعال باشد، به دلایل امنیتی، همه تصاویر به‌طور پیش‌فرض روی eager قرار می‌گیرند.

<img src="switch.svg" alt="light switch" loading="lazy" />

نسبت ابعاد

مرورگرها پس از دریافت HTML شروع به رندر کردن می‌کنند و در صورت مواجهه با آن، درخواست‌هایی برای دارایی‌ها ارائه می‌کنند. این بدان معناست که مرورگر از قبل HTML را هنگامی که با تگ <img> روبرو می شود و درخواست می کند، ارائه می دهد. و بارگیری تصاویر ممکن است کمی طول بکشد. به‌طور پیش‌فرض، مرورگرها فضایی به جز اندازه مورد نیاز برای ارائه متن alt برای تصاویر رزرو نمی‌کنند.

عنصر <img> همیشه از ویژگی‌های height و width بدون واحد پشتیبانی می‌کند. این ویژگی ها به نفع CSS از کار افتادند. CSS ممکن است ابعاد تصویر را تعریف کند، اغلب یک بعد واحد مانند max-width: 100%; برای اطمینان از حفظ نسبت تصویر.

از آنجایی که CSS معمولاً در <head> گنجانده می شود، قبل از اینکه با <img> مواجه شود تجزیه می شود. اما بدون ذکر صریح height یا نسبت ابعاد، فضای رزرو شده ارتفاع (یا عرض) متن alt است.

هنگامی که توسعه دهندگان فقط عرض را اعلام می کنند، دریافت و ارائه تصاویر منجر به تغییر چیدمان تجمعی می شود که به حیاتی وب آسیب می رساند. برای حل این مشکل، مرورگرها از نسبت تصویر پشتیبانی می کنند. شامل ویژگی‌های height و width در <img> به‌عنوان نکات اندازه‌گیری عمل می‌کند، به مرورگر نسبت ابعاد را اطلاع می‌دهد، و این امکان را فراهم می‌کند که فضای مناسبی برای رندر نهایی تصویر رزرو شود. هنگامی که مرورگر با یک بعد واحد مواجه می شود، مانند مثال 50% ما، فضایی را برای تصویر حفظ می کند که به بعد CSS و با بعد دیگر نسبت ابعاد عرض به ارتفاع را حفظ می کند.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

تصاویر شما پاسخگو هستند اگر CSS به درستی تنظیم شده باشد تا آنها را پاسخگو کند. بله، مقادیر height و width بدون واحد اضافه شده با CSS لغو می شوند. هدف از گنجاندن این ویژگی‌ها، رزرو فضا در نسبت تصویر مناسب، بهبود عملکرد با کاهش تغییر چیدمان است. بارگیری صفحه همچنان تقریباً به همان اندازه طول می‌کشد، اما وقتی تصویر روی صفحه نمایش داده می‌شود، رابط کاربری نمی‌پرد.

سایر ویژگی های تصویر

عنصر <img> همچنین از ویژگی‌های crossorigin ، decoding ، referrerpolicy ، و در مرورگرهای مبتنی بر Blink، ویژگی‌های fetchpriority پشتیبانی می‌کند. به ندرت استفاده می شود، اگر تصویر بخشی از نقشه سمت سرور است، ویژگی ismap boolean را اضافه کنید و <img> در پیوندی برای کاربران بدون دستگاه اشاره گر قرار دهید.

ویژگی ismap در <input type="image" name="imageSubmitName"> ضروری نیست یا حتی پشتیبانی نمی‌شود، زیرا مختصات x و y مکان کلیک در حین ارسال فرم ارسال می‌شوند و در صورت وجود، مقادیر را به نام ورودی اضافه می‌کنند. به عنوان مثال، چیزی مانند &imageSubmitName.x=169&imageSubmitName.y=66 همراه با فرم ارسال می شود زمانی که کاربر روی تصویر کلیک می کند و آن را ارسال می کند. اگر تصویر دارای ویژگی name نباشد، x و y ارسال می‌شوند: &x=169&y=66 .

درک خود را بررسی کنید

دانش خود را از تصاویر تست کنید.