افزایش سرعت تصاویر سایت
با سلام امروز میخواهیم در مورد افزایش سرعت تصاویر سایت به شما عزیزان نکاتی را یاد دهیم همانطور که میدانید تصاویر جزء کلیدی هر وب سایت هستند. با توجه به تصاویر بایگانی HTTP، بیش از ۶۰٪ داده های بارگذاری شده در صفحات وب را تصاویر تشکیل می دهند. به عنوان یک جزء حیاتی تقریبا در تمام وب سایتها، چه تجارت الکترونیک، اخبار، وب سایت های مد، وبلاگ ها و یا پورتال های سفر، بهینه سازی تصویر بسیار مهم است اگرشما تمایل داشته باشید که سرعت سایت شما افزایش یابد.
بهینه سازی تصاویر در وب سایت شما به سه دسته تقسیم می شود: بار سبک تر، بارگیری کمتر و بارگذاری سریع تر.با تکنیک هایی که در این مقاله بحث می کنیم و یا هر تکنیک دیگری احتمالا به هر یک از این ۳ دسته مربوط می شود.
بنابراین، بیایید شروع کنیم و به برخی از تکنیک های ساده ای که می توانید امروز برای پیشرفت قابل توجه در بهینه سازی وب سایت های سنگین تصویر خود اعمال کنید، نگاهی بیندازیم.
۱٫تغییر سایز تصاویر
اولین راه برای افزایش سرعت تصاویر سایت تغییر دادن اندازه تصاویر است به طوری که دقیقا همان اندازه ای شود که ما به آن نیاز داریم نه بزرگ تر و نه کوچک تر . تغییرات تصاویر خود را دقیقا همان چیزی که در وب سایت شما مورد نیاز است، تغییر دهید. من درباره تغییر اندازه با استفاده از CSS و یا در HTML صحبت نمی کنم. من درباره تغییر اندازه تصویر در سرور صحبت می کنم پس ابتدا اندازه تصاویر خود را تنظیم کنید و سپس آن را به مرورگر ارسال کنید.
به عنوان مثال، شما یک تصویر ۴۰۰۰×۳۰۰۰ پیکسل برای محصولی که می خواهید در وب سایت تجارت الکترونیک خود قرار دهید دارید.اما شما باید در وب سایتتان تصویر بسیار کوچکتری از این محصول را نشان دهید. این تصویر می تواند یک تصویر ۲۰۰x300px در صفحه فهرست محصول و ۸۰۰x1000px در صفحه جزئیات محصول باشد. قبل از فرستادن آن به مرورگر اطمینان حاصل کنید که تصویر اصلی را به این ابعاد کاهش می دهید. تصاویر تغییر اندازه داده شده بسیار کوچکتر از تصویر اصلی هستند و بسیار سریعتر از تصویر اصلی بارگذاری می شوند.
به نظر من، تغییر اندازه نادرست تصاویر، جزو بزرگترین اشتباهات ما در زمینه بهینه سازی در بیشتر وب سایت ها است. و اغلب، ما به عنوان توسعه دهندگان، تمایل به چشم پوشی از آن را داریم. سناریوی زیر را در نظر بگیرید: شما با تصاویر کاملا اندازه برای وب سایت جدید خود شروع به کار می کنید. در عرض چند ماه طرح وب سایت شما تغییر می کند و بنابراین نیاز به ابعاد تصویر خود را دارید. با این حال، به جای ایجاد تصاویر جدید برای پاسخگویی به این الزامات ابعادی جدید را به نسبت نیاز خود مشخص میکنید و به همین خاطر مشکل دیگری نیز ایجاد میشود. به عنوان مثال، شما یک تصویر ۳۰۰x200px دارید که به جای یک تصویر ۲۰۰x200px دارد کار می کند.پس همیشه سعی کنید توجه زیادی به اندازه تصاویر خود داشته باشید تا افزایش سرعت تصاویر سایت را مشاهده کنید.
۲٫تصاویر خود را بهینه کنید
گام بعدی در افزایش سرعت تصاویر سایت شما، انتخاب فرمت و کیفیت مناسب برای هر تصویر در وب سایت شما است.
JPG، PNG و GIF رایج ترین فرمت های تصویری هستند که در حال حاضر در وب استفاده می شوند و برای موارد مختلف استفاده مناسب هستند. یکی دیگر از فرمت های تصویری با نام WebP که از بهترین فرمت های تصویری برای استفاده در سایت ها است میباشد که این سایز این تصویر حدود ۳۰ درصد کوچکتر از نسخه اصلی است و تقریبا ۷۵ درصد از مرورگرهای مدرن از این فرمت پشتیبانی می کنند.
مقایسه اندازه فوق نشان می دهد انتخاب قالب تصویر مناسب برای تصاویر شما بسیار مهم است. در حالی که تصاویر در نگاه یکسان هستند، در اندازه های مختلف متفاوتند.
بین کیفیت تصویر و اندازه تصویر همبستگی مستقیمی وجود دارد. بنابراین هرچقدر کیفیت بالاتر باشد باعث افزایش اندازه تصویر میشود و در نتیجه وب سایت شما آهسته تر می شود.
روش های مختلف فشرده سازی تصویر وجود دارد که از محدودیت های چشم انسان برای استفاده از تغییرات کوچک در اطلاعات رنگی استفاده میکنند برای فشرده سازی تصاویر و این بدان معناست که شما تصاویر خود را فشرده میکنید و دستکاری انجام میدهید اما این تغییرات با چشم معمولی قابل تشخیص نیست.
مقایسه بین همان تصویر کدگذاری شده در سطوح مختلف کیفیت انجام شده است اما تصاویر تقریبا مشابه به صورت تصویری هستند ولی دارای اندازه های مختلف هستند.
یک روش ساده برای انجام فرمت و بهینه سازی کیفیت، استفاده از ImageKit برای ارائه تصاویر شما است. این نرم افزار به طور خودکار تصویر شما را به تصویر مخصوص وب تبدیل می کند همچنین کیفیت تصویر را در زمان واقعی بهینه سازی می کند.
۳٫برای موبایل تنظیم کنید
در جهان امروز، اگر شما جدی در مورد اجرای یک وب سایت در حال کار هستید، نادیده گرفتن کاربران تلفن همراه یک اشتباه بزرگ است. داده ها نشان می دهد که تقریبا ۶۰ درصد از ترافیک جهانی از دستگاه های تلفن همراه حاصل می شود. در حالی که تلفن های همراه دارای شبکه های قدرتمند شده اند و شبکه های تلفن همراه کیفیتشان نسبت به قبل بهتر شده، داده ها نشان می دهد که سرعت داده های تلفن همراه هنوز هم بسیار کند تر از سرعت پهنای باند است. بنابراین،باید هنگام طراحی وب سایت خود برای موبایل دقت بسیار زیادی را به خرج دهید.
اگر شما یک وبسایت پاسخگو برای دسکتاپ و موبایل دارید، می توانید با استفاده از کد تصاویر عکسی که باید نمایش داده شود را تغییر دهید. با استفاده از تگ های تصویر مثل `srcset` و ‘sizes’ تگ img، شما می توانید مرورگر را با لیستی از انواع تصاویر روبرو سازید تا مرورگر بهترین اندازه تصویر را برای بارگذاری بر روی یک دستگاه خاص از لیست موجود بر اساس ابعاد دستگاه و طرح شما انتخاب کند.
عامل دیگری که با دستگاه های تلفن همراه به تصویر می آید، نسبت پیکسل دستگاه یا مقدار DPR است. تلفن های همراه مدرن دارای صفحه نمایش با چگالی بالا هستند که پیکسل های بیشتری را در یک اینچ مربع قرار می دهند.
یک تصویر که در دستگاه های معمولی خوب ظاهر می شود، روی صفحه نمایش با چگالی بالا کمی تیره می شود. راه حل این است تصویری که قرار است بارگذاری شود ۲ برابر روی صفحه نمایش با DPR 2، و ۳x برابر بر روی صفحه نمایش با DPR 3 و تصویر معمولی ۱x در دستگاه های دیگر استفاده میشود. این کار نیز با استفاده از همان کد ها عملی میشود که با یک سرچ ساده در اینترنت میتوانید پیدا کنید.
یک ویژگی مدرن به نام Client Hints وجود دارد که با تصاویر همان کاری را که در بالا به شما معرفی کردیم را انجام میدهد و باعث می شود که کد بسیار با کیفیت تر نسبت به روش attribute `srcset` و` size`باشد ولی چگونگی کار آن نیز یک موضوع عظیم در خود است که خارج از محدوده برای این پست است و در اینجا قابل آموزش دادن نیست.
در این مقاله سه تا از روش های افزایش سرعت تصاویر سایت را به شما عزیزان آموزش دادیم امیدواریم که به رعایت آن ها سرعت سایت خود را بهبود بخشید با آموزش های دیگر اوچماخ با ما همراه باشید خدانگهدار
