بهبود سرعت بارگذاری تصاویر سایت: معمایی پیچیده

در دنیای پرسرعت امروز صبر و حوصله ما آدم ها روز به روز کمتر می شود؛ به خصوص وقتی پای اینترنت در میان باشد. همه ما این تجربه کلافه کننده را داشته ایم: روی لینکی کلیک می کنیم و با یک صفحه سفید و یک آیکون چرخان روبه رو می شویم که انگار قرار نیست هیچ وقت محتوایی را به ما نشان دهد. در بیشتر موارد پس از چند ثانیه انتظار دکمه بازگشت را انتخاب و قید آن سایت را برای همیشه می زنیم، اما آیا تا به حال فکر کرده اید که چرا برخی سایت ها مثل یک خودروی مسابقه سریع و چابک هستند و برخی دیگر مانند یک لاک پشت خسته و سنگین حرکت می کنند؟

یکی از اصلی ترین و در عین حال نادیده گرفته شده ترین مقصران این کندی تصاویر هستند. عکس های زیبا، باکیفیت و چشم نواز روح و جان یک سایت هستند، اما اگر به درستی بهینه سازی نشوند می توانند به سنگین ترین زنجیرهایی تبدیل شوند که پای وب سایت شما را بسته اند و آن را از حرکت باز می دارند. 

خبر خوب این است که رام کردن این غول های زیبا و تبدیل آنها به همراهانی چابک کار پیچیده ای نیست. ما در این مقاله می خواهیم پنج راز ساده اما بسیار قدرتمند را با شما در میان بگذاریم که به شما کمک می کند تا با سبک سازی تصاویر سرعت سایت خود را به شکل چشمگیری افزایش دهید و بازدیدکنندگان‎تان را راضی و خوشحال نگه دارید.

هنر فشرده سازی: چگونه بدون افت کیفیت، حجم عکس را کم کنیم؟

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

مطلب مرتبط: چگونه تصاویر بهتری برای وب سایت مان تهیه کنیم؟

هر عکس مجموعه ای از داده های دیجیتال است که بخشی از آنها غیرضروری هستند. ابزارهای فشرده سازی عکس این داده های اضافی را حذف می کنند و حجم فایل عکس را گاهی تا ۷۰ یا ۸۰ درصد کاهش می دهند، در حالی که افت کیفیت آن برای چشم انسان تقریبا نامحسوس است. این کار باعث می شود مرورگر اینترنت برای دانلود کردن عکس به زمان و حجم اینترنت بسیار کمتری نیاز داشته باشد. ابزارهای آنلاین رایگان و نرم افزارهای زیادی وجود دارند که می توانند به راحتی این کار را برای شما انجام دهند. این اولین و شاید مهمترین قدم برای سبک کردن وب سایت تان است.

اندازه مهم است: عکس را به اندازه قابش انتخاب کنید

فرض کنید یک قاب عکس کوچک و زیبا با ابعاد ۱۰ در ۱۵ سانتی متر دارید. آیا منطقی است که یک پوستر بسیار بزرگ با ابعاد یک در دو متر را بردارید و سعی کنید آن را با تا و مچاله کردن در آن قاب کوچک جا دهید؟ قطعا نه! این کار هم به پوستر آسیب می زند و هم نتیجه نهایی، زشت و نامرتب خواهد بود.

در دنیای وب هم دقیقا همین قانون صادق است. بسیاری از کسب و کارها یک عکس بسیار بزرگ با رزولوشن بالا را (مثلا عکسی که برای چاپ بیلبورد مناسب است) مستقیما در وب سایت خود بارگذاری می کنند و سپس با استفاده از کد به مرورگر دستور می دهند که آن را در یک فضای کوچک نمایش دهد. این یک اشتباه بزرگ است. چون مرورگر مجبور است ابتدا کل آن فایل غول پیکر را دانلود کند و سپس کلی انرژی صرف کوچک کردن ابعاد آن نماید. راه درست این است که قبل از بارگذاری عکس ابعاد آن را دقیقا به اندازه ای که قرار است در سایت نمایش داده شود، تغییر دهید. این کار ساده، تاثیر فوق العاده ای بر سرعت بارگذاری سایت شما خواهد داشت.

هر ابزاری برای کاری ساخته شده: انتخاب فرمت فایل مناسب

در جعبه ابزار شما، هم چکش وجود دارد، هم پیچ گوشتی. شما برای کوبیدن یک میخ، از پیچ گوشتی استفاده نمی کنید. در دنیای تصاویر دیجیتال هم فرمت های مختلفی وجود دارند که هر کدام برای کار خاصی مناسب تر هستند. انتخاب فرمت درست، می تواند به شکل قابل توجهی بر حجم و کیفیت تصویر شما تاثیر بگذارد.

3 فرمت رایج که باید بشناسید عبارتند از:

•     فرمت JPG و JPEG: این فرمت بهترین انتخاب برای عکس های عکاسی شده (مثل عکس محصولات، منظره ها یا پرتره ها) است. این فرمت می تواند میلیون ها رنگ را نمایش دهد و الگوریتم فشرده سازی بسیار خوبی دارد.

•    فرمت PNG: این فرمت انتخاب ایده آل برای تصاویر گرافیکی، لوگوها، آیکون ها و هر تصویری است که نیاز به پس زمینه شفاف (Transparent) دارد. کیفیت آن برای این نوع تصاویر معمولا از JPEG بهتر است، اما حجم آن نیز ممکن است بیشتر باشد.

•    فرمت Webp: این یک فرمت مدرن است که توسط گوگل توسعه داده شده و به طور خاص برای وب طراحی شده است. در حقیقت این فرمت می تواند تصاویر را با کیفیتی مشابه JPEG و PNG اما با حجمی بسیار کمتر ذخیره کند. امروزه تقریبا تمام مرورگرهای مدرن از این فرمت پشتیبانی می کنند و استفاده از آن یک راه عالی برای داشتن تصاویری باکیفیت و در عین حال سبک است.

وقتی لازم شد، نشان بده: جادوی بارگذاری تنبل 

یک گالری هنری بسیار بزرگ با صدها تابلو را تصور کنید. وقتی شما وارد سالن اصلی می شوید، آیا تمام تابلوهای موجود در تمام اتاق های دیگر همزمان در مقابل چشمان شما ظاهر می شوند؟ قطعا نه. شما با قدم زدن در گالری و ورود به هر اتاق جدید، تابلوهای آن اتاق را می بینید.

بارگذاری تنبل یا Lazy Loading هم دقیقا همین کار را با وب سایت شما انجام می دهد. به جای اینکه مرورگر مجبور باشد تمام عکس های یک صفحه بلند را همان ابتدا دانلود کند (حتی عکس هایی که در انتهای صفحه قرار دارند و کاربر هنوز آنها را نمی بیند)، این تکنیک هوشمند به مرورگر می گوید: «فقط عکس هایی را دانلود کن که در محدوده دید کاربر قرار دارند. هر وقت کاربر به پایین صفحه اسکرول کرد و به عکس های بعدی نزدیک شد، آن وقت آنها را بارگذاری کن.» این روش تاثیر شگفت انگیزی بر سرعت اولیه بارگذاری صفحه شما دارد و باعث می شود کاربر خیلی سریع تر به محتوای اصلی دسترسی پیدا کند.

نزدیک تر، سریع تر است: قدرت شبکه های توزیع محتوا 

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

مطلب مرتبط: 4 راهکار برای افزایش تاثیرگذاری تصاویر در کسب و کار

یک شبکه توزیع محتوا یا CDN هم همین کار را برای محتوای دیجیتال شما، به خصوص فایل های سنگینی مانند تصاویر، انجام می دهد. این فرآیند در واقع کپی هایی از تصاویر وب سایت شما را بر روی سرورهای متعددی در نقاط مختلف دنیا ذخیره می کند. وقتی کاربری از یک کشور دیگر می خواهد سایت شما را ببیند، تصاویر از نزدیک ترین سرور به او نمایش داده می شوند، نه از سرور اصلی شما که شاید هزاران کیلومتر با او فاصله داشته باشد. این کاهش مسافت فیزیکی به معنای کاهش زمان بارگذاری و افزایش سرعت برای تمام کاربران شما در سراسر جهان است.

منابع:

https://attrock.com