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

اشتباهات متداول در مورد استفاده از تصاویر در وبReviewed by علی شانه ساز on Oct 19Rating: 5.0

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

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

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

بعضی از سایت ها برای اینکه بتوانند بیش از 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 را با فشردگی ۹۰٪ استخراج می کنند این کار به کیفیت تصویر صدمه می زند). شما علاوه بر این که باید در مورد تصاویر احتیاط کنید، به خاطر داشته باشید که اکثر عناصر صفحه در Cash باقی می مانند بنابراین می توانید آن ها را با کیفیت کمی بالاتر نیز ذخيره کنید.

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

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

کاهش حجم تصاویر

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

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

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

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

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

سرقت تصاویر

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

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