تصاویر

تصاویر تزئینی، مانند شیب پس‌زمینه روی دکمه‌ها یا تصاویر پس‌زمینه در بخش‌هایی از محتوا یا کل صفحه، نمایشی هستند و باید با 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 .

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

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