در این مقاله از سایت به کاهش حجم تصاویر سایت می پردازیم . تصاویر یکی از کلیدی ترین اجزای تشکیل دهنده هر وب سایت محسوب میشوند. تا جایی که براساس آمار ارائه شده در سایت http Archive تصاویر بیش از ۶۰ درصد از بارگیری و لود داده در صفحات وب را به خود اختصاص می دهند.
نکته قابل توجه ای که در انواع وب سایت ها مانند فروشگاه های اینترنتی، وب سایت شرکتی اخبار، سایت های مد و طراحی یا سایت تورهای مسافرتی وجود دارد این است که اگر به دنبال افزایش سرعت وب سایت خود هستید یکی از ساده ترین و دسترس ترین روش های بهینه سازی ، تصاویر وب سایت می باشد.
بهینه سازی تصاویر در وب سایت به سه گروه اصلی
۱ – بارگذاری با حجم کمتر
۲ – بارگذاری کمتر تصاویر
۳ – بارگذاری سریعتر تصاویر
تقسیم می شود.که کلیه روش های ذکر شده در این مقاله و یا هر روش دیگری در این حوزه با هدف رفع مشکلات تصاویر سایت و کاهش حجم تصاویر سایت در این سه دسته بندی قرار می گیرد. بنابراین ، بیایید به برخی از تکنیک های ساده ای که امروز می توانید پیاده کنید ، نگاهی بیندازیم تا پیشرفت چشمگیری دربهینه سازی وب سایت و بهبود عملکرد تصاویر سنگین خود داشته باشید.
تغییر و تنظیم ابعاد عکس ها:
اولین قدم برای کاهش حجم تصاویر سایت که بسیار هم لازم و ضروری است ، تغییر و بهینه سازی ابعاد یا همان Resize کردن تصاویر است.
البته که تغییر این ابعاد نباید در کد های برنامه و با کمک html و css انجام شود بلکه تصاویر پیش از ذخیره درسرور باید به ابعاد بهینه شده تغییر سایز داده شده و سپس ذخیره شوند.
به عنوان مثال شما ممکن است عکسی که برای نمایش محصولات در فروشگاه اینترنتی خود با دوربین گرفته اید ابعادی در حدود ۴۰۰×۳۰۰ پیکسل داشته باشد و این درحالی است که برای نمایش محصول در صفحه لیست محصولات تصویری به ابعاد ۲۰۰×۳۰۰ و برای نمایش محصول در صفحه جزئیات محصول تصویری به ابعاد ۸۰۰×۱۰۰ نیاز داشته باشید.
پس کدهای برنامه خود را به گونه ای بنویسید که عکس ها در زمان ذخیره روی سرور حتما با ابعاد بهینه شده و مورد نیاز شما (ونه بیشتر) آپلود گردند.
عکس هایی که به ابعاد بهینه شده که بسیار کوچکتر از عکس اصلی می باشند روی سایت قرار می گیرند می توانند سرعت لود وب سایت شمارا تا حدود زیادی افزایش دهند.
به نظر می رسد تغییر ابعاد اشتباه تصاویر یکی از بزرگترین مشکلات بهینه سازی اکثر وب سایت ها می باشد و ما به عنوان برنامه نویس نیاز به بازنگری این نوع بهینه سازی خواهیم داشت. سناریوی زیر را در نظر بگیرید:
فرض کنید وب سایت جدید خود را با تصاویری کاملا بهینه شده راه اندازی می کنید. پس از گذشت چند ماه از راه اندازی سایت ، قالب سایت شما تغیر می کند و تصاویر در قالب جدید ابعاد و تناسب متفاوتی را نیاز خواهد داشت.
به جز طراحی و تصاویر جدید برای قالب جدید، راهکار ساده تر رساندن عکس ها به نزدیک ترین تناسب با قالب و عکس های قبلی خواهد بود به عنوان مثال در تصاویر زیر مشاهده می کنید.
بهینه سازی تصاویر:
مرحله بعدی در افزایش سرعت لود تصاویر سایت و کاهش حجم تصاویر سایت استفاده صحیح از فرمت های مختلف تصاویر و به کارگیری کیفیت مناسب برای همه تصاویر سایت می باشد.
متداول ترین فرمت هایی که در وب سایت ها استفاده می شود GIF,PNG, JPG می باشند. که هرکدام از آنها برای کاربردی خاص در وب سایت ها مناسب خواهند بود .اما جالب است بدانید که فرمت نسبتا جدیدی برای تصاویر وب سایت ارائه شده است که Webp نام دارد و ترکیب بهینه شده ای از سه فرمت قبلی بوده و حدود ۳۰٪حجم کمتری برای تصاویر ارائه می کند. این فرمت در حال حاضر توسط ۷۵٪در مرورگرهای جدید پشتیبانی می شود.
کیفیت تصاویر معیاری برای چگونگی نمایش عکس ها می باشد و ارتباط مستقیمی بین کیفیت عکس ها و سایر آنها وجود دارد. به نحوی که هرچه کیفیت عکس ها بالاتر باشد عکس ها سایز بیشتری داشته و وب سایت ها سرعت لود کمتری خواهد داشت.
در واقع روش های مختلف فشرده سازی عکس ها از محدویت های چشم انسان در تشخیص تغییرات کوچک ایجاد شده در رنگ ها استفاده کرده و حجم تصویر را کاهش می دهد. به صورت استاندارد در سطح ۸۰ یا ۹۰ (از صد) یک سطح معقول از کیفیت تصاویر و سایز مناسب ارائه می نماید.
طراحی جداگانه برای موبایل و تلفن های همراه
باتوجه به اینکه طبق آمارهای ارائه شده حدود ۶۰ درصد ترافیک سایت های مختلف از طریق تلفن های همراه تولید می شود. اگر در زمان طراحی وب سایت کاربران موبایل را نادیده بگیرید و به فکر طراحی مناسب برای نمایش در موبایل نباشید شما خطای بزرگی مرتکب شده اید.
با طراحی واکنش گرا responsive برای کامپیوتر ها و موبایل ها شما می بایست از تصاویر به صورت واکنش گرا استفاده نمایید.
مدیریت تصاویر در طراحی های واکنش گرا با کمک دو مشخصه sites ، srcset در تگهای img انجام می شود. پس از آن صفحه مرورگر در زمان لود وب سایت بهترین سایز را متناسب با ابعاد دستگاه نمایش می دهد.