Как улучшить производительность вашего сайта при использовании GIFs

Как улучшить производительность вашего сайта При использовании GIFs

GIF формат был первоначально разработан в 1987 году Дебютировал Стив Wilhite из Compuserve, GIFs улучшилось на черно-белых изображений , используемых в течение этого времени, позволяя использовать 256 цветов, сохраняя при этом сжатый формат , который все еще может быть загружен с помощью тех , кто использует медленные модемы. Кроме того, веб – разработчики и дизайнеры могли бы создать анимацию через временных задержек. И по сей день, мало что изменилось в отношении GIFs.

Из – за своей простоты, широкой поддержки этого формата, и легкость , с которой он может быть использован для потоковой передачи видеоклипов, формат GIF самый старый формат файла до сих пор широко используется в настоящее время . Этот кадр анимации особенность GIFs гарантирует , что формат остается популярным, несмотря на рост JPEG и PNG изображений.

Как улучшить производительность вашего сайта При использовании GIFs

Несмотря на свою популярность и повсеместность в Интернете ( особенно в отношении анимированных GIF – файлов ), GIFs не самый производительный из вариантов изображения. Если вы используете GIFs на ваших сайтах, очень важно , что вы заботитесь , чтобы оптимизировать GIF – файлы , так что они не создают слишком много накладных расходов.

Эта статья будет охватывать способы оптимизации GIF-файлов, как статические, так и анимированные, и предложит отличную альтернативу можно использовать для устранения раздуваться страницы в результате использования GIFs в качестве анимации.

Почему вы должны оптимизировать GIF-файлы?

Производительность имеет значение , когда речь идет о разработке веб – страниц, и GIFs не самый производительный из вариантов изображения. В то время как они отлично подходят для захвата внимание Вашего пользователя и повсеместно любил для обеспечения коротких очередей информации в игровой форме, GIFs были не предназначены для анимации (несмотря на их будучи обычно используется для таких). Таким образом , использование GIFs приводит к тяжелым весам страниц и бедных опыт пользователей в результате медленной скорости загрузки страницы.

Как улучшить производительность вашего сайта при использовании GIFs

В этом разделе мы рассмотрим несколько способов, вы можете улучшить производительность вашего сайта с помощью относительно GIFs. Мы сначала вырыть в способов обработки статических GIFs, и мы закончим, обсуждая способы минимизации накладных расходов в результате анимированных GIF-файлов.

Есть два способа сжатия изображений:

Одним из основных методов оптимизации GIFs является сжать их. Существуют два метода сжатия, которые обычно используются:

  • Сжатие с потерями: Сжатие с потерями удаляет часть данных из исходного файла, в результате чего изображение с уменьшенным размером файла. Тем не менее, каждый раз , когда вы сохраните файл после сжатия, качество графики деградирует несколько, которые могут привести к нечеткой, пиксельного изображения с течением времени.
  • Сжатие без потерь: Сжатие без потерь сохраняет все данные из исходного файла, а это значит , что сжатый файл может быть несжатый , чтобы получить исходный файл. В то время как размер файла остается больше , чем если бы вы использовали сжатие с потерями, качество вашего изображения не ухудшается с течением времени.

Позже в этом посте мы рассмотрим влияние обоих типов оптимизации на GIFs.

Повышение производительности сайтов, которые используют статические файлы GIF путем преобразования в PNG.

Самый простой способ улучшить производительность вашего сайта , чтобы сделать ваше изображение , используя формат PNG вместо формата GIF. В то время как два формата очень похожи с точки зрения того , чтобы быть хорошим выбором для отображения простой графики, PNG файлы имеют преимущество возможности сжать до размера 5-25% меньше , чем эквивалентный файл GIF. GIFs изначально были созданы , чтобы использовать метод сжатия без потерь , называемый алгоритм Зива-Зив-Велч (LZW) , который был определен в 1970 – е годы. Тем не менее, современные методы сжатия гораздо более производительным , чем LZW, и вы можете воспользоваться этим, используя форматы , которые используют эти методы, такие , как в формате PNG.

Такие преобразования форматов файлов довольно легко сделать, и есть обилие программных опций вы можете выбрать, в том числе бесплатный веб-утилиты , такие как те , от Pic.io и Convertio .

Повышение производительности сайтов, которые используют анимированные GIF-файлы одним из двух способов:

Анимированные GIF, в то время чрезвычайно популярны, могут быть огромные файлы, которые требуют длительного времени загрузки. Например, GIF, длина которого всего несколько секунд может быть несколько мегабайт. Для того, чтобы улучшить производительность вашего сайта, воспользуйтесь одним из следующих способов:

  • Lossy оптимизация
  • Преобразование анимированных GIF в видео HTML5

Lossy оптимизация на анимированных GIF-файлов

Поскольку подавляющее большинство данных , содержащих анимированные GIF – изображения является графические данные, и потому , что без потерь оптимизации не может изменять графические данные, у вас есть только один приемлемый вариант , когда дело доходит до оптимизации анимированного GIF за пределы минимума: с потерями методы оптимизации .

Lossy оптимизаций работать , потому что человеческий глаз не делает очень хорошую работу на различие между тонкими изменениями в цвете. Например, изображение может содержать тысячи оттенков одного цвета, при этом один пиксель , показывающий , как только немного отличаются от тех , которые рядом с ним. Потому что ваш глаз не будет в состоянии провести различие между двумя оттенками, файл изображения можно легко манипулировать: Один из цветов заменяет другой, что делает файл меньше.

Поскольку анимированные GIF – изображения, по существу , ряд отдельных GIFs, вы можете использовать эти методы , чтобы уменьшить размер вашего анимированного файла. Делая каждый отдельный файл меньше, ваш общий размер файла меньше , а также. Один из способов , вы можете сделать это, используя простой набор программного обеспечения , который может автоматически выполнять такие надавливания (такие как модифицированная версия gifsicle ).

Преобразование анимированных GIF-файлов в HTML5 видео

В то время как вы можете уменьшить размер анимированного GIF, вы можете по- прежнему в конечном итоге с файлом , который больше , чем она должна быть. GIFs никогда не были предназначены для хранения видео, а также то , что в настоящее время считается анимация действительно результатом попытке уменьшить накладные расходы на хранение и передача нескольких изображений , которые разделяют идентичные метаданные. Сегодня, однако, у нас есть еще один вариант , который потенциально может сделать ваши GIFs до 95% меньше: конвертирования анимированных GIF – файлов в HTML5 видео .

HTML5 видео является всеохватывающий термин для способности современного веб – браузера для воспроизведения видео контента с помощью тега <видео> без необходимости использования внешних плагинов. Когда эта функция впервые была выпущена в 2009 году, было много споров о том , как такие видео будет храниться и как они будут закодированы. Сегодня, однако, принятый стандарт является H.264-кодированное видео хранится в файле контейнер MP4 (который, для простоты, мы будем называть как MP4 видео отсюда на). В дополнение к поиску намного лучше из – за его проектируются для потокового видео, MP4 файлы намного меньше , а также:

Более 90% современных веб-браузеров поддерживают видео MP4.

Есть много способов , чтобы преобразовать ваш анимированный GIF в MP4, такие как популярный с открытым исходным кодом инструмент командной строки FFmpeg и веб-утилиты Cloud Convert . С помощью последнего, вы можете увидеть экономию размера файла , который можно путем преобразования.

Вот оригинальный анимированный GIF:

sven.gif

Вот видео MP4, который создается из GIF:

Глядя на размеры файлов, мы видим, что оригинал был 100 KB. Путем преобразования GIF в MP4, мы в конечном итоге с файлом, который находится всего в 23 Кб, что на 75% меньше:

вывод

GIFs являются старейшими формат файла до сих пор широко используется сегодня из – за своей простоты, почти всеобщей поддержки, а также возможность использовать в качестве анимации. Несмотря на эти положительные черты, GIFs , как правило, большие файлы, что приводит к странице наворотов , которые могут негативно повлиять на производительность ваших веб – страниц и привести к плохой опыт пользователей. Таким образом , вы должны рассмотреть серьезную оптимизацию статических GIFs, отходя от анимированных GIF –файлов, а также внедрения видеоклипов с использованием более современных технологий ,таких как HTML5 / MP4 видео. А для дополнительной углубленной информации о реализации этих изменений, скачать бесплатно книгу строгостью в, Книга GIF: Полное руководство по Оптимизация GIFs .

Оставить ответ