۵ مرحله برای سرعت بخشیدن به تصاویر
۵ مرحله برای سرعت بخشیدن به تصاویر : تصاویر جزء اصلی هر وب سایت هستند. بر اساس بایگانی HTTP ، تصاویر بیش از ۶۰ درصد داده های بارگذاری شده در صفحات وب را تشکیل می دهند. اگر به دنبال سرعت بخشیدن به وب سایت سنگین خود هستید ، به عنوان یک جزء حیاتی تقریباً در همه وب سایت ها ، خواه تجارت الکترونیکی ، اخبار ، وب سایت های مد ، وبلاگ ها یا پورتالهای مسافرتی باشد ، بهینه سازی تصویر مهم است و شاید کمترین کار ممکن باشد.
بهینه سازی تصاویر در وب سایت شما را می توان به طور کلی به ۳ دسته تقسیم کرد – سبک تر ، کمتر بارگذاری و سریعتر بارگذاری کنید. ۵ تکنیکی که ما در این مقاله مورد بحث قرار می دهیم یا هر تکنیک دیگری که با آن روبرو می شوید به احتمال زیاد در هر یک از این ۳ دسته قرار می گیرند.
۱. اندازه تصاویر خود را تغییر دهید
داشتن این واجب است. اندازه تصاویر خود را دقیقاً به آنچه در وب سایت شما نیاز است تغییر دهید. و نه ، من در مورد تغییر اندازه با استفاده از CSS یا در HTML صحبت نمی کنم. من در مورد تغییر اندازه تصویر روی سرور و سپس ارسال آن به مرورگر صحبت می کنم.
به عنوان مثال ، شما ۴۰۰۰x3000px تصویری از محصولی دارید که می خواهید در وب سایت تجارت الکترونیک خود فهرست کنید. اما در وب سایت خود ، باید تصویری بسیار کوچکتر از این محصول نشان دهید. این می تواند یک ۲۰۰x300pxتصویر در صفحه فهرست محصولات و یک صفحه ۸۰۰x1000pxدر جزئیات محصول باشد. اطمینان حاصل کنید که تصویر اصلی را قبل از ارسال به مرورگر به این ابعاد کاهش دهید. اندازه های تغییر یافته بسیار کوچکتر از تصویر اصلی هستند و بسیار سریعتر از تصویر اصلی بارگیری می شوند.
۲. تصاویر خود را بهینه کنید
گام بعدی در سرعت بخشیدن به وب سایت سنگین ، انتخاب قالب و کیفیت مناسب برای هر تصویر در وب سایت شما است.
JPG ، PNG و GIF رایج ترین فرمت های تصویری هستند که در حال حاضر در وب استفاده می شوند و هر کدام برای موارد استفاده متفاوت مناسب هستند . یکی دیگر از فرمت های تصویری نسبتاً جدید به نام WebP وجود دارد که بهترین فرمت های تصویر را با هم ترکیب می کند ، اندازه آن ۳۰٪ کوچکتر است و تقریباً در ۷۵٪ مرورگرهای مدرن پشتیبانی می شود .
با توجه به مزایای عظیم عملکرد ، شما باید تصاویر خود را در قالب WebP تا جایی که ممکن است ارائه دهید. در مرورگرهای دیگر ، می توانید فرمت تصویر اصلی را ارائه دهید.
۵ مرحله برای سرعت بخشیدن به تصاویر
۳. برای موبایل بسازید
در دنیای امروز ، اگر شما در راه اندازی وب سایت جدی هستید ، نادیده گرفتن کاربران تلفن همراه خیلی بد می باشد. داده ها نشان می دهد که تقریبا ۶۰ درصد از ترافیک جهانی از دستگاه های تلفن همراه سرچشمه می گیرد. و بله ، در حالی که تلفن های همراه قدرتمند شده اند و شبکه های تلفن همراه بهتر شده اند ، داده ها نشان می دهد که سرعت داده های تلفن همراه هنوز بسیار کندتر از سرعت باند پهن است. کشورها یا مناطقی در داخل کشورها وجود دارد که اتصال داده تلفن همراه در آنها ناپیوسته است . بنابراین ، هنگام طراحی تجربیات وب برای موبایل ، باید بسیار مراقب باشید.
اگر وب سایت ریسپانسیو برای دسکتاپ و تلفن همراه دارید ، می توانید به استفاده از تصاویر ریسپانسیو تغییر دهید .با استفاده از برچسب های تصویری پاسخگو ، با استفاده از ویژگی های srcset و اندازه ها در برچسب img ، می توانید لیستی از انواع یک تصویر واحد و تعریف اندازه نسبی تصویر در صفحه های مختلف را در اختیار مرورگر قرار دهید.به سپس مرورگر با توجه به ابعاد دستگاه و چیدمانی که تعیین می کنید ، بهترین اندازه تصویر را برای بارگیری در یک دستگاه خاص از لیست موجود تعیین می کند.
۴- منابع کمتری بار کنید
حتی پس از بهینه سازی همه تصاویر خود ، بارگذاری بیش از حد آنها می تواند سرعت وب سایت شما را کاهش داده و بر تجربه کاربر تأثیر منفی بگذارد. من طرفدار این نیستم که ما باید از تصاویر کمتری استفاده کنیم. اما ، مواردی وجود دارد که می توان از استفاده از تصاویر اجتناب کرد یا از بارگذاری آنها در جلو جلوگیری کرد.
به عنوان مثال ، به جای بارگذاری تصاویر ، می توانید دکمه ها ، گرادیان ها و سایر عناصر پیشرفته را با استفاده از CSS ایجاد کنید.
۵ مرحله برای سرعت بخشیدن به تصاویر
تکنیک مهم تر دیگری که می توانید استفاده کنید بارگذاری تنبل برای تصاویر است . بارگذاری تنبل اساساً به این معنی است که بارگذاری تصاویری را که فوراً مورد نیاز نیستند به تعویق می اندازیم. به طور معمول ، هر تصویری که برای کاربر روی صفحه یا نمای نمایش قابل مشاهده نباشد ، می تواند در زمان بعدی بارگذاری شود ، یعنی زمانی که تصویر وارد می شود یا در شرف ورود به درگاه نمایش است.
۵. برای تحویل تصویر از یک CDN خوب استفاده کنید
هنگامی که اندازه تصاویر و تعداد تصاویری که در یک صفحه خاص بارگیری می شوند را حل کردید ، گام بعدی این است که مطمئن شوید تصاویری که در وب سایت شما بارگیری می شوند ، به سرعت بارگیری می شوند. کاهش زمان بارگذاری تصویر نه تنها به شما کمک می کند تا زمان بارگذاری کلی صفحه را سریعتر و در نتیجه تجربه کاربری بهتری را در وب سایت خود کسب کنید ، بلکه به شما در رتبه بندی بالاتر در موتورهای جستجو نیز کمک می کند .
۵ مرحله برای سرعت بخشیدن به تصاویر
فرض کنید سرور وب سایت شما در ایالات متحده واقع شده است. یک شبکه تحویل محتوا تصاویر شما را در شبکه سرورهای توزیع شده خود ذخیره می کند (این پیچیده تر از آن است ، اما به خاطر سادگی ، فرض می کنیم این). سپس ، اگر کاربری از برزیل تصویری از وب سایت شما درخواست کند ، به جای دریافت آن تصویر از سرور شما در ایالات متحده ، CDN آن را از نزدیک ترین گره به آن کاربر در برزیل ارائه می دهد. این زمان رفت و برگشت مورد نیاز برای بارگذاری تصویر را کاهش می دهد. برخی از CDN های قابل توجه در این صفحه ویکی پدیا فهرست شده اند.
نتیجه
در مقاله ۵ مرحله برای سرعت بخشیدن به تصاویر ما تمام تکنیک های اصلی پیرامون بهینه سازی تصویر و بهبود عملکرد را پوشش داده ایم. با در اختیار داشتن این اطلاعات ، می توانید ۹۰ درصد مشکلات مربوط به تصویر خود را حل کنید ، اگر نه بیشتر ، که به شما کمک می کند زمان بارگذاری سریعتر صفحه را دریافت کرده و در نتایج جستجو رتبه بالاتری کسب کنید. برای تصاویر موجود در وب سایت خود همیشه به خاطر داشته باشید – سبک تر ، کمتر بارگذاری و سریعتر بارگذاری کنید.
منبع : codeburst.io
