بهینه‌ سازی تصاویر در جهت افزایش سرعت سایت

تصاویر یکی از عناصر بسیار مهم وب‌سایت می‌باشند، اما می‌توانند باعث کاهش سرعت بارگذاری صفحات سایت شوند و این کاهش سرعت وب‌سایت می‌تواند به شدت نگران­ کننده باشد؛ زیرا در صورت عدم بارگذاری به موقع و عدم بهینه سازی تصاویر؛ احتمال دارد؛ بسیاری از کاربران وب‌سایت خود را از دست بدهید. با تیک4 همراه باشید تا سرعت صفحه را از منظر بهینه سازی تصاویر بررسی کنیم.

بهینه‌ سازی تصاویر برای وب‌سایت چیست؟

تصاویری که در برنامه‌هایی مانند: فتوشاپ (Photoshop) و illustrator ایجاد می‌کنید، بسیار شگفت‌آور به نظر می‌رسند، اما خوب است بدانید که درج این نوع عکس‌ها در سایت، تاثیر زیادی در افزایش سرعت سایت خواهند داشت. زیرا که این تصاویر با حجم بسیار بالاتر از گنجایش سایت ذخیره می‌شوند و در صورتی که حجم حداقلی هر عکس 2 مگابایت یا حتی بیشتر باشد؛ بارگیری سایت بسایر وقت‌گیرتر خواهد بود. ولی راه حل چیست؟

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

بهینه‌ سازی تصاویر چگونه کار می‌کند؟

به عبارت ساده، بهینه ­سازی تصویر شما با حذف تمام داده‌های غیرضروری که در تصویر ذخیره می‌شود، کار می‌کند، تا اندازه فایل را براساس مکانی که در وب­ سایت شما استفاده می‌شود، کاهش دهد. بهینه­ سازی تصاویر وب­سایت می‌تواند تا 80٪ اندازه بار کلی که بر روی پیج شما قرار دارد را کم کند. دو نوع فشرده‌سازی وجود دارد که لازم است در مورد آن‌ها آگاهی داشته باشیم:

• Lossy
• Lossless

تصاویر ذخیره شده با فرمت lossy هنگام فشرده‌سازی، کمی با تصویر اصلی متفاوت خواهند بود. به­خاطر داشته باشید که این تفاوت تنها با یک نگاه بسیار نزدیک قابل مشاهده است. فشرده­سازی Lossy برای وب‌سایت مفید است؛ زیرا تصاویر پیج از حافظه بسیار کمی استفاده می‌کنند، اما می‌توانند به اندازه تصویر اصلی کاربردی هستند.

تصاویر ذخیره شده در قالب loss less، تمام اطلاعات مورد نیاز برای ایجاد تصویر اصلی را حفظ می‌کنند. به همین دلیل این تصاویر، داده‌های بسیار بیشتری دارند و اندازه فایل آن‌ها بسیار بزرگ‌تر است. همچنین ؛ می‌توانیم تصاویر را با ذخیره کردن آن‌ها در ابعاد مناسب، برای وب­سایت، بهینه­ سازی کنیم. تغییر اندازه تصویر روی صفحه وب با استفاده از CSS می‌تواند نیاز شما را رفع کند، اما مسأله این است که مرورگر وب، هنوز فایل اصلی را بارگیری می‌کند، سپس آن را تغییر اندازه داده و نمایش می‌دهد. بنابر این تغییر سایز عکس به وسیله css ممکن است به درستی باعث کاهش سرعت سایت نشود.

چرا بهینه‌ سازی تصاویر مهم است؟

دلیل اصلی مهم بودن بهینه­ سازی تصاویر این است که، بیشتر از 90٪ وب­سایت‌ها به گرافیک وابسته هستند؛ بنابراین در این پیج­ها تعداد زیادی فایل تصویری وجود دارد که قرار دادن این تصاویر بدون فشرده­ سازی و با فرمت اشتباه در وب­ سایت، می‌تواند زمان بارگذاری صفحه وب را به شدت کاهش دهد، که نتیجه آن نارضایتی کاربران و کاهش ترافیک سایت خواهد بود.

چگونه تصاویر خود را بهینه ­سازی کنیم؟

بهینه­ سازی کامل تصاویر، می‌تواند یک هنر واقعی تمام عیار باشد؛ زیرا تصاویر بسیار متنوعی وجود دارد که ممکن است با آن‌ها سروکار داشته باشید. در این بخش متداول‌ ترین روش‌های بهینه‌سازی تصاویر وب‌سایت، برای شما ذکر شده است:

• فضای سفید در اطراف تصاویر را کاهش دهید؛ برخی از توسعه­ دهندگان، از فضای سفید برای لایه­ سازی استفاده می‌کنند. تصاویر خود را برش داده و فضای سفید اطراف تصویر را از بین ببرید و از CSS برای ایجاد لایه استفاده کنید.
• از فرمت‌های مناسب استفاده کنید؛ اگر آیکون‌ها، Bulletها یا هر نوع فایل گرافیکی دارید که رنگ‌های زیادی ندارد، از یک فرمت مانند GIF استفاده کرده و فایل را با رنگ‌های کم­تری ذخیره کنید. اگر فایل گرافیکی شما دارای جزئیات زیادی است، از فرمت فایل JPG برای ذخیره تصاویر و کاهش کیفیت آن‌ها استفاده کنید.
• تصاویر خود را در ابعاد مناسب ذخیره کنید؛ اگر برای تغییر اندازه تصاویر خود مجبور به استفاده از HTML یا CSS هستید، برای کاهش اندازه فایل، تصویر را در اندازه دلخواه ذخیره کنید.

برای تغییر اندازه تصاویر، باید از برنامه‌های خاصی استفاده نمایید. هم­چنین برای فشرده ­سازی پایه می‌توانید از یک برنامه ویرایش ساده مانند GIMP استفاده کنید. برای بهینه‌سازی پیشرفته‌تر، باید فایل‌ها را در Photoshop، Illustrator یا Fireworks ذخیره کنید.