چارچوب بهینه سازی تصاویر در طراحی سایت
بهینه سازی تصاویر، برای بارگذاری سریع صفحات سایت در کوتاه ترین زمان ممکن ضروری است. زمان بارگذاری کوتاه، نیازمند فایل هایی با حجم کم است. این مقاله روش های مورد استفاده در بهینه سازی تصاویر را مورد بحث قرار می دهد.
در یک دنیای ایده آل، طراح سایت می تواند از با کیفیت ترین تصاویر ممکن استفاده کند و صفحه ای را ایجاد کند که در چشم به هم زدنی باز شود. البته این دنیای ایده آل بود! بارگذاری سریع نیازمند آن است که حجم فایل ها برای تصاویر تا حد ممکن برعکس دنیای ایده آل ما، کوچک باشد. متاسفانه ارتباط معکوسی میان کیفیت تصاویر و حجم فایل ها وجود دارد که شما باید همیشه آن را مد نظر داشته باشید.
مشهور است که کاربران اینترنتی جمعیتی از افراد بی صبر هستند. چنانچه سایتی بیش از حد زمان بارگذاری آن به طول بیانجامد، آنها بر روی دکمه برگشت کلیک کرده و از سایت شما خارج خواهند شد.
صفحه نمایش کامپیوتر می تواند تنها تصاویری با وضوح 72dpi (نقطه در اینچ) را نمایش دهد. در نتیجه اولین گام در بهینه سازی تصاویر، کاهش وضوح به 72 dpi است. تصاویر بزرگتر می توانند به قسمت های کوچکتری تقسیم شوند. هر قسمت، فایل کوچکی است که می تواند در کسر کوچکی از زمان لود شود.
اکثر فایل های گرافیکی شامل اطلاعاتی در مورد پالت رنگ تصویر هستند. این اطلاعات معمولا برای نمایش در سایت مورد نیاز نمی باشد. بسیاری از برنامه های گرافیکی این قابلیت را دارند تا تصاویر را بتوان برای وب، ذخیره سازی نمود. "Save for the web" انتخابی است که کلیه اطلاعات غیر ضروری را از تصویر حذف می کند بدون آنکه بر کیفیت نهایی تصویر خدشه ای وارد شود.
روش دیگری که به ظاهر می تواند زمان بارگذاری را بالاتر برد، استفاده از ویژگی progressive برای تصاویر GIF، یا PNG های interlaced شده است. هر دوی این ویژگی ها این امکان را می دهند تا بارگذاری تصاویر در مرورگرها به تدریج صورت پذیرد و در ابتدا تصویری مات نمایش داده شود و سپس تصویری با وضوح بیشتر و شفاف تر. در حقیقت این تصاویر حتی چند ثانیه نیز کندتر از تصاویر معمولی بارگذاری می شوند ولی آنها برای بازدید کنندگان به نظر سریعتر هستند.
خصیصه طول و عرض IMG
تگ IMG به مرورگر وب می گوید تا مربعی با سایزی خاص را برای نگه داری گرافیک تولید کند. با این کار مرورگر می تواند مابقی صفحه سایت را بارگذاری نماید در حالی که تصویر هنوز در حال بارگذاری است. چنانچه طول و عرض تصویر مشخص نشود، مرورگر وب مجبور است تا زمانی که تصویر به طور کامل بارگذاری نشده است، منتظر بماند و قسمت های دیگر صفحه را بارگذاری نکند.
از چند تصویر می بایست استفاده کرد؟
برخی از طراحان سایت از تصاویر برای هر چیزی استفاده می کنند. در حالی که این کار می تواند به نظر مناسب باشد ولی قطعا زمان بارگذاری صفحات را بالاتر خواهد برد. سرعت صفحات وابسته به حجم خود فایل HTML و سایز تمامی فایل های به کار رفته در آن است. تصاویر معمولا 50 درصد زمان بارگذاری را شامل می شوند.
استفاده از تصاویر کمتر، زمان بارگذاری را کمتر خواهد کرد و باعث خواهد شد تا کاربران بی حوصله از سایت شما فرار نکنند.
کیفیت تصاویر
کیفیت تصاویر توسط وضوح، خلوص رنگ و جزییات تصویر مشخص می شود. از ویرایشگرهایی استفاده کنید که نویزها و دیگر خصیصه های ناخواسته را در تصویر حذف کنند. بیشتر ویرایشگرها به شما این امکان را می دهند تا برای افزایش دقت تصویر، قرمزی چشم ها و لبه های تیز تصویر را اصلاح نمایید.
ویرایشگرهای حرفه ای نظیر Fireworks و Photoshop به شما امکان می دهند تا پیش زمینه و سطوح رنگ را نیز بتوانید تنظیم کنید و تقریبا هر کاری که دوست دارید با تصویر انجام دهید.
همچنین می توانید از یک تصویر کوچک شده روی سایت استفاده کنید تا لینکی به نسخه ای با کیفی تر و بزرگتر از همان عکس بدهد به طوریکه بازدید کننده بتواند آن را مشاهده کند.
چارچوب بهینه سازی تصاویر
پیشنهادهای زیر به شما این امکان را می دهند تا تصاویرتان را برای بارگذاری سریع در سایت بهینه سازی کنید بدون آنکه بر کیفیت نهایی آنها تاثیری گذارد:
- وضوح تصاویر را به 72 dpi کاهش دهید.
- تصاویر متنی را به متن واقعی تبدیل کنید و تصویر را حذف کنید.
- تصاویر را به اندازه ای که مورد نیاز است برش (crop) دهید.
- عمق رنگ را در مواقعی که برای کیفیت مورد نیاز نیست کم کنید.
- طول و عرض واقعی تصاویر را مشخص کنید.
- در صورت لزوم از نسخه کوچک عکس ها استفاده کنید.
جمله آخر
گرافیک می بایست مطالب سایت را برجسته کند بجز در مواردی معدودی که تصاویر شامل متن هستند. در هر دو صورت، شما نیاز دارید تا تصاویرتان و فایل های گرافیکی را برای دانلود سریعتر بهینه سازی کنید تا آن ها بتوانند در سایت مورد استفاده قرار گیرند در غیر این صورت امکان از دست دادن بازدید کنندگان را خواهید داشت.
مقالات دیگر ما را نیز بخوانید:
