آموزش HTML : تصاویر

در ابتدا، وب فقط متن بود و واقعاً کسل‌کننده بود. خوشبختانه، خیلی طول نکشید که قابلیت جاسازی تصاویر (و سایر انواع محتوای جالب‌تر) در صفحات وب اضافه شد. در این مقاله، به طور مفصل به نحوه استفاده از عنصر <img>، از جمله اصول اولیه، حاشیه‌نویسی آن با زیرنویس با استفاده از <figure> و جزئیات ارتباط آن با تصاویر پس‌زمینه CSS خواهیم پرداخت.

چگونه یک تصویر را در صفحه وب قرار دهیم؟

   برای قرار دادن یک تصویر در صفحه وب، از عنصر استفاده می‌کنیم. این یک عنصر void است (به این معنی که نمی‌تواند هیچ محتوای فرزندی داشته باشد و نمی‌تواند تگ پایانی داشته باشد) که برای مفید بودن به دو ویژگی نیاز دارد: src و alt. ویژگی src شامل یک URL است که به تصویری که می‌خواهید در صفحه جاسازی کنید اشاره می‌کند. مانند ویژگی href برای عناصر ، ویژگی src می‌تواند یک URL نسبی یا یک URL مطلق باشد. بدون ویژگی src، یک عنصر img تصویری برای بارگذاری ندارد. ویژگی alt در زیر توضیح داده شده است. قبل از ادامه، باید مقدمه‌ای کوتاه بر URLها و مسیرها بخوانید تا حافظه خود را در مورد URLهای نسبی و مطلق به‌روز کنید. برای مثال، اگر تصویر شما dinosaur.jpg نام دارد و در همان دایرکتوری صفحه HTML شما قرار دارد، می‌توانید تصویر را به این صورت جاسازی کنید:

Copy

HTML

   اگر تصویر در زیرشاخه images بود که آن زیرشاخه در همان دایرکتوری صفحه HTML قرار داشت، آن را به این صورت جاسازی می‌کردید:

Copy

HTML

   موتورهای جستجو همچنین نام فایل‌های تصاویر را می‌خوانند و آنها را در سئو به حساب می‌آورند. بنابراین، باید نام فایل توصیفی برای تصویر خود انتخاب کنید؛ dinosaur.jpg بهتر از img835.png است. همچنین می‌توانید تصویر را با استفاده از URL مطلق آن جاسازی کنید، برای مثال:

Copy

HTML

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

   هرگز بدون اجازه، ویژگی src را به تصویری که در وب‌سایت شخص دیگری میزبانی شده است، اشاره نکنید. به این کار «هات‌لینکینگ» می‌گویند. این کار غیراخلاقی تلقی می‌شود، زیرا شخص دیگری هزینه پهنای باند را برای ارائه تصویر هنگام بازدید شخصی از صفحه شما پرداخت می‌کند. همچنین هیچ کنترلی بر حذف یا جایگزینی تصویر برای شما باقی نمی‌گذارد. قطعه کد قبلی، چه با URL مطلق و چه با URL نسبی، نتیجه زیر را به ما می‌دهد:

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

متن جایگزین

   ویژگی بعدی که بررسی خواهیم کرد alt است. مقدار آن قرار است توضیحی متنی از تصویر باشد، برای استفاده در موقعیت‌هایی که تصویر دیده نمی‌شود/نمایش داده نمی‌شود یا به دلیل اتصال اینترنت کند، رندر شدن آن زمان زیادی می‌برد. برای مثال، کد بالا را می‌توان به صورت زیر اصلاح کرد:

Copy

HTML

   ساده‌ترین راه برای آزمایش متن جایگزین، اشتباه تایپی عمدی در نام فایل است. برای مثال، اگر نام تصویر ما dinosooooor.jpg باشد، مرورگر تصویر را نمایش نمی‌دهد و به جای آن متن جایگزین را نمایش می‌دهد:

   بنابراین، چرا اصلاً باید متن جایگزین را ببینید یا به آن نیاز داشته باشید؟ این متن می‌تواند به دلایل مختلفی مفید باشد: - کاربر دچار اختلال بینایی است و از یک صفحه‌خوان برای خواندن وب برای خود استفاده می‌کند. در واقع، داشتن متن جایگزین برای توصیف تصاویر برای اکثر کاربران مفید است. - همانطور که در بالا توضیح داده شد، املای نام فایل یا مسیر ممکن است اشتباه باشد. - مرورگر از نوع تصویر پشتیبانی نمی‌کند. برخی از افراد هنوز از مرورگرهای فقط متنی مانند Lynx استفاده می‌کنند که متن جایگزین تصاویر را نمایش می‌دهد. - ممکن است بخواهید متنی را برای استفاده موتورهای جستجو ارائه دهید. به عنوان مثال، موتورهای جستجو می‌توانند متن جایگزین را با عبارات جستجو مطابقت دهند. - کاربران تصاویر را خاموش کرده‌اند تا حجم انتقال داده و حواس‌پرتی را کاهش دهند. این امر به ویژه در تلفن‌های همراه و در کشورهایی که پهنای باند محدود یا گران است، رایج است.

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

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

عرض و ارتفاع

   شما می‌توانید از ویژگی‌های width و height برای مشخص کردن عرض و ارتفاع تصویر خود استفاده کنید. این ویژگی‌ها به صورت اعداد صحیح و بدون واحد ارائه می‌شوند و عرض و ارتفاع تصویر را بر حسب پیکسل نشان می‌دهند. شما می‌توانید عرض و ارتفاع تصویر خود را به روش‌های مختلفی پیدا کنید. به عنوان مثال، در مک می‌توانید از کلیدهای برای دریافت اطلاعات نمایش فایل تصویر استفاده کنید. با بازگشت به مثال خود، می‌توانیم این کار را انجام دهیم:

Copy

HTML

   دلیل بسیار خوبی برای انجام این کار وجود دارد. HTML صفحه شما و تصویر منابع جداگانه‌ای هستند که توسط مرورگر به صورت درخواست‌های HTTP(S) جداگانه دریافت می‌شوند. به محض اینکه مرورگر HTML را دریافت کرد، شروع به نمایش آن به کاربر می‌کند. اگر تصاویر هنوز دریافت نشده باشند (و اغلب این اتفاق می‌افتد، زیرا اندازه فایل‌های تصویر اغلب بسیار بزرگتر از فایل‌های HTML است)، مرورگر فقط HTML را رندر می‌کند و به محض دریافت تصویر، صفحه را با آن به‌روزرسانی می‌کند. به عنوان مثال، فرض کنید متنی بعد از تصویر داریم:

Copy

HTML

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

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

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

تغییر اندازه تصاویر

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

عنوان‌های تصویر

   همانند لینک‌ها، می‌توانید به تصاویر نیز ویژگی‌های عنوان اضافه کنید تا در صورت نیاز اطلاعات پشتیبانی بیشتری ارائه دهید. در مثال ما، می‌توانیم این کار را انجام دهیم:

Copy

HTML

   این به ما یک tooltip با نگه داشتن موس می‌دهد، درست مانند عناوین لینک‌ها:

   با این حال، این توصیه نمی‌شود - عنوان دارای تعدادی مشکل در دسترسی‌پذیری است، که عمدتاً مبتنی بر این واقعیت است که پشتیبانی از صفحه‌خوان بسیار غیرقابل پیش‌بینی است و اکثر مرورگرها آن را نشان نمی‌دهند مگر اینکه با ماوس روی آن حرکت کنید (بنابراین، مثلاً برای کاربران کیبورد دسترسی وجود ندارد). اگر به اطلاعات بیشتری در این مورد علاقه‌مند هستید، کتاب نوشته اسکات اوهارا را بخوانید. بهتر است چنین اطلاعات پشتیبانی را در متن اصلی مقاله قرار دهید، نه اینکه به تصویر پیوست کنید.

دارایی‌های رسانه‌ای و مجوزها

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

آشنایی با انواع مجوزها

   بیایید نگاهی به برخی از دسته‌های رایج مجوزهایی که احتمالاً در وب پیدا می‌کنید، بیندازیم. خالقان آثار بدیع مانند آهنگ‌ها، کتاب‌ها یا نرم‌افزارها اغلب آثار خود را تحت حفاظت حق نشر بسته منتشر می‌کنند. این بدان معناست که به‌طور پیش‌فرض، آنها (یا ناشر آنها) حق انحصاری استفاده (مثلاً نمایش یا توزیع) از اثر خود را دارند. اگر می‌خواهید از تصاویر دارای حق نشر با مجوز تمام حقوق محفوظ استفاده کنید، باید یکی از موارد زیر را انجام دهید: - اجازه کتبی و صریح از دارنده حق نشر دریافت کنید. - برای استفاده از آنها هزینه مجوز بپردازید. این می‌تواند یک هزینه یک‌باره برای استفاده نامحدود ("بدون حق امتیاز") باشد، یا ممکن است "مدیریت‌شده با حقوق" باشد، که در این صورت ممکن است مجبور شوید هزینه‌های خاصی را برای هر استفاده بر اساس بازه زمانی، منطقه جغرافیایی، صنعت یا نوع رسانه و غیره بپردازید. - استفاده‌های خود را به مواردی محدود کنید که در حوزه قضایی شما استفاده منصفانه یا معامله منصفانه تلقی می‌شوند. نویسندگان ملزم به درج اطلاعیه حق نشر یا شرایط مجوز همراه با اثر خود نیستند. حق نشر به‌طور خودکار در یک اثر اصلی نویسندگی پس از ایجاد در یک رسانه ملموس وجود دارد. بنابراین اگر تصویری را به صورت آنلاین پیدا کردید و هیچ اطلاعیه حق چاپ یا شرایط مجوزی وجود نداشت، امن‌ترین راه این است که فرض کنید توسط حق چاپ با تمام حقوق محفوظ محافظت می‌شود. اگر تصویر تحت یک مجوز مجاز، مانند MIT، BSD یا یک مجوز مناسب Creative Commons (CC) منتشر شده باشد، نیازی به پرداخت هزینه مجوز یا درخواست مجوز برای استفاده از آن ندارید. با این حال، شرایط مجوز مختلفی وجود دارد که باید رعایت کنید، که بسته به مجوز متفاوت است. به عنوان مثال، ممکن است لازم باشد: - لینکی به منبع اصلی تصویر ارائه دهید و به خالق آن استناد کنید. - مشخص کنید که آیا تغییری در آن ایجاد شده است یا خیر. - هرگونه اثر مشتق شده ایجاد شده با استفاده از تصویر را تحت همان مجوز اصلی به اشتراک بگذارید. - به هیچ وجه هیچ اثر مشتق شده ای را به اشتراک نگذارید. - از تصویر در هیچ کار تجاری استفاده نکنید. - یک نسخه از مجوز را به همراه هرگونه انتشاری که از تصویر استفاده می‌کند، ضمیمه کنید. برای شرایط خاصی که باید رعایت کنید، باید به مجوز مربوطه مراجعه کنید. مجوزهای CopyLeft در دنیای نرم‌افزار برجسته هستند. ایده اصلی این است که یک پروژه جدید که با کد یک پروژه دارای مجوز کپی‌لفت (که به عنوان "انشعاب" نرم‌افزار اصلی شناخته می‌شود) ساخته می‌شود، باید تحت همان مجوز کپی‌لفت نیز مجوز بگیرد. این امر تضمین می‌کند که کد منبع پروژه جدید نیز برای مطالعه و اصلاح در دسترس دیگران قرار خواهد گرفت. توجه داشته باشید که به طور کلی، مجوزهایی که برای نرم‌افزار تهیه شده‌اند، مانند GPL، مجوزهای خوبی برای کارهای غیر نرم‌افزاری محسوب نمی‌شوند، زیرا با در نظر گرفتن کارهای غیر نرم‌افزاری تهیه نشده‌اند. برای مطالعه در مورد انواع مختلف مجوزها و انواع شرایطی که مشخص می‌کنند، به لینک‌های ارائه شده در این بخش مراجعه کنید.

مالکیت عمومی/CC0

   اثری که در مالکیت عمومی منتشر می‌شود، گاهی اوقات با عنوان «بدون حق محفوظ» شناخته می‌شود - هیچ حق نشری برای آن اعمال نمی‌شود و می‌توان بدون اجازه و بدون نیاز به رعایت هیچ گونه شرایط صدور مجوزی از آن استفاده کرد. اثر می‌تواند به طرق مختلفی مانند انقضای حق نشر یا چشم‌پوشی خاص از حقوق، در مالکیت عمومی قرار گیرد. یکی از موثرترین راه‌ها برای قرار دادن اثر در مالکیت عمومی، مجوز دادن به آن تحت CC0 است، یک مجوز خاص Creative Commons که یک ابزار قانونی واضح و بدون ابهام برای این منظور ارائه می‌دهد. هنگام استفاده از تصاویر مالکیت عمومی، مدرکی دال بر مالکیت عمومی بودن تصویر تهیه کنید و مدرک را برای سوابق خود نگه دارید. به عنوان مثال، از منبع اصلی که وضعیت مجوز آن به وضوح نمایش داده شده است، اسکرین شات بگیرید و اضافه کردن صفحه‌ای به وب‌سایت خود را با لیستی از تصاویر خریداری شده به همراه الزامات مجوز آنها در نظر بگیرید.

جستجوی تصاویر دارای مجوز مجاز

   شما می‌توانید تصاویر دارای مجوز مجاز را برای پروژه‌های خود با استفاده از یک موتور جستجوی تصویر یا مستقیماً از مخازن تصویر پیدا کنید. با استفاده از توضیح تصویر مورد نظر خود به همراه شرایط مجوز مربوطه، تصاویر را جستجو کنید. به عنوان مثال، هنگام جستجوی "دایناسور زرد"، "تصاویر با مالکیت عمومی"، "کتابخانه تصویر با مالکیت عمومی"، "تصاویر دارای مجوز باز" یا شرایط مشابه را به عبارت جستجو اضافه کنید. برخی از موتورهای جستجو ابزارهایی برای کمک به شما در یافتن تصاویر با مجوزهای مجاز دارند. به عنوان مثال، هنگام استفاده از گوگل، برای جستجوی تصاویر به برگه "تصاویر" بروید، سپس روی "ابزارها" کلیک کنید. در نوار ابزار نتیجه، یک منوی کشویی "حقوق استفاده" وجود دارد که می‌توانید انتخاب کنید که به طور خاص برای تصاویر تحت مجوزهای Creative Commons جستجو کنید. سایت‌های مخزن تصویر، مانند Flickr، ShutterStock و Pixabay، گزینه‌های جستجو دارند تا به شما امکان دهند فقط تصاویر دارای مجوز مجاز را جستجو کنید. برخی از سایت‌ها منحصراً تصاویر و آیکون‌های دارای مجوز مجاز، مانند Picryl و The Noun Project را توزیع می‌کنند. رعایت مجوزی که تصویر تحت آن منتشر شده است، مستلزم یافتن جزئیات مجوز، خواندن صفحه مجوز یا دستورالعمل ارائه شده توسط منبع و سپس پیروی از آن دستورالعمل‌ها است. مخازن تصویر معتبر، شرایط مجوز خود را واضح و به راحتی قابل دسترسی می‌کنند.

حاشیه‌نویسی تصاویر با شکل‌ها و زیرنویس شکل‌ها

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

Copy

HTML

   این مشکلی ندارد. این شامل محتوای مورد نیاز شماست و با استفاده از CSS به خوبی قابل استایل‌بندی است. اما اینجا یک مشکل وجود دارد: چیزی وجود ندارد که از نظر معنایی تصویر را به عنوان آن پیوند دهد، که می‌تواند برای خوانندگان صفحه نمایش مشکل ایجاد کند. به عنوان مثال، وقتی 50 تصویر و عنوان دارید، کدام عنوان با کدام تصویر مطابقت دارد؟ یک راه حل بهتر، استفاده از عناصر و در HTML است. این عناصر دقیقاً برای همین منظور ایجاد شده‌اند: فراهم کردن یک ظرف معنایی برای شکل‌ها و پیوند واضح شکل به عنوان. مثال بالا را می‌توان به این صورت بازنویسی کرد:

Copy

HTML

   عنصر به مرورگرها و فناوری‌های کمکی می‌گوید که این عنوان، محتوای دیگر عنصر را توصیف می‌کند.

   از دیدگاه دسترسی‌پذیری، زیرنویس‌ها و متن جایگزین نقش‌های متمایزی دارند. زیرنویس‌ها حتی برای افرادی که می‌توانند تصویر را ببینند نیز مفید هستند، در حالی که متن جایگزین همان عملکرد یک تصویر غایب را ارائه می‌دهد. بنابراین، زیرنویس‌ها و متن جایگزین نباید فقط یک چیز را بگویند، زیرا هر دو وقتی تصویر ناپدید می‌شود ظاهر می‌شوند. سعی کنید نمایش تصاویر را در مرورگر خود غیرفعال کنید و ببینید چگونه به نظر می‌رسد. یک شکل لزوماً نباید تصویر باشد. بلکه یک واحد مستقل از محتوا است که: - منظور شما را به شیوه‌ای فشرده و قابل فهم بیان می‌کند. - می‌تواند در چندین جای جریان خطی صفحه قرار گیرد. - اطلاعات ضروری را برای پشتیبانی از متن اصلی ارائه می‌دهد. یک شکل می‌تواند شامل چندین تصویر، یک قطعه کد، صدا، ویدیو، معادلات، جدول یا چیز دیگری باشد.

تصاویر پس زمینه CSS

   شما همچنین می‌توانید از CSS برای جاسازی تصاویر در صفحات وب (و جاوا اسکریپت، اما این کاملاً داستان دیگری است) استفاده کنید. ویژگی background-image در CSS و سایر ویژگی‌های background-* برای کنترل قرارگیری تصویر پس‌زمینه استفاده می‌شوند. به عنوان مثال، برای قرار دادن یک تصویر پس‌زمینه در هر پاراگراف در یک صفحه، می‌توانید این کار را انجام دهید:

Copy

CSS

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