مقدمه‌ای بر رندر پیشرفته تصاویر

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

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

در این مقاله قصد داریم تا به شما بگوییم چگونه می توانید به مؤثرترین و پیشرفته‌ترین شکل تصاویر خود را برای ذخیره پهنای باند و زمان انتظار کاربران‌تان بهینه کنید. 

بهینه‌سازی خوب تصاویر

اولین قدم برای بهینه سازی تصاویر انتخاب درست قالب بندی آنها است.

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

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

در حال حاضر JPEG یکی از مرسوم ترین قالب های تصویری بیت‌مپ است. بخاطر گستردگی بسیار زیاد در پشتیبانی از این قالب تا به حال الگوریتم های فشرده سازی زیادی برای JPEG ارائه شده است. بسیاری از اوقات شما می توانید یک تصویر بزرگ با کیفیت عالی را در قالب JPEG در اندازه بسیار کمی پیدا کنید. 

در هر حال WebP یکی از رقبای بسیار سرسخت JPEG است. WebP نرخ فشرده سازی بسیار بالاتری را نسبت به JPEG ارائه می دهد. WebP در حال حاضر در اکثر مرورگرهای معروف به خوبی پشتیبانی می شود و توانایی نمایش را دارد. برای پشتیبانی و استفاده از این فرمت در مرورگر می بایست از المنت های <picture> و <source> همراه با صفت type استفاده کنید.

PNG و GIF نیز دو قالب تصویری مناسب برای افرادی است که می خواهند تصاویر با کیفیت و ترانسپارنت داشته باشند. علاوه بر آن همانطور که می دانید با قالب بندی GIF تصاویر متحرک نیز بسازید.

بارگذاری کند تصاویر

Lazy loading یا بارگذاری کند تکنیکی است که در آن تصاویر تا زمانی که کاربر به درستی روی آن قرار نگیرد، لود نمی شود. استفاده از این تکنیک برای ذخیره مقدار زیادی پهنای باند بسیار مناسب است و برای صفحه هایی که دارای دکمه CTA یا Call To Action در ابتدای صفحه هستند بسیار مفید است. اگر در چنین صفحاتی کاربر تنها بخواهد که روی دکمه CTA کلیک کند پس دلیلی برای لود مطالب دیگر صفحه واقعا وجود ندارد.

این حالت بدین شکل عمل می کند: شما باید از جاوا اسکریپت برای آنکه متوجه شوید محدوده تصویر در محدوده Viewport است استفاده کنید. اگر بود پس تصویر را لود کنید. این رویکرد به خوبی کار خواهد کرد به شرطی که با هربار اسکرول کردن کاربر و یا تغییر اندازه مرورگر دوباره وجود تصویر در محدوده Viewport را بررسی کند. اگر فکرش را بکنید شاید به این نتیجه برسید که انجام چنین کاری باعث کاهش کارایی وبسایت می شود.

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

البته باید گفت که IntersectionObserver API در حال حاضر پشتیبان بسیار خوبی را توسط مرورگرها دریافت نمی کند.

IntersectionObserver یک انتخاب بسیار عالی برای افرادی است که می خواهند راه حل خودشان را در اختیار داشته باشند. برای بقیه ما lazysizes یک انتخاب ایده آل است. این کتابخانه فول-فانکشنال، بهینه‌سازی شده و واکنشگرا است. تماما برای افرادی که قصد ساخت بارگذاری کند یا تنبل را دارند مناسب و کاراست.

این کتابخانه به خوبی در تمام مرورگرها پشتیبانی می شود. در زیر می توانید یک مثال کامل را از این کتابخانه مشاهده کنید.

تصاویر پیش‌رونده

تصویر پیش رونده به تصویری گفته می شود که در ابتدا با کیفیت بسیار پایینی لود می شود و رفته رفته به کیفیت خود می افزاید. برای طراحی چنین حالتی دو راه حل وجود دارد progressive encoding و placeholder ها.

Progressive Encoding

قالب بندی های JPEG، PNG و GIF همگی حالت های متفاوتی از Progressive Encoding را ارائه می‌دهند. مرورگرها نیز تا حدی می توانند چنین حالتی را برای تصاویر مهیا سازند و قبل از دانلود کامل تصویر آن را به صورت کم کیفیت نمایش دهند. 

برای مطالعه بیشتر در این زمینه می توانید مقاله Progressive JPEGs and Green Martians را مطالعه کنید.

Placeholders

Placeholders ها واقعا باعث نمی شوند که فرایند بارگذاری تصاویر سریع‌تر شود اما آنها منجر می شوند که کاربر روی لود تصاویر بیشتر صبر کند. این المان به کاربر می گوید که اگر تنها چند ثانیه منتظر بماند می تواند تصویری را مشاهده کند. از Placeholders بیشتر در وبسایت هایی استفاده می کنند که دارای سرعت لود کمی برای بارگذاری تصاویر هستند.

Placeholders ها در حالت های مختلفی ارائه می شوند:

• فضای خالی که با ابعاد تصویری که قرار است لود شود سازگاری و انطباق دارد.
• آیکن – مثلا آیکنی شبیه به یک فضای خالی یا شکلی که به کاربر اطلاع دهد که تصویری در حال لود شدن است.
• رنگ های خالص – درست مانند فضای خالی است با این تفاوت که در آنها از رنگ استفاده می شود.
• نسخه بی‌کیفیت تصویر – برخی از وبسایت ها ابتدا نسخه بی کیفیتی از تصویر را قرار می دهند و بعد از آن تصویر را در حالت کامل زمانی که آماده شد جایگزین می کنند. استفاده از این تکنیک می تواند با ابزار lazysizes و طراحی واکنشگرا نیز تلفیق شود. مزیت این کار در این است که کاربر تنها تصاویری را که نیاز دارد دانلود می کند. یک نمونه کلاسیک از این حالت وبسایتMedium.com است. نمونه هایی از این حالت را می توانید در تصاویر و بخش Codepen زیر مشاهده کنید.

آیا SVG را یادآوری کردیم؟

José Manuel Pérez فردی است که بخشی از این مقاله از تکنیک های وی الهام گرفته است، این توسعه دهنده تکنیک جدید را برای placeholder ها طراحی کرده‌ است. اون یک الگوریتم جدید را برای تصاویر و لود آنها ارائه کرده است با استفاده از انیمیشن فایل های SVG ساخته شده و بسیار سریع است. در این لینک می توانید پیشنمایشی از الگوریتم را مشاهده کنید و برای مطالعه بیشتر می توانید به صفحه آموزشی رسمی گیت‌هاب مراجعه کنید.

تمام این موارد را در کنار همدیگر قرار دهید.

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

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

منبع