یک مقالهٔ تصویری باید در صفحهٔ بزرگ جزئیات کافی داشته باشد و در موبایل به انتقال فایل غیرضروری وابسته نباشد. کوچک کردن عرض تصویر با CSS، به‌تنهایی تضمین نمی‌کند که مرورگر فایل کوچک‌تری دریافت کند. همچنین تصویر سبک اگر موضوعش با متن ارتباط نداشته باشد، ارزش آموزشی کمی دارد. این راهنما یک مسیر پیشنهادی برای آماده‌سازی و بررسی تصاویر مقاله ارائه می‌کند؛ هدف آن کیفیت نمایش و فهم محتواست، نه وعدهٔ رتبهٔ مشخص در جست‌وجو.
مبنای نکات HTML، راهنمای تصاویر واکنش‌گرا در MDN و مرجع عنصر img است. برای متن جایگزین نیز از آموزش تصاویر W3C WAI استفاده شده است. شیوهٔ انتخاب صحنه، نام‌گذاری فایل و بازبینی مقاله در بخش‌های بعدی، پیشنهاد عملی این نوشته است.
۱. نقش تصویر و محدودهٔ نمایش آن را تعیین کنید
پیش از خروجی گرفتن، مشخص کنید تصویر چه چیزی را توضیح می‌دهد. کاور، موضوع کلی مقاله را معرفی می‌کند؛ تصویر زیر سرفصل باید مسئلهٔ همان بخش را روشن کند. برای مقالهٔ خطای فرم، نمایش پیام خطا و حفظ ورودی کاربر از یک لپ‌تاپ تزئینی مفیدتر است. یک جملهٔ هدف کنار هر تصویر بنویسید تا هنگام انتخاب خروجی، معیار روشن داشته باشید.
محدودهٔ نمایش نیز به قالب وابسته است. تصویری که در کارت کوچک فهرست دیده می‌شود، با تصویر داخل بدنهٔ مقاله استفادهٔ یکسانی ندارد. نسبت تصویر، عرض ستون و فضای لازم برای زیرنویس را پیش از تولید اندازه‌ها بررسی کنید. اگر نمودار برچسب‌های ریز دارد، فقط بزرگ بودن فایل اصلی آن را در موبایل خوانا نمی‌کند؛ شاید ترکیب صحنه به اصلاح نیاز داشته باشد.
در مسیر پیشنهادی ما، فایل اصلی برای بازبینی نگهداری می‌شود و خروجی‌های وب از همان نسخهٔ منتخب ساخته می‌شوند. این کار امکان اصلاح اندازه و فشرده‌سازی را بدون تولید دوبارهٔ تصویر فراهم می‌کند. نگهداری نسخهٔ اصلی در فضای پروژه با انتشار آن برای بازدیدکننده تفاوت دارد. فایل‌هایی که برای تحویل یا بازگردانی لازم‌اند، الزاماً نباید همگی در صفحه بارگذاری شوند.
۲. اندازه‌های جایگزین را با srcset و sizes معرفی کنید
مرورگر برای انتخاب منبع مناسب به اطلاعاتی فراتر از عرض CSS نیاز دارد. در روش توصیف عرض، srcset نسخه‌های تصویر و عرض واقعی آن‌ها را معرفی می‌کند و sizes دربارهٔ اندازهٔ مورد انتظار جای تصویر در چیدمان اطلاعات می‌دهد. مقدار sizes باید با قالب واقعی هماهنگ باشد؛ اعلام عرضی که با ستون مقاله فرق دارد، می‌تواند انتخاب فایل را از هدف طراحی دور کند.
برای نمونهٔ پیشنهادی، مقاله در موبایل تقریباً عرض محتوا را می‌گیرد و در دسکتاپ یک ستون محدود دارد. این تفاوت باید در قاعدهٔ sizes بازتاب پیدا کند. فهرست فایل‌ها نیز نباید نسخه‌هایی را معرفی کند که وجود ندارند یا عرضشان با توصیف اعلام‌شده متفاوت است. پس از ساخت خروجی‌ها، ابعاد واقعی فایل و مسیر درخواست را بررسی کنید؛ نام فایل به‌تنهایی اندازهٔ صحیح را ثابت نمی‌کند.
انتخاب نهایی منبع می‌تواند از شرایط مرورگر و تراکم نمایشگر اثر بگیرد. انتظار اینکه هر عرض موبایل همیشه دقیقاً یک فایل مشخص را انتخاب کند، معیار آزمون مناسبی نیست. معیار پیشنهادی ما این است که منبع انتخاب‌شده معتبر باشد، جزئیات ضروری خوانا بمانند و فایل بی‌دلیل نامتناسب با جای تصویر نباشد. نتیجه را با currentSrc و ابزار شبکهٔ مرورگر بررسی کنید، نه با حدس از ظاهر صفحه.
۳. ابعاد و زمان بارگذاری را با نقش تصویر هماهنگ کنید
ثبت عرض و ارتفاع ذاتی تصویر به مرورگر برای در نظر گرفتن نسبت و فضا کمک می‌کند. در قالب، می‌توان نمایش را با عرض انعطاف‌پذیر و ارتفاع متناسب تنظیم کرد. تصویر کشیده یا فشرده‌شده ممکن است یک نمودار فنی را گمراه‌کننده کند. پیشنهاد این مقاله، بررسی هم‌زمان ابعاد HTML، نسبت فایل و قواعد CSS است تا تغییر یکی، نمایش بقیه را به‌هم نزند.
زمان دریافت تصویر را نیز با جای آن هماهنگ کنید. تصویر آغاز مقاله که بازدیدکننده فوراً می‌بیند با تصویر بخش پایانی یکسان نیست. بارگذاری تنبل برای تصاویر پایین صفحه می‌تواند مناسب باشد، اما اعمال آن به همهٔ تصاویر بدون بررسی، تصمیم کاملی نیست. برای کاور، رفتار بارگذاری را در همان قالب و شبکهٔ نماینده بررسی کنید؛ از یک قاعدهٔ عمومی، تضمین سرعت استخراج نکنید.
خروجی فشرده را کنار نسخهٔ اصلی بازبینی کنید. خطوط ظریف، رقم‌ها و مرزهای نمودار ممکن است در فشرده‌سازی بیش از حد آسیب ببینند. صرف کاهش حجم، موفقیت نیست. در مسیر پیشنهادی، چند خروجی با تنظیم متفاوت روی یک تصویر نماینده مقایسه می‌شوند و گزینه‌ای انتخاب می‌شود که کیفیت اطلاعاتی را حفظ کند. سپس تصاویر متفاوت نیز بررسی می‌شوند؛ یک تنظیم برای همهٔ صحنه‌ها نتیجهٔ یکسان نمی‌دهد.
۴. متن جایگزین و برش را در خدمت معنی قرار دهید
متن جایگزین باید نقش تصویر در همان متن را بیان کند. برای شکل آموزشی، توضیح رابطهٔ اصلی از تکرار عنوان مقاله مفیدتر است. اگر تصویر نشان می‌دهد سند بازنشسته پیش از پاسخ رد می‌شود، همین رابطه را کوتاه توضیح دهید. افزودن فهرست طولانی کلمات کلیدی، جای توصیف روشن را نمی‌گیرد و می‌تواند دریافت مطلب را برای خواننده دشوارتر کند.
W3C میان تصویر اطلاعاتی، تزئینی و پیچیده تفاوت می‌گذارد. تصویر پیچیده ممکن است به توضیح متنی کامل‌تری در بدنه نیاز داشته باشد. زیرنویس هم نقش جداگانه‌ای دارد: می‌تواند محدودیت یا نکتهٔ مورد توجه را بیان کند. در مثال پیشنهادی، اگر شکل با هوش مصنوعی تولید شده و نمایش مفهومی است، این موضوع در زیرنویس روشن می‌شود تا مخاطب آن را اسکرین‌شات محصول واقعی تلقی نکند.
برش مخصوص موبایل را فقط زمانی انتخاب کنید که معنی حفظ شود. حذف نیمهٔ یک مسیر خطا یا بریده شدن سرستون جدول می‌تواند تصویر زیبا ولی ناقص بسازد. عنصر picture برای بعضی نیازهای تغییر ترکیب مناسب است، اما فایل‌های جایگزین باید همان پیام را منتقل کنند. پیش از انتخاب برش، ترتیب خواندن شکل و متن توضیحی کنار آن را در اندازهٔ کوچک بررسی کنید.
۵. صفحهٔ واقعی را در چند اندازه و حالت بررسی کنید
آزمون نهایی باید روی مقالهٔ کامل انجام شود. کاور، تصاویر بخش‌ها، زیرنویس‌ها و فهرست سرفصل‌ها را با هم ببینید. در موبایل، نبود اسکرول افقی به‌تنهایی کافی نیست؛ جزئیات تصویر، طول زیرنویس و فاصلهٔ آن با متن بعدی نیز باید قابل دریافت باشند. در دسکتاپ بررسی کنید که تصویر بیش از حد کوچک یا ستون متن بیش از حد کشیده نشده باشد.
خرابی مسیر تصویر و نبود دریافت را نیز در نظر بگیرید. متن بدنه باید همچنان کار اصلی آموزش را انجام دهد و تصویر تنها محل توضیح یک تصمیم ضروری نباشد. متن جایگزین مفید کمک می‌کند، اما توضیح یک نمودار پیچیده را همیشه در چند واژه نمی‌توان جا داد. برای شکل‌های مهم، رابطهٔ مورد نظر را در پاراگراف همان بخش نیز توضیح دهید.
گزارش پیشنهادی بازبینی شامل اندازهٔ صفحه، مسیر منبع انتخاب‌شده، ابعاد واقعی، نتیجهٔ نمایش و هر محدودیت باقی‌مانده است. پس از تغییر قالب، همین نمونه‌ها را دوباره بررسی کنید، چون sizes و جای تصویر به چیدمان وابسته‌اند. یک مسیر تصویری خوب از انتخاب صحنه آغاز می‌شود و با بررسی صفحهٔ واقعی پایان می‌گیرد؛ تولید فایل زیبا فقط یکی از مراحل آن است.
اگر تصاویر پس از تغییر سیاست امنیتی صفحه نمایش داده نمی‌شوند، راهنمای انتشار تدریجی CSP را کنار بررسی مسیر فایل بخوانید. منبع مجاز تصویر و منبع انتخاب‌شدهٔ مرورگر، دو موضوع جدا در بررسی صفحه هستند.
منابع و مطالعهٔ بیشتر
بررسی منابع: ۲۲ مهر ۱۴۰۵. تحلیل‌ها و پیشنهادهای اجرایی، جمع‌بندی نویسنده‌اند.
