تصاوير جزء كليدي هر طراحي وب سايتي هستند. با توجه به HTTP آرشيو تصاوير بيش از 60 درصد از داده هاي بارگذاري شده در صفحات طراحي وب سايت را تشكيل مي دهند. اگر به دنبال سرعت بخشيدن به طراحي وب سايت سنگين تصويري خود هستيد، از آنجايي كه تقريباً يك مؤلفه مهم تقريباً در همه طراحي وب سايت ها، چه تجارت الكترونيك، طراحي وب سايت اخبار، طراحي وب سايت هاي مد، وبلاگ ها يا پورتال هاي مسافرتي، بسيار مهم است، بهينه سازي تصوير مهم است، و شايد پايين ترين ميوه باشد. بهينه سازي تصاوير در طراحي وب سايت شما را مي توان به طور كلي به 3 دسته تقسيم كرد: بارگذاري سبك تر در طراحي وب سايت ، بارگذاري كمتر و بارگذاري سريع تر در طراحي وب سايت. 5 تكنيكي كه در اين مقاله مورد بحث قرار مي‌دهيم يا هر تكنيك ديگري كه با آن روبرو مي‌شويد به احتمال زياد در هر يك از اين 3 دسته قرار مي‌گيرد. بنابراين، بياييد شروع كنيم و چند تكنيك ساده را كه مي‌توانيد امروز پياده‌سازي كنيد تا پيشرفت قابل‌ توجهي در بهينه‌سازي طراحي وب سايت سنگين تصوير خود داشته باشيد، بررسي كنيم. 1. اندازه تصاوير خود را در طراحي وب سايت تغيير دهيد انجام اين كار واجب است. اندازه تصاوير خود را دقيقاً به آنچه در طراحي وب سايت شما نياز است تغيير دهيد. و نه، من در مورد تغيير اندازه با استفاده از CSS يا در HTML صحبت نمي كنم. من در مورد تغيير اندازه تصوير در سرور و سپس ارسال آن به مرورگر صحبت مي كنم. به عنوان مثال، شما يك تصوير 4000x3000 پيكسل براي محصولي داريد كه مي خواهيد در طراحي وب سايت تجارت الكترونيك خود فهرست كنيد. با اين حال، در طراحي وب سايت خود، بايد تصوير بسيار كوچكتري از اين محصول را نشان دهيد. اين مي تواند يك تصوير 200x300 پيكسل در صفحه فهرست محصول و يك تصوير 800x1000 پيكسل در صفحه طراحي وب سايت جزئيات محصول باشد. قبل از ارسال تصوير به مرورگر، مطمئن شويد كه اندازه تصوير اصلي را به اين ابعاد كاهش داده ايد. تصاوير تغيير اندازه بسيار كوچكتر از تصوير اصلي هستند و بسيار سريعتر از تصوير اصلي بارگذاري مي شوند. به نظر من، تغيير اندازه نادرست تصاوير، بزرگترين حوزه بهينه سازي در اكثر طراحي وب سايت ها است. و اغلب، ما به عنوان توسعه دهندگان طراحي وب سايت ، تمايل داريم كه آن را ناديده بگيريم. سناريوي زير را در نظر بگيريد: شما با تصاويري با اندازه عالي براي طراحي وب سايت جديد خود شروع مي كنيد. در طي چند ماه آينده، طرح ‌بندي طراحي وب سايت شما تغيير مي‌كند و نيازهاي ابعاد تصوير شما نيز تغيير مي‌كند. با اين حال، به جاي توليد تصاوير جديد براي برآورده كردن اين نيازهاي ابعاد جديد، كه به خودي خود كاملاً يك كار است، به يك جايگزين نزديك بسنده مي كنيد. به عنوان مثال، شما از يك تصوير 300x200px استفاده مي كنيد كه در آن يك تصوير 200x200px مي توانست كار كند. حدس مي زنم اين اتفاق براي همه مي افتاد. در مثال بالا، تفاوت ممكن است براي يك تصوير واحد از نظر كيلوبايت كم به نظر برسد. اما هنوز 21 درصد است. اين تفاوت كوچك كه براي تعداد زيادي تصاوير جمع شده است، پتانسيل افزايش سرعت طراحي وب سايت و كاهش مصرف پهناي باند طراحي وب سايت شما را تا 21 درصد دارد. بهترين سناريو اين است كه يك سرور تصوير داشته باشيد كه بتواند اندازه يك تصوير را به هر بعد مشخص، در زمان واقعي، فقط با تغيير URL تصوير تغيير دهد. به اين ترتيب، هر زمان كه نياز ابعاد تصوير شما تغيير كرد، تنها چيزي كه براي دريافت تصاوير جديد خود نياز داريد اين است كه آن بعد را در URL را در طراحي وب سايت مشخص كنيد. بسياري از پياده سازي هاي منبع باز و سمت سرور وجود دارد كه مي توانيد به تنهايي آنها را پياده سازي كنيد. ImageKit يكي از اين سرويس هاي شخص ثالث است كه جدا از همه ويژگي هاي ديگر، تغيير اندازه و برش مبتني بر URL را در زمان واقعي ارائه مي دهد. و شما مي توانيد آن را بر روي تمام تصاوير موجود خود در طراحي وب سايت و همچنين در چند دقيقه راه اندازي استفاده كنيد.

ادامه مطلب: