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

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


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


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


صفحه نمایش کامپیوتر می تواند تنها تصاویری با وضوح 72dpi (نقطه در اینچ) را نمایش دهد. اولین قدم در بهینه سازی تصاویر، کاهش وضوح به 72 dpi است. تصاویر بزرگتر می توانند به قسمتهای کوچکتری تقسیم بندی شوند. هر قسمت، فایل کوچکی است که می تواند در کسر کوچکی از زمان لود شود.


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


روش دیگر که می تواند زمان بارگذاری را بالاتر برد، استفاده از ویژگی progressive برای تصاویر GIF، یا PNGهای interlaced است. هر دوی این خصوصیات این اجاره را می دهند تا زمان بارگذاری صفحات وب به تدریج صورت گیرد و در ابتدا تصویری مات نمایش داده شود و سپس تصویری با وضوح بیشتر و شفاف تر.چنین چیزی را حتما در وب سایتهای مختلف مشاهده کرده اید . در واقعیت این تصاویر حتی چند ثانیه نیز کندتر از تصاویر معمولی بارگذاری می شوند ولی آنها برای بازدید کنندگان به نظر سریعتر هستند.



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


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



نکات کلی و پایانی در بهینه سازی تصاویر وب سایت
امیدواریم پیشنهادهای زیر باعث بهبود سرعت بارگزاری تصاویر و همچنین بهبود سرعت وب سایت شما شود :

• وضوح تصاویر را به 72 dpi کاهش دهید.
• تصاویر متنی را به متن واقعی تبدیل کنید.
• تصاویر را به اندازه ای که مورد نیاز است برش (crop) دهید.
• عمق رنگ را درمواقعی که برای کیفیت مورد نیاز نیست کم کنید.
• طول و عرض واقعی تصاویر را مشخص کنید.
• در صورت لزوم از نسخه کوچک عکسها استفاده کنید.

منبع : طراحی سایت و برنامه نویسی اندروید