Уменьшение размера gif. Изменить размер GIF: легче не бывает

2019-04-04

Посещая различные сайты, каждый из вас встречал яркие, прыгающие, привлекающие внимание читателей gif картинки.

Я и сама использовала такую – привлекала внимание к своей форме подписки.

Но gif анимация слишком много весит, поэтому сильно затормаживает загрузку блога на компьютер пользователя.

Об этой проблеме мне любезно сообщил сервис speedpage, когда я проверяла скорость загрузки своего блога. Мне посоветовали изменить само изображение, а не только уменьшить его размеры в html.

С обычными изображениями у меня все в порядке, я их перед загрузкой на блог.

Вы увидели на каком-либо сайте картинку gif, она понравилась, вы захотели вставить ее в сайдбар (виджеты):

• просто перетащите изображение к себе на компьютер в папку (не в документ). Позднее откроете ее с помощью интернета и получите код картинки;
• или правой клавишей мыши откройте исходный код страницы, найдите код картинки и скопируйте его (Ctrl+F, в открывшуюся строчку вставить gif).

Как уменьшить размер gif онлайн

Уменьшить размер gif изображения как обычно – в Microsoft Office Picture Manager или Paint не получилось, картинка перестала прыгать.

Дело в том, что gif анимация представляет собой несколько изображений, упакованных в архив (раскадровка). При изменении размера в Microsoft Office Picture Manager или Paint часть изображений теряется, остается только одно.

Поэтому идем на сервис http: // ru.toolson.net/. Он позволяет изменить размер gif онлайн и сжать gif. Отдельной функции СЖАТЬ нет, но при уменьшении размера вес изображения автоматически уменьшится. Там же можно картинку обрезать.

Идем на вкладку ИЗМЕНИТЬ gif.

Вначале я просто попробовала изменить размер гиф анимации:

ВЫБРАЛА файл у себя на компьютере (прыгающую стрелку, размером которой был недоволен сервис speedpage);

ЗАГРУЗИЛА анимацию;

ВЫБРАЛА новую ширину и высоту (поменьше);

СКАЧАЛА измененный файл.

Мне не понравилось, получилось неаккуратно.

Раскадровка gif в архиве zip

Нажмите кнопку РАСКАДРОВКА, файл скачается.

РАСПАКУЙТЕ zip архив в отдельную папку.

Последовательно КАЖДОЕ изображение обработайте в программе Paint. я подробно писала здесь.

Напоминаю:

ОТКРОЙТЕ картинку в программе Paint - в верхнем меню выберите РИСУНОК - РАСТЯНУТЬ/НАКЛОНИТЬ - ЗАДАЙТЕ процентное соотношение уменьшения - OK - СОХРАНИТЬ.

Почему я использовала программу Paint?

В Microsoft Office Picture Manager не удалось получить одинаковое изменение размеров. Все картинки уменьшились по-разному, даже фон получился разный – где-то прозрачный, на других не прозрачный. Собрать из таких разносортных элементов хорошую gif анимацию не получилось.

Затем идите на вкладку СОЗДАТЬ GIF анимацию.

Нажмите кнопку ЗАГРУЗИТЬ, последовательно загрузите все обработанные элементы (у меня было десять).

Введите название анимации и пропишите интервал между кадрами (у меня 70). Тут можете попробовать разные значения. Чем меньше интервал, тем быстрее будет прыгать картинка. Изменяете интервал, сохраняете и смотрите, правильно ли движется картинка.

Также можно указать желаемые размеры, сделать симпатичную рамку и применить предлагаемые эффекты.

Все нравится предпросмотр? СОЗДАТЬ, гифка скачается на компьютер.

Как повернуть gif анимацию

Иногда не требуется изменить размер gif. Достаточно просто повернуть приглянувшуюся анимацию. Как это сделать онлайн?

В сервисе http: // inettools.net/ выберите вкладку ПОВОРОТ ИЗОБРАЖЕНИЙ

ВЫБЕРИТЕ изображение у себя на компьютере - ЗАГРУЗИТЕ

УКАЖИТЕ угол поворота 90, 180, 270 градусов или произвольный угол =>

ПОВЕРНУТЬ gif - СКАЧАТЬ файл.

Не пугайтесь, изображение онлайн будет немного увеличено и размыто, но к вам на комп оно попадет в нужном виде.

Вот таким образом у меня получилось уменьшить размеры gif картинки, ее вес (сжать ее). Надеюсь, мои усилия положительно повлияют на скорость загрузки блога. Умение повернуть gif анимацию пригодится в будущем.

P.S. К сожалению, gif картинка отображается корректно только если вы попадаете на страницу впервые. Если вы перелистнули, а затем возвратились, браузер предоставит вам кеш страницы. И gif картинку там видно не будет. Что с этим можно сделать, пока не выяснила.

P.S. Для профессионального использования как нельзя лучше подходит Фотошоп. Вот простой .

Анимированные графические файлы с расширением GIF очень популярны в интернете. Однако на многих сайтах всё ещё существуют ограничения на размер загружаемых ГИФ. Потому сегодня мы хотим представить способы, которыми можно изменить высоту и ширину таких изображений.

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

Способ 1: GIMP

Свободный редактор графики отличается обширным функционалом, который мало чем уступает платному конкуренту. Среди опций программы есть и возможность изменения размера «гифок». Это делается так:

1. Запустите программу и выберите вкладку «Файл» , затем используйте опцию «Открыть» .



2. С помощью встроенного в GIMP файлового менеджера доберитесь до каталога с нужным изображением, выделите его мышкой и воспользуйтесь кнопкой «Открыть» .



3. Когда файл будет загружен в программу, выберите вкладку «Изображение» , затем — пункт «Режим» , в котором отметьте вариант «RGB» .



4. Далее зайдите во вкладку «Фильтры» , щелкните по опции «Анимация» и выберите вариант «Разоптимизировать» .



5. Обратите внимание, что появилось новая открытая вкладка в рабочем окне GIMP. Все последующие манипуляции следует проводить только в ней!



6. Снова используйте пункт «Изображение» , но на этот раз выберите опцию «Размер изображения» .

   

   Появится всплывающее окно с настройками высоты и ширины кадров анимации. Введите нужные значение (вручную или с помощью переключателей) и нажмите на кнопку «Изменить» .



7. Чтобы сохранить результаты, перейдите по пунктам «Файл» – «Экспортировать как…» .
   
   
   Появится окно выбора места хранения, имени и расширения файла. Проследуйте к каталогу, куда хотите сохранить изменённый файл и переименуйте его, если потребуется. Затем щёлкните «Выберите тип файла» и отметьте в появившемся списке вариант «Изображение GIF» . Проверьте настройки, после чего нажмите на кнопку «Экспортировать» .



8. Появится окно настроек экспорта. Обязательно отметьте пункт «Сохранить как анимацию» , остальные параметры можете оставить без изменений. Воспользуйтесь кнопкой «Экспорт» , чтобы сохранить изображение.



9. Проверьте результат работы – изображение уменьшилось до выбранных размеров.

Как видим, с задачей изменения размеров GIF-анимации GIMP справляется великолепно. Единственным недостатком можно назвать сложность процесса для неопытных пользователей и тормоза в работе с объёмными изображениями.

Способ 2: Adobe Photoshop

Является самым функциональным графическим редактором среди представленных на рынке. Естественно, в нём присутствует возможность изменения размеров GIF-анимаций.

1. Откройте программу. Первым делом выберите пункт «Окно» . В нём зайдите в меню «Рабочая среда» и активируйте пункт «Движение» .



2. Далее откройте файл, размеры которого хотите изменить. Для этого выберите пункты «Файл» — «Открыть» .
   
   
   Запустится «Проводник» . Проследуйте к папке, в которой хранится целевое изображение, выделите его мышкой и нажмите на кнопку «Открыть» .



3. Анимация будет загружена в программу. Обратите внимание на панель «Шкала времени» — на ней отображены все кадры редактируемого файла.



4. Для изменения размера используйте пункт «Изображение» , в котором выберите вариант «Размер изображения» .
   
   
   Откроется окошко настройки ширины и высоты картинки. Убедитесь, что единицы измерения установлены в положение «Пиксели» , затем введите в поля «Ширина» и «Высота» нужные вам значения. Остальные настройки можно не трогать. Проверьте параметры и нажимайте «ОК» .



5. Чтобы сохранить полученный результат, воспользуйтесь пунктом «Файл» , в котором выберите вариант «Экспортировать» , а далее — «Экспортировать для Web (старая версия)…» .
   
   
   Настройки в этом окне тоже лучше не менять, потому сразу нажимайте на кнопку «Сохранить» внизу рабочей области утилиты экспорта.



6. Выберите в «Проводнике» местоположение изменённого GIF, переименуйте при необходимости и нажмите «Сохранить» .

   
   После этого Photoshop можно закрывать.

7. Проверьте результат в указанной папке при сохранении папке.

Фотошоп представляет собой более быстрый и удобный способ изменения размера GIF-анимации, но недостатки тоже имеются: программа платная, а срок действия пробной версии слишком короткий.

В официальных русскоязычных версиях Photoshop с незапамятных времён опция "Dithering" переводится как "Дизеринг", что является, мягко говоря, неточностью. В данном контексте "Dithering" означает "сглаживание", сглаживание переходов от одного цвета к другому.
Поскольку GIF-файлы содержат ограниченное количество цветов, для улучшения вида рисунка может понадобиться создание переходов между отдельными цветами, а для этого нужно имитировать недостающие цвета. Для создания этих цветов и существует опция "Дизеринг". Всего имеется четыре алгоритма для подобной имитации сглаживания - "Без дизеринга", "Случайное", "Регулярный" и "Шум":

Рассмотрим алгоритмы подробнее (надеюсь, с режимом "Без дизеринга" всё понятно).

Используя алгоритм "Случайное" (Diffusion), мы, можем регулировать количество сглаживания.
В алгоритмах "Регулярный" (Pattern) и "Шум" (Noise) настройки отсутствуют, Photoshop всё делает автоматически.

Для некоторых изображений "Дизеринг" просто необходим, но следует помнить, что чем больше его значение, тем больше размер файла, т.к. он добавляет разноцветные пиксели в непосредственной близости друг от друга, для имитации вторичных цветов или гладких цветовых градаций.

4. Другие настройки

"Потери" (Lossy) - управление уровнем потерь визуальной информации при сглаживании, которые могут уменьшить размер файла, но также и ухудшить качество картинки. Доступна при отключенной опции "Чересстрочно" (Interlaced).

"Прозрачность" (Transparency) - имеет смысл включить в том случае, если изображение содержит прозрачные участки. Алгоритмы сглаживания работают по принципу опции "Дизеринг" (Dithering) и называются так же.

5. Сравнение исходной и оптимизированной версий

После того, как Вы добавили свои настройки в диалоговое окно сохранения для Web, с оптимизированной версией произошли изменения, и, почти всегда, в сторону ухудшения качества. Тщательно проверьте полученный результат, сравните его с исходником:

Вы можете просмотреть анимацию, а также задать параметры повторов - один раз, постоянно или задать собственное количество повторов:

Если результат Вас удовлетворил, переходите к следующему действию - сохранению анимации.

6. Подогнать оптимизацию анимации под указанный объём файла

Такая опция тоже имеется при сохранении анимации в Photoshop. Вы можете задать размер выходного файла, и исходя из этого Photoshop сам произведёт оптимизацию, подогнав размер файла под указанный Вами.

Нажимаем на кнопку в правом верхнем углу и выбираем строку "Оптимизировать по размеру файла" (Optimize to File Size)

7. Предварительный просмотр анимации в браузере, сохранение параметров оптимизации

После того, как Вы подобрали нужные настройки, сохраните их в наборе. Кликните по значку в правом верхнем углу окна сохранения для Web и нажмите на строку "Сохранить настройки":

Анимацию с нашими настройками мы можем предварительно просмотреть в браузере, нажав на кнопку в левом нижнем углу окна:

Будет показана не только анимация, но и все данные по файлу GIF - объём, линейные размеры и т.д., а также HTML-код. Для примера я взял анимацию из этого урока :

Если всё нравится, то сохраняем файл. Для этого нажимаем кнопку "Сохранить" в правом нижнем углу диалогового окна. Открывается новое окно, где выбираем путь, ставим настройки, как показано на рисунке (это настройки по умолчанию), нажимаем кнопку "Сохранить":

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

Я Вам предлагаю воспользоваться онлайн редактором, который называется «Ezgif.com », где можно не только изменять размер анимационных картинок, но и оптимизировать их, т. е. уменьшать их вес.

Еще с помощью этого онлайн редактора, можно многие баннеры из интернета переделать на свое усмотрение, и не нужно работать над дизайном. Вы просто пишите свой текст, и баннер готов.

Заходим сюда

Инструменты онлайн редактора «Ezgif.com»

Для быстрого редактирования GIF изображений, лучше воспользоваться онлайн редактором, чем Фотошоп. Ведь многие люди и понятия не имеют, как с Фотошоп работать, а здесь можно за считанные минуты отредактировать любое GIF изображение

Онлайн редактор выглядит так:

Редактора «Ezgif.com» для редактирования анимационных GIF картинок

До функционала Фотошоп он, конечно, не дотягивает, зато он имеет все необходимые инструменты для редактирования GIF изображений.

Возможности онлайн редактора:

1. Обрезка изображения

2. Изменение размера

3. Оптимизация изображения

4. Добавление эффектов

5. Изменение скорости анимации

6. Разборка анимации на кадры (фрагменты)

7. Добавление текста

8. Наложение другого изображения

Казалось бы, с виду простенький редактор, а какой мощный.

Давайте теперь рассмотрим все перечисленные инструменты отдельно.

Crop (Обрезка изображения): простой онлайн инструмент для обрезки анимационных картинок.

Загрузите картинку, а потом с помощью мыши выделите нужную часть изображения, которую хотите обрезать. Нажмите затем «Crop it » и все готово.

После того, как Вы загрузите изображение, под этой картинкой появляется информация о нем: размер в КБ, габариты картинки, и сколько кадров она содержит.

При обрезании картинки, можно задать размер вручную. Для этого под изображение нужно в поля «Left », «Top », «Width » и «Height » ввести нужные значения.

Resize (Изменение размера изображения): с помощью этого инструмента, можно изменить размер картинки или обрезать ее. После уменьшения, картинка остается такого же качества, и скорость анимации не изменяется.

В полях «New width » и «New height » нужно задать новый размер изображения, или можно просто указать процент (Percentage), а затем нажать «Resize it! ». Картинка будет уменьшена на процент, который Вы указали

С помощью этого инструмента, Вы можете быстро и легко менять размер GIF изображений. При увеличении размера картинки, качество будет теряться.

Если картинка после изменения стала как-то плохо отображать анимацию, тогда можно попробовать задать другой размер

Optimize (оптимизация): а с помощью этого инструмента, можно изменить размер (вес) файла GIF. Вес картинки становится меньше за счет уменьшения количества цветов в каждом кадре. Каждый кадр GIF содержит до 256 уникальных цветов, но при уменьшении количества цвета, можно добиться меньшего размера файла.

Оптимизация имеет множество методов, но можно подобрать оптимальный вариант, чтобы качество картинки оставалось хорошим. Подробнее об оптимизации читайте на сайте.

Effects (эффекты, изменение цвета изображения): с помощью этого инструмента, можно зеркально переворачивать изображение по горизонтали и вертикали.

Также изображение можно повернуть под определенным углом, если задать степень в поле «Rotate ». Изображению можно назначить другой цвет, сделать его черно-белым, или придать какой-то другой оттенок.

Speed (изменение скорости GIF анимации): этот инструмент предназначен для изменения скорости анимации.

Если вы хотите изменить скорость анимации пропорционально текущей, тогда используйте процентное соотношение «% of curent speed », а чтобы задать задержку между кадрами, нужно использовать метод «». Параметр «hundrediths of second between frames » задает время задержки между кадрами в сотых секундах (1/100)

Split (разобрать GIF картинку на кадры): э тот инструмент предназначен для преобразования анимационных GIF изображений в отдельные кадры, после чего каждый кадр можно редактировать отдельно.

Все кадры анимационной картинки можно скачать на компьютер. Для этого надо кликнуть по кадру правой кнопкой мыши, а затем в контекстном меню выбрать «сохранить изображение как …». Также все кадры можно скачать одним zip-архивом кликнув по «Download frames as ZIP »

Write (добавить текст): э тот инструмент позволяет добавлять текста к GIF анимации. Вы можете добавить текст ко всей GIF картинке, или к отдельным ее кадрам. Текст на картинке можно перемещать с помощью мыши.

Overlay (наложение другого изображения): этот инструмент позволяет на GIF изображение наложить другую картинку, и желательно, чтобы она была формата PNG или GIF.

На просторах интернета формат GIF считается одним из самых распространённых. Высокая популярность объясняется тем, что файл гиф имеет впечатляющий алгоритм сжатия, поддерживает функцию прозрачности. Следовательно, создавать анимацию с рекламными баннерами так же просто, как забивать мяч в пустые ворота.

Правда, есть маленький нюанс. Время от времени дизайнеры сталкиваются с необходимостью изменить размеры GIF . Кому-то его нужно уменьшить, другие нуждаются в увеличении. Как отредактировать такой контент? Например, обрезать его или сжать? Был бы у вас обычный файл jpeg , таких бы вопросов не возникало. Сжимайте его в графическом редакторе, даже не имея специальных знаний. Всего пара щелчков мышью – и работа выполнена на «отлично».

Как отредактировать ГИФ

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

GIF Resizer

Уникальный во всех смыслах редактор, позволяющий менять размеры «гифок» всего в несколько кликов. Для этого необходимо выполнить элементарные действия:

• Запустить программу.
• Найти в меню кнопку «Изменения размера» и нажать её.
• Нажав кнопку «Обзор», выбрать интересующий вас файл.
• Ввести требуемые параметры (длина и ширина).
• Нажать «Применить» и подождать несколько секунд.
• Готово – размеры анимированного контента стали такими, как ожидалось.

Кроме того, посредством GIF Resizer можно решить такие задачи:

• Изменить формат.
• Убрать логотип с анимашки.
• Уменьшить/увеличить размеры анимированного изображения.
• Конвертировать GIF в JPG , разложить на отдельные кадры.
• Перевести в PNG.

Останавливаться на этом функционале мы не будем, ведь нас с вами интересует исключительно сжатие анимаций в формате ГИФ. Просто знайте, что столкнувшись с разнообразными задачами по редактуре animation , есть смысл воспользоваться Resizer .

Ezgif

Премиальный сервис, позволяющий сжимать файлы в формате GIF и PNG . Кроме того, имеет множество различных инструментов, позволяющих наложить эффект.

Как пользоваться Ezgif ? Откройте главную страницу сервиса, нажмите «Обзор». Когда файл выбран, остаётся только нажать Upload . Различные варианты сжатия станут доступны после загрузки. Самый оптимальный вариант в соотношении размер/качество – Medium .

GIF Compressor

По-своему интересна программа GIF Compressor . Она умеет сжимать анимацию всего за 2 простых сжатия. Можно делать это сразу с несколькими файлами. Максимальный размер гиф-файла – 50 Мб.

Какое из приложений вам понравилось больше всего?