پرش به مطلب اصلی

عکس‌ها

alt​

حتما با alt در تگ img آشنا هستید. حتی شاید زمانی که ازش استفاده نکردید، متوجه هشدار IDE شده باشید.

alt مخفف عبارت Alternate Text یا متن جایگزینه که دو کاربرد مهم داره:

  1. جایگزینی برای عکسه به طوری که اگه به هر دلیلی امکان نمایش عکس وجود نداشت، این نوشته به کاربر نشون داده میشه تا موضوع عکس رو بفهمه.
  2. Screen Reader ها متن مورد نظر رو بلند می‌خونن و کاربرهایی که نمی‌تونن عکس رو ببینن، متوجهِ موضوع عکس میشن.

بنابراین استفاده از alt خیلی اهمیت داره. اما تو موارد زیر بهتره براش یه متن خالی در نظر بگیریم:

  • عکس مورد نظر صرفاً برای زیبایی ظاهری و دکوری باشه، جوری که اطلاعات مهمی به محتوا اضافه نکنه.
  • عکس مورد نظر Caption داشته باشه.
هشدار

دقت کنید که تو موارد بالا حتماً باید تگ alt رو استفاده کنید، اما متنی داخلش ننویسید؛ به‌عنوان مثال:

<img src="https://chiz.com/yaroo.png" alt="" />

علت این موضوع اینه که اگه alt وجود نداشته باشد، Screen Reader اسم فایل عکس رو به‌عنوان توضیحاتش می‌خونه؛ اما اگه متن خالی داخل alt باشد، عکس به کلی در نظر گرفته نمیشه.

بیشتر بدانیم:

Performance​

ما تقریباً تو تمام سایت‌ها از عکس استفاده می‌کنیم؛ بنابراین همیشه باید به مبحث Performance توجه داشته باشیم، وگرنه سایتمون به شدت کند و حتی غیرقابل‌استفاده میشه.

یکی از بهترین راه‌ها برای افزایش Performance، استفاده از عکس‌های باکیفیت و در عینِ حال کم‌حجمه. برای این موضوع، سایت Squoosh رو پیشنهاد می‌کنم که توسط توسعه‌دهندگان Google ساخته شده.

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

نکته

فرمت webp برای عکس‌های Raster بهترین انتخابه.

SVG​

در صورت امکان پیشنهاد می‌کنم حتماً از فرمت svg استفاده کنید. این فرمت برخلاف فرمت‌هایی مثل png و jpeg، به صورت Vector یا برداریه، به طوری که شما می‌تونید بدونِ افت کیفیت، کوچک یا بزرگش کنید. فرمت svg همیشه از بقیه‌ی فرمت‌ها کم‌حجم‌تره اما در عوض، جزئیات کمتری رو می‌تونید توش استفاده کنید. بنابراین svg برای لوگوها، Illustrationها و آیکن‌ها مناسبه.

برای دانلود فایل‌های svg حرفه‌ای می‌تونید از لینک‌های زیر استفاده کنید:

Icons​

برای مشاهده و دانلود لیست کاملی از آیکن‌ها، می‌تونید از سایت Icones استفاده کنید.

این سایت حتی قابلیت دانلود آیکن به صورت کامپوننت React رو هم داره.