shift

بهینه یا Optimize کردن Gif برای وب سایت

بهینه یا Optimize کردن Gif برای وب سایت

عاطفه
دسته: ابزارها  تگ ها: روش های فشرده سازی تصاویر چیست , روش فشرده سازی lossless چیست , روش فشرده سازی lossy چیست , چگونه گیف ها را بهینه کنیم

 

شبیه بسیاری از مردم، من هم به Gif ها علاقه‌مندم و تمایل دارم که از Gif ها در مقالاتم برای نشان دادن قابلیت‌ها استفاده کنم. برای مثال این‌یک نمونه گیف بر روی این مقاله است.


به‌هرحال یک مشکلی که با گیف ها داریم این است که سنگین هستند، حجم گیف بالا، 11.4 مگابایت هست (واقعاً حجم عکس بالا این‌قدر نیست چون با همچین عکسی صفحه اصلاً لود نمی‌شود.) اخیراً من متوجه شدم مقالاتی که گیف سنگین در آن‌ها وجود دارد به‌طور باورنکردنی کند بارگذاری می‌شوند.
دلیل این است که هر فریم در یک فایل کیف به‌عنوان یک عکس گیف ذخیره می‌شود که از الگوریتم فشرده‌سازی lossless استفاده می‌کند؛ و به این معنی است که در طول فشرده‌سازی، اطلاعاتی در کل عکس‌ها از بین نمی‌رود که منجر به گیف با سایز بیشتر می‌شود. برای حل مشکل گیف ها بر روی وب‌سایت، دو مورد وجود دارد که می‌توانیم انجام دهیم.


استفاده از ویدئو HTML5

با تعجب، الگوریتم فشرده‌سازی lossless که روی گیف ها انجام می‌شود به‌قدری ناکارآمد است که فرمت‌های ویدئویی مانند MP4 یا WebM فایل‌هایی با سایز کوچک‌تر از عکس‌های گیف تهیه می‌کنند. به همین دلیل، یک‌راه حل برای مشکل عملکرد GIF این است که از GIF استفاده نکنید و آن‌ها را با Autoplaying، Looping، ویدئو HTML5 جایگزین کنید.
با به کار بردن مشخصه‌های خاصی در عنصر <video>، می‌توان رفتار یک GIF را شبیه‌سازی کرد، اما فایلی با حجم بسیار کوچک‌تر استفاده کرد. ویژگی‌هایی که ما نیاز داریم شامل:
Autoplay: فورا ویدئو پخش می‌شود بدون اینکه دکمه play فشار داده شود.
Loop: حلقه بی‌نهایت ویدئو
Muted: گرچه هیچ آهنگ صوتی در GIF وجود ندارد، بیان این ویژگی برای سافاری iOS برای پخش خودکار ویدیو موردنیاز است.
Playsinline: برای سافاری iOS، اطمینان می‌دهد که ویدیو در حالت تمام صفحه نیست.
Poster: نمایش یک عکس مخصوص درزمانی که ویدئو در حال دانلود شدن است.
برای جایگزینی Gif در این مقاله می‌توانیم از عنصر ویدئو زیر استفاده کنیم.

<video autoplay loop muted playsinline poster="original.jpg">  
    <source type="video/webm" src="original.webm">
    <img src="original.gif">
</video>

این دستور قابلیت استفاده از ویدئویی کوچک، در اندازه 1 مگابایت به ما می‌دهد.

 


برای تبدیل GIF به WebM، می‌توانیم از CloudConvert استفاده کنیم. یا اگر از Cloudinal استفاده می‌کنید، می‌توانید پسوند فایل را از gif. به webm. تغییر دهید تا فرمت ویدیو را دریافت کنید.


بهینه‌سازی Lossy

در بعضی موارد، چون ویدئو Html5 در همه‌جا کار نمی‌کند، ما نمی‌توانیم از GIF واقعی استفاده کنیم. به‌عنوان‌مثال، هنگامی‌که این پست وبلاگ به‌عنوان یک ایمیل HTML تحویل داده می‌شود، GIF واقعی باید استفاده شود؛ بنابراین، برخی از بهینه‌سازی‌هایی که ما می‌توانیم برای GIF خود انجام دهیم را برای انجام کارایی بیشتر فراهم می‌کنیم.
الگوریتم‌های فشرده‌سازی عکس دو نوع هستند Lossless (غیر اتلافی) و Lossy (اتلافی). Lossless ها حجم تصاویر را بدون کاهش کیفیت، کم می‌کنند و داده‌ای را از بین نمی‌برند. ازجمله‌ی فرمتی‌هایی که این نوع فشرده‌سازی را پشتیبانی می‌کند، فرمت PNG و JPEG است. الگوریتم فشرده‌سازی Lossy بخشی از داده‌های کم‌اهمیت را حذف می‌کنند و حجم عکس را کاهش می‌دهند و البته کیفیت آن را نیز کاهش می‌دهند و تغییرات جزئی در رنگ و تصویر به وجود می‌آورند البته این کاهش کیفیت در محدوده‌ای است که چشم انسان قادر به تشخیص آن نیست.
ابزارهایی برای فشرده‌سازی به روش Lossy وجود دارد. یک ابزار محبوب برای بهینه‌سازی گیف ها gifsicle و giflossy است. Gifsicle یک CLI (Command Line Interface) برای دست‌کاری فایل تصاویر Gif است و giflossy که مشابه Gifsicle است فقط باکمی تغییرات نسبت به آن، کارایی جدیدی به آن اضافه‌شده است (به‌اصطلاح Fork گفته می‌شود) و گزینه Lossy-- ویژگی جدید آن است.
برای اعمال giflossy در فشرده‌سازی Lossy دستور زیر را باید بکار ببرید:

gifsicle -O3 --lossy=80 -o compressed.gif original.gif 

03-: به ما می‌گوید که gifsicle چند تلاش را برای بهینه‌سازی بکار ببرد تا مناسب‌ترین را پیدا کند.
lossy=80--: این گزینه می‌گوید که چه مقدار فشرده‌سازی اعمال شود.
بستگی به نیازتان دارد. شما می‌توانید این عدد را تنظیم کنید.
o compressed.gif-: این گزینه می‌گوید که فایل خروجی چه فرمتی داشته باشد.
در آخر مسیر فایل را مشخص می‌کنیم.



این گیف را برای مثال در ابتدا 11.4 حجم آن بود و اکنون 6 مگابایت است.
با ترکیب این دو متد ما می‌توانیم از گیف ها استفاده کنیم به‌طوری‌که کیفیت آن‌ها به‌طور چشمگیری کاهش پیدا نکند.

 

نظر خود را بنویسید...
ارسال نظر
لغو