اشتباهات متداول در مورد استفاده از تصاویر در وب

اشتباهات متداول در مورد استفاده از تصاویر در وب

در این مقاله می خوانید:

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

اشتباهات مختلف در زمینه استفاده از تصاویر در سایت

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

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

استفاده از تصاویر برای بدنه اصلی صفحه

بعضی از سایت ها برای اینکه بتوانند بیش از CSS بر روی صفحات خود کنترل داشته باشند، از تصاویر برای بدنه صفحه (Body) استفاده می کنند. اما تصاویر گرافیکی در بدنه صفحه باعث می شوند که صفحه با کیفیت کمتری نسبت به متون HTML چاپ شود. به علاوه، این کار باعث می شود که موتور های جستجو نتوانند متون شما را بخوانند و قابلیت کپی و Paste نیز نداشته باشند.

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

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

کار نکردن روی تصاویر اصلی

اگر بخواهید در وب سایت خود روی تصویر تفاوت هایی را اعمال کنید، در صورتی که تصویر شما فشرده شده باشد، باید تغییرات خود را روی اصل تصویر ایجاد کنید، زیرا ذخیره کردن مداوم یک تصویر فشرده باعث می شود که هر بار از کیفیت آن کاسته شود. همچنین هرگر نباید ابعاد تصویر فشرده شده JPEG را افزایش دهید زیرا هر بار نتایج بدتری را به دست خواهید آورد.

استفاده از تصاویر در وب

بازنویسی اسناد اصلی

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

همچنین اگر نرم افزار های گرافیکی که از لایه ها استفاده می کنند (Layers) را مورد استفاده قرار می دهید، قبل از اینکه لایه ها را برای استخراج کردن Flat کنید، کپی تمام لایه ها را ذخیره کنید در غیر این صورت نمی توانید تغییرات اعمال شده را به حالت اول برگردانید.

پس زمینه های شلوغ

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

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

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

عدم وجود کنتراست یا تضاد در رنگ ها

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

در رنگ های ملایم استفاده شود طرح شما زیباتر خواهد شد. اما در کاربردی بودن (Usability) سایت را تحت تاثير قرار ندهد. به کار بردن یک طیف رنگ ملایم خوب است اما نباید باعث شود که کاربران به راحتی نتوانند عناصر مهمی مانند بخش ناوبری را پیدا کند و با متن صفحه را بخوانند.

استفاده از تصاویر در وب

استفاده از فرمت نادرست برای تصاویر

استفاده از فرمت های TIFF یا BMP به جای GIF و JPEG در تصویر شما باعث ایجاد خطوط نقطه نقطه ای می شود. این فرمت ها برای استفاده در وب مناسب نیستند و باید از آن ها اجتناب کنید. در قسمت های قبلی این بخش در مورد انتخاب فرمت مناسب برای تصاویر توضیح داده شده است.

تغییر ابعاد تصویر در HTML

وقتی طراحان با ویرایشگر های WYSIWYG کار می کنند، از تکنیک drag – and – drop استفاده می کنند. گاهی برای تغییر اندازه تمام عناصر از این روش استفاده می شود (گاهی نیز این تغییرات به صورت تصادفی انجام می شوند. در نتیجه این تغييرات بر روی کد ها نيز اعمال می شود.

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

این حالت دارای استثنا هایی نیز می باشد اما بسیار نادر است. مثلا اگر با تصاویر GIF کار می کنید می توانید تصویر را به نسبت طول و عرض بزرگتر کنید. این کار تصویر را بزرگ می کند اما اندازه فایل کوچک می ماند.

عدم تعادل سایز فایل نسبت به کیفیت آن

یکی از مشکلات سایت هایی که از تصاویر استفاده می کنند، پهنای باند اینترنت کاربران است. این مشکل با افزایش ترافیک سایت و بیشتر شدن تعداد کاربران، هم برای Host و هم برای کاربرانی که با وجود سرعت کم مجبور به به سود تصاویر هستند پیش می آید. بنابراین همیشه باید از تصاویر بهینه سازی شده (Optimized) استفاده کنید تا هم در هزینه های خود صرفه جویی کنید و هم کاربران سایت شما از دانلود زياد خسته نشوند.

بیشتر بخوانید: کاهش حجم تصاویر بدون افت کیفیت آنلاین چطور امکان پذیر است؟

اما این بدان معنا نیست که تمام تصاویر سایت خود را آنقدر فشرده کنید که با کیفیت نامطلوب نمایش داده شوند (بعضی از سایت ها تصاویر JPEG را با فشردگی 90٪ استخراج می کنند این کار به کیفیت تصویر صدمه می زند). شما علاوه بر این که باید در مورد تصاویر احتیاط کنید، به خاطر داشته باشید که اکثر عناصر صفحه در Cash باقی می مانند بنابراین می توانید آن ها را با کیفیت کمی بالاتر نیز ذخيره کنید.

هر تصویری که از طرف کاربر درخواست می شود، تصویری است که او می خواهد ببیند. بنابرایں اگر دارای کیفیت خوب باشد برای دانلود آن منتظر می ماند.

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

استفاده از تصاویر در وب

استفاده از متن روی تصاویر و جدا کردن آن ها

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

  • استفاده از عبارت کپی رایت روی تصویر
  • تقسیم تصویر به تعدادی تصویر مجزا تا دانلود آن را مشکل تر کند
  • اضافه کردن یک لایه شفاف GIF یا PNG نامرئی روی تصویر

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

تقسیم کردن تصاویر به فایل های مجزا یا قرار داده GIF و PNG نامرئی برای جلوگیری از دانلود آن ها توسط کاربران نیز کار درستی نیست. برای هریک از این روش ها راح حل هایی وجود دارد و شما با این حرکت فقط کار خود را در زمان بروز رسانی سایت سخت تر می کنید. گاهی نیز این روش ها یک پارچگی سایت را تحت تاثير قرار می دهد.

سرقت تصاویر

بسیاری افراد تصور می کنند که اینترنت برای همگان رایگان است و شامل محدودیت های کپی رایت نمی شود. اما این طور نیست. قانون کپی رایت در وب نیز مانند هر جای دیگر وجود شما نمی توانید تصویری را که در اینترنت پیدا کرده اید برای خود بردارید مگر اینکه اجازه داشته باشید. در صورت انجام این کار توسط مراكز نقض کپی رایت تحت پیگرد قرار خواهید می رفت.

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

سخن پایانی

استفاده از تصاویر در سایت‌ها می‌تواند بهبود رتبه سایت در موتورهای جستجو، جذب کاربران و افزایش بازدید سایت کمک کند. با این حال، استفاده نادرست از تصاویر می‌تواند به شکست سایت و کاهش بازدید سایت منجر شود. در این مقاله، اشتباهات مربوط به استفاده از تصاویر در وب را مورد بررسی قرار دادیم.

اگر شما نیز موردی می شناسید، آن را در بخش نظرات با ما به اشتراک بگذارید. خوشحالیم که وقت خود را در اختیار ما قرار دادید.

تیم تحریریه کلیک اول

نویسنده در بلاگ کلیک اول

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

0 دیدگاه ثبت شده است.

در بحث و گفتگوی مربوط به این مطلب شرکت کنید!

آکادمی کلیک اول

دریچه ای به سوی آموزش های رایگان در فضای دیجیتال مارکتینگ

آموزش پایه ای کار با ابزار گوگل سرچ کنسول

دوره آموزشی گوگل سرچ کنسول (Google Search Console)

سئو و بهینه سازی

گوگل سرچ کنسول یا Google Search Console یکی از مهم ترین ابزارهای سئوی حرفه ای سایت است. شما با کمک این ابزار می توانید با گوگل ارتباط برقرار کرده و به درستی یا نادرستی عملکرد خود در مسیر بهینه سازی سایت پی ببرید.

02:21:00
آموزش پایه ای کار با گوگل آنالیتیکس

دوره آموزشی گوگل آنالیتیکس 4 (Google Analytics 4)

سئو و بهینه سازی

گوگل آنالیتیکس (Google Analytics) یکی از ابزارهای پرکاربرد گوگل بوده و وظیفه آن بررسی آمار سایت ها و تحلیل آن هاست..

02:43:00
آموزش کار با افزونه پرکاربرد یواست

آموزش کار با افزونه پرکاربرد یواست (Yoast)

دیجیتال مارکتینگ

یواست سئو (Yoast SEO) یک افزونه وردپرس است که به عملکرد بهتر سایت در موتورهای جستجو مانند گوگل کمک می کند. همچنین ابزارهایی را در اختیار شما قرار می دهد تا محتوای خود را به بهترین استانداردهای سئو و خوانایی برسانید.

00:22:06