اخبارو مقالات

5مرحله برای سرعت بخشیدن به سرعت پایین عکس های وب سایت خود(قسمت 1)

1. اندازه تصاویر خود را تغییر دهید

 

داشتن این واجب است. اندازه تصاویر خود را دقیقاً به اندازه مورد نیاز طراحی وب سایت ارزان خود تغییر دهید. و نه ، من در مورد تغییر اندازه با استفاده از CSS یا در HTML صحبت نمی کنم. من در مورد تغییر اندازه تصویر در سرور و سپس ارسال آن به مرورگر صحبت می کنم.

 

به عنوان مثال ، شما برای محصولی که می خواهید در طراحی وب سایت ارزان ارزان تجارت الکترونیکی خود لیست کنید ، 4000x3000px تصویر دارید. با این حال ، در طراحی وب سایت ارزان خود ، باید تصویر بسیار کوچکتری از این محصول نشان دهید. این می تواند یک تصویر 200x300px در صفحه لیست محصول و 800x1000px در صفحه جزئیات محصول باشد. قبل از ارسال تصویر به مرورگر ، اطمینان حاصل کنید که تصویر اصلی را در این ابعاد پایین آورده اید. تصاویر تغییر یافته بسیار کوچکتر از تصویر اصلی هستند و بسیار سریعتر از تصویر اصلی بارگیری می شوند.

 

به نظر من ، تغییر اندازه نادرست تصاویر ، بیشترین زمینه بهینه سازی در بیشتر وب سایت ها است. و غالباً ، ما به عنوان توسعه دهنده تمایل داریم که از آن چشم پوشی کنیم. سناریوی زیر را در نظر بگیرید: شما کار خود را با تصاویر کاملاً مناسب برای وب سایت جدید خود شروع می کنید. طی چند ماه آینده ، چیدمان وب سایت شما تغییر می کند و همچنین الزامات ابعاد تصویر شما نیز تغییر می کند. با این حال ، شما به جای تولید تصاویر جدید برای پاسخگویی به این الزامات بعدی جدید ، که به خودی خود کاملاً یک وظیفه است ، با یک گزینه نزدیک کنار می آیید. به عنوان مثال ، شما از یک تصویر 300x200px استفاده می کنید که یک تصویر 200x200px در آن کار می کرده است. حدس می زنم این اتفاق برای همه رخ داده باشد.

 

 

 

در مثال بالا ، ممکن است تفاوت برای یک تصویر از نظر کیلوبایت کم باشد. اما هنوز 21٪ است. این تفاوت اندک ، که برای تصاویر زیادی جمع شده است ، سرعت وب سایت شما را کاهش داده و 21٪ از مصرف پهنای باند شما را کاهش می دهد.

 

بهترین سناریو داشتن یک سرور تصویری است که بتواند تصویر را در هر زمان واقعی و فقط با تغییر URL تصویر تغییر اندازه دهد. به این ترتیب ، هر زمان که نیاز به بعد تصویر شما تغییر کند ، تمام آنچه برای دریافت تصاویر جدید خود نیاز دارید این است که آن بعد را در URL مشخص کنید.

 

بسیاری از پیاده سازی های منبع باز و سمت سرور وجود دارد که می توانید به تنهایی پیاده سازی کنید. ImageKit یکی از این سرویس های شخص ثالث است که جدا از تمام ویژگی های دیگر ، تغییر اندازه و برش URL را بر اساس زمان واقعی ارائه می دهد. و می توانید در چند دقیقه از تنظیمات ، از آن در همه تصاویر موجود خود استفاده کنید.