راهکارهای بهینه سازی تصاویر

1061 بار
سه شنبه, 19 شهریور 1392 ساعت 21:19
ارزیابی شما
(1 رای)
راهکارهای بهینه سازی تصاویر - 5.0 out of 5 based on 1 vote

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

 

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

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

مانیتورهای کامپیوتر تنها قادر به نمایش تصاویر در 72dpi) dots per inch)  می باشند. پس اولین گام در بهینه سازی تصاویر وب تبدیل کردن آنها به رزولیشن یا تفکیک پذیری 72dpi می باشد. تصاویر بزرگتر می توانند به تصاویر کوچکتر تیکه شوند و در صفحات وب دوباره در کنار هم قرار بگیرند. هر تیکه کوچک تصویر به یک فایل کوچک تبدیل می شود و اینها در کنار هم درصدی از مقدار زمانی است که تصویر بزرگتر بارگذاری خواهد شد.

بیشتر فایلهای گرافیکی حاوی اطلاعاتی در مورد پالتهای رنگ خود می باشند. این اطلاعات برای نمایش در صفحات وب غیرضروری می باشند. بسیاری از نرم افزارهای گرافیکی توانایی "Save for web" را دارند و انتخاب این گزینه برای ذخیره تصاویر اطلاعات غیر ضروری همراه تصاویر را از آن جدا می کنند بدون آنکه در کیفیت تصاویر شما تاثیر بگذارند.

روش دیگر استفاده از فرمت های تصویری GIF، PNG و JPG Progressive property می باشد. این فرمتها اجازه می دهند تا تصویر هنگام بارگذاری رفته رفته از حالت بلار (Blur) به حالت شفاف و تمیز خود برسد. در حقیقت استفاده از این روش باعث می شود تا تصویر ثانیه ای دیرتر باگذاری شود اما در عوض بازدیدکننده وب سایت شما آن را زودتر می بیند.

طول و عرض از ویژگیهای تگ IMG

تگ <IMG> در اچ تی ام ال به مرورگرها می گوید که فضای اختصصاصی برای نگهداری فایل گرافیکی در نظر بگیرند. در این روش مرورگر می تواند به بارگذاری صفحات وب خود ادامه دهد مادامی که تصویر و فایل گرافیکی درون تگ IMG بارگذاری می شود. اگر شما از ویژگیهای طول و عرض در این تگ استفاده نکنید مرورگر باید تا زمانی که تصویر بارگذاری می شود از کار دست بکشد و این مهم تاثیر منفی در بازدیدکننده وب سایت شما خواهد داشت.

چه تعداد تصویر شما باید در وب سایت خود استفاده کنید؟

بعضی از طراحان سایت برای هر موردی از تصاویر استفاده می کنند. این خوب است و نمای خوبی به کاربر سایت شما برای بازدید خواهد داد اما این مهم را در نظر بگیرید که استفاده زیاد از تصاویر باعث کند شدن بارگذاری صفحات وب شما خواهند شد. تصاویر معمولاً بیش از 50% از زمان دانلود را به خود اختصاص می دهند.

استفاده از تصاویر کمتر باعث افزایش سرعت دانلود و بارگذاری صفحات سایت خواهند شد.

کیفیت تصاویر

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

همچنین شما می توانید از Thmubnail های تصاویر که به تصویر بزرگتر با وضوح و رزولیشن بیشتر لینک شده اند استفاده کنید

بهینه سازی تصاویر در چند نکته

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

  • تمامی تصاویر وب سایت خود را در رزولیشن و تفکیک پذیری 72dpi استفاده نمایید.
  • تصاویر متون در سایت خود بکار نبرید و تمامی آنها را به متن تبدیل کنید.
  • تصاویر سایت خود را برش بزنید و در سایزی که نیاز دارید بر روی وب سایت خود قرار دهید.
  • زمانی که کیفیت تصاویر اهمیتی ندارند از عمق رنگ (Color Depth) کمتری استفاده کنید.
  • به تمامی تصاویر ویژگی طول و عرض را اضافه کنید.
  • در جایی که لازم است از Thumbnail استفاده کنید تا کاربر با کلیک بر روی تصویر کوچکتر به تصویر اصلی برسد.

اگر شما در مورد این مطلب نظری دارید در اینجا بنویسید

برای ارسال پیام پر کردن فیلدهای نام، ایمیل و پیام شما الزامی اند.

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