5 گام برای سرعت بخشیدن به طراحی وب سایت سنگین تصویری خود
نوشته شده توسط : bahar

طراحی سایت

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

ادامه مطلب:





:: بازدید از این مطلب : 33
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : یک شنبه 8 اسفند 1400 | نظرات ()
مطالب مرتبط با این پست
لیست
می توانید دیدگاه خود را بنویسید


نام
آدرس ایمیل
وب سایت/بلاگ
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

آپلود عکس دلخواه: