بهینه سازی عکس های با فرمت تصاویر GIF + آموزش روش فشرده سازی

قالب گیف فرمت تبادل گرافیک در اصل در سال 1987 ساخته شده است. با استیو ویلهایت از Compuserve ، GIF با استفاده از 256 رنگ در حالی که یک قالب فشرده را حفظ می کند ، با استفاده از 256 رنگ ، تصاویر سیاه و سفید مورد استفاده را بهبود می بخشد. 

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

به دلیل سادگی ، پشتیبانی گسترده از این قالب و سهولت استفاده از آن برای پخش جریانی کلیپ های ویدیویی ، قالب GIF قدیمی ترین قالب پرونده است که امروزه معمولاً مورد استفاده قرار می گیرد. این ویژگی انیمیشن قاب در GIF تضمین می کند که با وجود ظهور تصاویر JPEG و PNG ، قالب محبوب باقی بماند.

چگونه می توان هنگام استفاده از GIF ، عملکرد سایت خود را بهبود بخشید؟

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

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

چرا باید GIF های خود را بهینه کنید؟

هنگام طراحی صفحات وب ، عملکرد مهم است و GIF بهترین عملکرد تصویر را ندارد. اگرچه اینها برای جلب توجه کاربر شما بسیار عالی هستند و به دلیل ارائه انبوهی از اطلاعات بصورت سرگرم کننده در سطح جهانی مورد پسند قرار می گیرند ، اما تصاویر GIF برای انیمیشن طراحی نشده اند (علی رغم اینکه معمولاً برای چنین مواردی مورد استفاده قرار می گیرند). به همین ترتیب ، استفاده از GIF به وزن زیاد صفحه و تجربه های ضعیف کاربر در نتیجه سرعت پایین بارگذاری صفحه منجر می شود.

چگونه می توان هنگام استفاده از GIF ، عملکرد سایت خود را بهبود بخشید؟

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

برای فشرده سازی تصاویر دو روش وجود دارد:

یکی از روشهای اصلی بهینه سازی GIF ، فشرده سازی آنهاست. 

دو روش فشرده سازی وجود دارد که معمولاً استفاده می شود:

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

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

بعداً در این پست ، ما به تأثیر هر دو نوع بهینه سازی در GIF خواهیم پرداخت.

با تبدیل به PNG ، عملکرد سایتهایی را که از GIF ثابت استفاده می کنند بهبود ببخشید.

ساده ترین راه برای بهبود عملکرد سایت شما ارائه تصویر به جای قالب GIF با استفاده از قالب PNG است. در حالی که این دو قالب از نظر گزینه های خوبی برای نمایش گرافیک های بسیار شباهت دارند ، فایل های PNG این مزیت را دارند که می توانند در اندازه 5-25٪ کوچکتر از پرونده معادل GIF فشرده شوند. GIF در ابتدا برای استفاده از تکنیک فشرده سازی بدون ضرر به نام الگوریتم Lempel-Ziv-Welch (LZW) ایجاد شده است که در دهه 1970 تعریف شد. با این حال ، تکنیک های مدرن فشرده سازی عملکرد بسیار بیشتری نسبت به LZW دارند و شما می توانید با استفاده از قالب هایی که از این تکنیک ها استفاده می کنند ، مانند PNG ، از این مزیت استفاده کنید.

انجام چنین فرمت های فایل بسیار آسان است ، و گزینه های زیادی از نرم افزار وجود دارد که می توانید انتخاب کنید ، از جمله برنامه های تحت وب رایگان مانند برنامه های Pic.io و Convertio.

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

GIF های متحرک اگرچه بسیار محبوب هستند ، اما می توانند فایل های عظیمی باشند که به زمان بارگیری طولانی نیاز دارند. به عنوان مثال ، یک GIF که فقط چند ثانیه طول دارد می تواند اندازه چند مگابایت باشد. برای بهبود عملکرد سایت خود ، از یکی از تکنیک های زیر استفاده کنید:

·        بهینه سازی ضرر

·        تبدیل GIF متحرک خود به ویدیوی HTML5

·        بهینه سازی ضرر در تصاویر متحرک GIF

از آنجا که اکثریت قریب به اتفاق داده های متشکل از GIF های متحرک ، داده های گرافیکی هستند و از آنجا که بهینه سازی های بدون ضرر نمی توانند داده های گرافیکی را تغییر دهند ، در هنگام بهینه سازی GIF متحرک بیش از حداقل ، تنها یک گزینه مناسب دارید:

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

از آنجا که GIF های متحرک اساساً یک سری GIF های منفرد هستند ، می توانید از این روش ها برای کاهش اندازه پرونده متحرک خود استفاده کنید. با کوچک کردن هر پرونده جداگانه ، پرونده کلی شما نیز کوچکتر است. یکی از راه های انجام این کار استفاده از یک مجموعه نرم افزاری ساده است که می تواند به طور خودکار چنین فشرده سازی هایی را انجام دهد (مانند نسخه اصلاح شده gifsicle).

تبدیل GIF های متحرک به فیلم های HTML5

اگرچه می توانید اندازه GIF متحرک را به حداقل برسانید ، اما ممکن است در نهایت با پرونده ای بزرگتر از آنچه که باید باشد در نهایت قرار بگیرید. GIF هرگز برای ذخیره ویدئو در نظر گرفته نشده است و آنچه اکنون به عنوان انیمیشن در نظر گرفته می شود واقعاً نتیجه تلاش برای کاهش هزینه اضافی در ذخیره سازی و انتقال چندین تصویر است که دارای فراداده یکسان هستند. امروز ، اما گزینه دیگری داریم که می تواند GIF های شما را تا 95٪ کوچکتر کند: تبدیل GIF های متحرک به ویدیوی HTML5.

آموزش های بیشتر در وبلاگ سئو روز