img

نکاتی اساسی برای بهینه سازی تصویر

/
/
/

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

در صورت نیاز می‌توانید به کتابهای الکترونیک ویرایش تصویر تحت عنوان « بهینه سازی اساسی تصویر» نوشته addy osmany از طریق مسیر https://images.guide دسترسی داشته باشید. در این مقاله، چند نکته را از کتاب addy osmany خواهید آموخت که به شما در کاهش حجم تصاویر وب سایت کمک می‌کند دهید و باعث می‌شود تا بارگذاری آنها سریعتر انجام شود.

 

تصاویر اصلی را از پیش بارگذاری کنید و آنها را با دقت انتخاب کنید
وب سایت خود را مورد بررسی قرار داده و تصاویر اصلی آن را مشخص کنید. در اکثر موارد، تصاویر اصلی یک لوگو و یا بنری بزرگ در دنیای وب است که شما در اسرع وقت می‌توانید آن را آماده کنید.
اینجاست که روش از پیش بارگزاری کردن (preload) اهمیت ویژه‌ای پیدا می‌کند. preload روشی برای ارائه تصاویر به مشتری است و در آن پیش از اینکه تجزیه کننده مرورگر (browser parser) این تصاویر را پیدا کند، باید این تصاویر بازیابی شود. شما از این روش می‌تواند تقریبا برای هر چیزی استفاده کنید اما برای تصاویر دارای اهمیت، این روش گزینه‌ای عالی به شمار می‌آید. در اینجا، مثالی از کاربرد روش preload در عنصر <head> از زبان html نشان داده م شود که برای از پیش بارگزاری یک بنر بزرگ استفاده می‌شود:

<link rel=”preload” href=”/img/logo.svg” as=”image”>

همانند ساختار زیر نیز می‌توانید از روش preload در سرتیتر http استفاده کنید:

Link: </img/logo.svg>; rel=preload; as=image

در زیر دو صفحه یکسان که در مرورگر کروم بارگذاری شده است را می‌توان مشاهده کرد. یکی از این تصاویر از روش preload برای بارگزاری یک بنر بزرگ استفاده می‌کند در حالی که تصویر دیگر این روش را به کار نمی برد.
در مثالی که از روش preload بهره می‌برد، بنر با سرعت بیشتر و حدود نیم ثانیه زودتر در صفحه مرورگر به نمایش در می‌آید.

 

نکاتی اساسی برای بهینه سازی تصویرعکسهای svg را به صورت اتوماتیک سبکتر کنید
بهینه سازی تصاویرsvg با بهینه ساز تصاویر دیگر تفاوت دارد زیرا بر خلاف تصاویر JPEG و یا PNG، تصاویر SVG از متن و به ویژه نشانه گذاری‌های XML تشکیل شده است. این بدان معنیست که شما عملیات بهینه سازی را بر روی متن انجام می‌دهید. برای مثال، پروسه حذف تمام کاراکترهای غیرضروری از کد منبع و یا فشرده سازی با استفاده از gzip و یا brotli می‌تواند به تصاویر SVG اعمال شود. علاوه بر این، می‌توان از یک ابزار optimiser همانند SVGO برای کاهش اندازه تصاویر SVG استفاده کرد.
در صورتی که شما صرفاً از تصاویر vector استفاده نکنید و قصد ایجاد آنها را داشته باشید چطور؟ اگر از کاربران نرم افزار illustrator هستید، می‌توانید به صورت اتوماتیک تصاویر خود را سبک تر کرده و از طریق پنجره محاوره‌ای سبک سازی میزان نقاط اتصال در مسیر را کاهش دهید.
این پنجره محاوره‌ای را می‌توانید در نرم افزار illustrator و مسیر object>path>simplify بیابید. با کاهش دقت منحنی و همچنین تنظیم حداقل میزان زاویه به صورت اختیاری، امکان حذف نقاط اضافی مسیر در تصویر وجود دارد.

هشدارهای مربوط به استفاه از روش preload
preload روش قدرتمندی محسوب می‌شود و می‌تواند به صورت انحصاری اجزای دیگری به غیر از تصاویر را بارگذاری کند. شما می‌بایست از خطرهای احتمالی آن که در ذیل آمده است اگاه باشید:

۱- اعلام نوع محتوای موارد با ارزش را در قسمت as attribute فراموش نکنید. در غیراین صورت، مرورگر ممکن است که آن موارد را دوبار دانلود کند. برای تصاویر، پارامتر as باید مقدار image را داشته باشد. برای یادگیری نحوه اعلام نوع محتوا جهت موارد با ارزش دیگر همانند CSS و یا JavaScript، آدرس

https://w3c.github.io/preload/#as-attribute

را بررسی کنید.

 

۲- همه مرورگرها از روش preload پشتیبانی نمی کنند. در مواردی بدین شکل، روش preload هیچ مزیتی بابت کارآیی به ما ارائه نمی دهد. پشتیبانی از روش preload بر روی مرورگرها در حال توسعه است ولی با این حال هنگام مراجعه به مسیر

http://caniuse.com/#feat=link-rel-preload

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

۳- در نهایت، اگر روش preload را در HTTP header به کار ببرید، متوجه خواهید شد که بعضی از مواردی که با http/2 پیاده سازی می‌شود مانند Apache، از روش server push سود می‌برند. اگر می‌دانید که روش preload را در چه زمینه‌ای به کار می‌برید می‌توانید از مزایای عملکرد آن بهره مند شوید. روش server push با حافظه cache مرورگر ارتباط برقرار می‌کند که در بعضی از مرورگرها نسبتاً موضوعی عجیب است. اگر میخواهید چیزی را بدون پیاده سازی http/2 و با استفاده از روش server push از پیش بارگزاری کنید، عبارت ad nopush را به انتهای لینکهای resource hint اضافه کنید. برای کسب اطلاعات بیشتر در مورد ویژگیهای روش server push ، می‌توانید به مقاله‌ای با آدرس

jakearchibald.com/2017/h2-push-tougher-than-i-thought

مراجعه کنید.

 

نکاتی اساسی برای بهینه سازی تصویر

بهینه سازی ماهرانه
اگر می‌خواهید اطلاعاتی بیشتر از نکات ذکر شده در این مقاله کسب کنید، در این قسمت منابعی معرفی شده است تا میزان دانش شما در زمینه بهینه سازی تصویر را افزایش دهد:

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

https://images.guide
کتاب الکترونیکی بهینه سازی تصویر نوشته addy osmany راهنمای جامعی در این زمینه محسوب می‌شود. این کتاب درمورد به کار بردن عکس و export کردن آن، مفاهیم باینری بهینه سازی تصویر، استفاده از ایده‌های جدید و راه حل‌های عملی مطالبی مفید را ارائه می‌دهد.

 

عملکرد وب: بهینه سازی ویدیو

آیا عملکرد وب تحت تاثیر تبدیل تصاویر gif متحرک به ویدیو قرار خواهد گرفت؟ برای پاسخ به این سوال به آدرس

Web Performance: Video Optimization

مراجعه کنید و سپس به مقاله نوشته شده توسط Estelle Weyl مراجعه کنید تا نکات بهینه سازی تصویر را فرا بگیرید.

 

کارآیی وب در عمل
اگر شما به نکاتی فراتر از بهینه سازی تصویر در زمینه وب علاقه مند هستید کافی است این کتاب را از انتشارات manning تهیه کرده و مطالعه کنید.

https://www.manning.com/wagner

در این مثال، توجه داشته باشید که کاهش در دقت منحنی به میزان ۶ درصد باعث می‌شود تا ۵۴ نقطه از مسیر حذف شود و در صورت استفاده درست و بجا، می‌تواند حتی ظاهر تصاویر را نیز بهبود بخشد.
هنگامی که از این ابزار استفاده می‌کنید باید احتیاط لازم را به عمل آورید. هنگامی که دقت منحنی بسیار کم باشد، در صورت ساخت تصاویر می‌تواند منجر به ایجاد لکه‌ها و نقاط رنگی بر روی آن شود. اگر از میزان تعادل مناسب استفاده کنید قطعاً نتیجه خوبی خواهید گرفت.

 

تبدیل تصاویر gif متحرک به ویدیو
تصاویر gif متحرک مناسب برای اکثر افراد جذاب است. این تصاویر همه احساسات را به خوبی منتقل می‌کنند اما آنها واقعا حجیم هستند. ابزارهای بهینه سازی عکس مانند gifsicle می‌تواند به حذف میزان حجم اضافی با مقدار چندین کیلوبایت کمک کند اما باید علاوه بر تبدیل تصاویر متحرک به ویدیو، بتوان آنها را در تگ <vidoe> زبان html جایگذاری کرد. ffmpeg ابزاری مناسب در خط فرمان برای انجام این کار است:

shell
ffmpeg -i animated.gif -b:v 512K animated.webm
ffmpeg -i animated.gif -b:v 512K animated.ogv
ffmpeg -i animated.gif -b:v 512K animated.mp4

 

دستورات بالا همراه با استفاده از آرگومان –i تصاویر gif را به عنوان ورودی می‌گیرد. نتایج خروجی به صورت ویدیوهایی است که نرخ بیت آن متغیر است و حداکثر مقدار آن ۵۱۲kbps است. برای مثال یک تصویر متحرک gif با حجم ۹۸۹kb به عنوان مقدار ورودی گرفته شده است و سپس بعد از کاهش به این فایلهای ویدیویی تبدیل شده است: ۱۵۵Kb MP4 ، ۱۰۹Kb OGV، ۸۵Kb WebM. همه این فایلهای ویدیویی از لحاظ کیفیت قابل مقایسه با تصویر متحرک gif اولیه می‌باشند. به دلیل پشتیبانی مرورگرها از تگ <video> در همه جا، این سه فرمت ویدیویی می‌تواند به صورت زیر نیز استفاده شود :

<video preload=”none”>
<source src=”/videos/animated.webm” type=”video/webm”>
<source src=”/videos/animated.ogv” type=”video/ogg”>
<source src=”/videos/animated.mp4” type=”video/mp4”>
</video>

اگر تصمیم شما مبنی بر ادامه استفاده از این روش است، اطمینان حاصل کنید که تگهای <source> به درستی مرتب شده باشد. بنابراین بهینه ترین فرمت اولین گزینه محسوب می‌شود و گزینه آخر نیز دارای کمترین میزان بهینه سازی است. در اغلب موارد، ابتدا با فرمت ویدیویی WebM عملیات آغاز می‌شود و سپس اندازه فایل خروجی هر ویدیو بررسی می‌شود. ابتدا با کوچکترین مقدار شروع شده و با بزرگترین مقدار خاتمه پیدا می‌کند.
اگر شما ابزار کمکی ffmpeg را ندارید و یا طرز استفاده از آن را نمی دانید، می‌توانید به آدرس https://www.ffmpeg.org مراجعه کنید. نصب آن در اغلب سیستم عاملها با استفاده از یک مدیر بسته همانند Chocolatey یا Homebrew آسان است.

 

نکاتی اساسی برای بهینه سازی تصویر

بارگذاری کند همراه با intersection observer
تصاویری با بارگذاری کند را ممکن است تجربه کرده باشید اما بسیاری از اسکریپت‌هایی که به کندی بارگذاری می‌شوند از دستیار رویداد پیمایشی (scroll event handler) که متکی به cpu است، استفاده می‌کنند. چنین روشهایی باعث ایجاد تعامل کند و آهسته در یک صفحه می‌شوند.
سخت افزار قدیمی تر همراه با قدرت پردازش کمتر، مستعد ابتلا به اثرات این نوع کد است. خودداری از اجرای این کدها خود می‌تواند تا حدودی کمک کننده باشد اما هنگامی که عناصر بر روی صفحه نمایش دیده می‌شوند این راه حل کمی ناکارآمد و نا مرتب به نظر می‌رسد. خوشبختانه، intersection observer API روشی ساده تر و بسیار کارآمدتر را برای تعیین عناصر صفحه نمایش فراهم می‌کند. در اینجا نمونه‌ای از نشانه گذاری تصویر همراه با بارگذاری کند آورده شده است:

<img class=”lazy” data-src=”/images/lazy-loaded-image.
jpg” src=”/images/placeholder.jpg” alt=”I’m lazy.” width=”۳۲۰”
height=”۲۴۰”>

 

دراینجا، ما تصویری به نام placeholder را در ویژگی src بارگذاری می‌کنیم و سپس URL تصویری را که می‌خواهیم به کندی در ویژگی data-src بارگذاری شود، ذخیره می‌کنیم. سپس با افزودن class of lazy به عنصر <element> دسترسی راحت را با queryselectorall فراهم می‌کنیم. کد این عملیات به صورت زیر است:

document.addEventListener (“DOMContentLoaded”, function()
{
if(“IntersectionObserver” in window &&
“IntersectionObserverEntry” in window &&
“intersectionRatio” in window.IntersectionObserverEntry. prototype)
{ elements = document.querySelectorAll(“img.lazy”);
var imageObserver = new IntersectionObserver(function(en tries, observer)
{ entries.forEach(function(entry)
{ if(entry.isIntersecting){ entry.target.setAttribute(“src”, entry.target. getAttribute(“data-src”));
entry.target.classList.remove(“lazy”);
imageObserver.unobserve(entry.target);
}
});
});
elements.forEach(function(image)
{ imageObserver.observe(image);
});
}
});

در اینجا، ما کد ر با یک شیء از سند به نام رویداد DOMContentLoaded ترکیب کرده ایم. این کد مرورگر فعلی را از لحاظ پشتیبانی از intersection observer مورد بررسی قرار می‌دهد . در صورت مشخص شدن، تمام عناصر img دارای class of lazy را همراه با queryselectoall به دست می‌آوریم و سپس observer‌ها را به آنها متصل می‌کنیم.

 

نکاتی اساسی برای بهینه سازی تصویرobserver شامل ارجاع به عناصری که ما در حال مشاهده آنها هستیم (ورودی‌ها ) و خود observer است.
این کد مقدار isintersecting را به هر کدام از ورودی‌های observer اختصاص می‌دهد و هنگامی که عنصر مشاهده شده بر روی صفحه نمایش دیده نشود، مقدار صفر برای isintersecting برگردانده می‌شود و وقتی عنصری در صفحه نمایش مشاهده می‌شود مقداری بزرگتر از صفر برگردانده می‌شود. در اینجا، ما محتوای ویژگی data-src تصویر را با ویژگی src جابجا کرده ایم و lazy class را حذف کرده ایم. پس از اینکه یک تصویر به کندی بارگذاری شد ؛ با متد unobserve، observer از آن حذف می‌شود.
این روند بسیار ساده تر از به کار گیری دستیارهای پیمایشی است اما از آنجاییکه intersection observer دارای پشتیبانی جهانی نیست مجبور می‌شوید که از آن استفاده نکنید. اگر شما خواهان استفاده از یک اسکریپت هستید، یک lazy loader که از intersection observer بهره می‌گیرد را می‌توانید مورد استفاده قرار دهید اما همچنان شما مجبور به استفاده از روش‌های قدیمی هستید. این اسکریپت را می‌توانید از آدرس

https://github.com/malchata/yall.js/

دریافت کنید.

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text