Привет, всем кто сейчас читает . Расскажу сегодня о своих нескольких способах, как уменьшить размер (вес) картинки, скриншота, фотографии, Gif-анимации без потери качества для вставки на сайт.
Уменьшаем размер картинки разными способами
Каждая картинка или изображение, называйте как вам нравится;), имеет свой размер, который складывается из нескольких моментов, это высота-вертикаль, ширина-горизонталь (px) и вес — килобайт (КБ), мегабайт (МБ).
Уменьшение размера (веса) изображения положительно скажется на скорости загрузки сайта — web-производительности, а также поможет сэкономить место на хостинге, компьютере, флешке.
Согласитесь, изображения сделанные на профессиональных фотоаппаратах (зеркалках), порой могут весить больше 2-х мегабайт, а по ширине быть 2500 px. Если такое изображение без сжатия вставить на сайт, то это в значительной мере увеличит время загрузки, за что сегодня ПС накладывают фильтр, особенно это касается ПС Google.
Первый способ оптимизируем изображение перед загрузкой на сайт в программе Photoshop
Надо сказать, что это самый популярный способ, изменения размера фото и сжатия, среди владельцев сайтов. Подойдёт он и для обычных пользователей Internet. При этом действия выполняемые этой программе минимальные, что важно и для начинающих блогеров.
- 1. Открываем новый файл при помощи программы Photoshop и потом нажимаем «Сохранить для Web».
- 2. Открывается новое окно, где задаём необходимые параметры: качество, формат и размеры изображения.
Так, достаточно изменить качество с цифр высокое от 60 до средних показателей от 30-50, чтобы значительно уменьшить вес. Ориентиром может служить желаемое качество. В окне предосмотра контролируйте насколько меняется изображение.
Что касается формата изображения, то я выбираю сохранить как Jpeg, если это цветное фото, а если надо сохранить прозрачность слоя или чёрно-белый скриншот то, как правило, это формат Png, чтобы текст и цифры на нём читались отчётливее. По теме Фотошоп читайте: , используя эту программу.
Размер изображения (в пикселях) меняю в этом же окне, что удобно. Нажимаю «Сохранить» и дальше прописываю название файла на латинице.
Второй способ сжатия изображений с помощью сервисов-онлайн
Если честно, то прибегаю к этому методу крайне редко. Однако, эти сервисы помогают сжать без потери качества сразу несколько (пакет) изображений, что влияет на продуктивность. Это многим известные сервисы krakin.io, TinyPNG ; Compresspng и другие.
Расскажу ещё про один — это Optimizilla , который протестировала и результаты мне действительно понравились. Попробуйте и вы.
На скриншоте видно, что в систему было загружено фото JPEG, весом 60 КБ. Сервис сжал его автоматически на 39% до 37 КБ, но визуально качество практически не пострадало.
С помощью удобного ползунка или знаков [+ -] можно поиграть с качеством изображения; приблизить фото и лишний раз рассмотреть все детали после сжатия, перед тем как сохранить. Это очень актуальная функция предосмотра фото, для сайтов с портфолио фотографа, туристических, женских ресурсов, интернет-магазинов, где важны изображения товаров в высоком качестве.
Изменение размера высоты и ширины изображения
Процесс изменения размера ширины и высоты изображения думаю сегодня уже не вызывает затруднения ни у кого. Сделать это можно как онлайн, так и в стандартном графическом редакторе Paint или более удобном Paint.NET.
Открываете новый файл в программе, нажимаете «Изменить размер», отмечаете, что в пикселях, сохраняя при этом пропорции. Ок.
Изменяем вес изображения в формате Gif онлайн
В этой части статьи расскажу, как быстро сжать не только изображения в формате JPEG, PNG, SVG, но и Gif. Gif-ки весят достаточно много, поэтому велико число запросов, как уменьшить вес gif картинки без потери анимации и дополнительных усилий).
- Воспользуемся первым онлайн-сервисом Compressor.io .
Compressor.io — это мощный инструмент-онлайн для резкого уменьшения размера ваших цифровых фотографий и Gif анимации. Он позволяет сохранять высокое качество изображений, использует два вида сжатия, где есть разница и нет разницы до и после сжатия. Именно так характеризуют они свой сервис, а на главной странице в этом можно убедиться.
Пример, сжатия Gif анимации смотрите на скриншоте. Скачать оптимизированное изображение можно удобным для вас способом: на компьютер, сохранить на Dropbox, Google Диск (drive.google.com).
- Второй сервис Online Image Optimizer .
Название сервиса говорит само за себя. Online Image Optimizer легко оптимизирует разные форматы изображений, в том числе и Gif анимацию. Достаточно загрузить изображение и нажать «Optimize». Дополнительно сервис Online Image Optimizer помогает быстро создать не только favicon для сайта, но имеет в своём арсенале много полезных онлайн-инструментов.
- Третий способ — это программа-приложение SuperGIF для MacOS и Windows.
Вы можете приобрести платную версию SuperGIF или бесплатно скачать демо, где есть небольшие ограничения по функционалу.
Вне зависимости каким образом вы получили GIF-анимацию, вы можете уменьшить её размер.
Если вы использовали наш сервис по созданию GIF-анимации из видео, то мы рекомендуем использовать оригинал для экспериментов, т.к. как каждая конвертация может ухудшить качество получаемого файла.
Все примеры будут основаны на коротком клипе FullHD видео 16 секунд и 30 кадров в секунду.
Немного теории о GIF
Вкратце: GIF - это максимум 256 цветов (8 бит) + сжатие без потерь (LZW).
Как и любое сжатие без потерь - оно не слишком сжимает файл. В итоге - мы уменьшим размер не более чем на 50% (очень сильно зависит от картинки).
Тестовое видео:
Считаем размер одного кадра: 1920 * 1080 * 40%-100% = 0.8-2 мб.
А теперь посчитаем для 16 секунд видео: 16 сек * 30 кадров в секунду * (0.8-2) мб = 384-960 мб!
Наш исходный файл при преобразовании получился 309мб. Меньше расчетного, но тоже большой.
Удивились? А ведь размер исходного видео всего несколько мегабайт! Как такое может?
А просто: GIF - это мамонт, да, он классный, но с ним надо уметь работать.
Шаг 1. Уменьшить GIF. Размер изображения
Обязательно уменьшите размер до адекватного (не более 640 пикселей по большей стороне).
В этом случае размер будет: 640 * 360 * 40%-100% = 90-225 кб.
И размер видео: 16 сек * 30 кадров * 90-225 кб = 42-105 мб.
Наш исходный файл при преобразовании получился 38мб. Меньше расчетного, но тоже большой.
Много? Да. Идем дальше...
Шаг 2. Количество кадров
30 кадров - это круто, но к сожалению для GIF - это очень много.
Уменьшите количество до 10 кадров и вы сократите размер в 3! раза.
Считаем: 16 сек * 10 кадров * 90-255кб = 14-35 мб.
Наш исходный файл при преобразовании получился 14.5 мб. Уже лучше.
Например, если у вас видео 60 кадров в секунду - вы можете уменьшить из ряда: 1, 2, 3, 4, 5, 6, 10, 15, 20, 30.
А если 25 кадров, то ряд будет: 1, 5...
Или 30: 1, 2, 3, 6, 10, 15.
Шаг 3. Уменьшайте длительность анимации
Сокращайте/удаляйте не нужные вам сцены, здесь зависимость простая - сократили в 2 раза - получили размер в 2 раза меньший.
Шаг 4. Оптимизировать GIF. Выбор качества.
Есть специальные утилиты, для сжатия GIF-анимаций, например, GIFsicle .
Специально для вас мы сделали её онлайн . Просто выберите ваш файл и нажмите оптимизировать.
Так же вы можете управлять качеством файла.
Для вас мы сделали три разные версии GIF-анимации для оценки сжатия с помощью уменьшения качества:
- Размер при 100% качества: 13.3 мб
- Размер при 50% качества: 13.3 мб
- Размер при 0% качества: 10.1 мб
Я Вам предлагаю воспользоваться онлайн редактором, который называется «Ezgif.com », где можно не только изменять размер анимационных картинок, но и оптимизировать их, т. е. уменьшать их вес.
Еще с помощью этого онлайн редактора, можно многие баннеры из интернета переделать на свое усмотрение, и не нужно работать над дизайном. Вы просто пишите свой текст, и баннер готов.
Заходим сюда
Инструменты онлайн редактора «Ezgif.com»
Для быстрого редактирования GIF изображений, лучше воспользоваться онлайн редактором, чем Фотошоп. Ведь многие люди и понятия не имеют, как с Фотошоп работать, а здесь можно за считанные минуты отредактировать любое GIF изображение
Онлайн редактор выглядит так:
Редактора «Ezgif.com» для редактирования анимационных GIF картинок
До функционала Фотошоп он, конечно, не дотягивает, зато он имеет все необходимые инструменты для редактирования GIF изображений.
Возможности онлайн редактора:
Обрезка изображения
Изменение размера
Оптимизация изображения
Добавление эффектов
Изменение скорости анимации
Разборка анимации на кадры (фрагменты)
Добавление текста
Наложение другого изображения
Казалось бы, с виду простенький редактор, а какой мощный.
Давайте теперь рассмотрим все перечисленные инструменты отдельно.
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.
Здравствуйте, дорогие читатели! В данной статье мы с вами рассмотрим несколько полезных онлайн сервисов для уменьшения веса картинок и фотографий без существенного изменения качества. Хотя есть один сервис, где можно сжать картинку до минимальных значений, но качество тоже будет оставлять желать лучшего.
Данная тема оптимизации изображений, в основном, интересует владельцев сайтов или блогов. Скорость загрузки страниц имеет большое значение в продвижении. Поисковым системам нравятся оптимизированные вебресурсы.
Плюс онлайн сервисов в том, что не нужно устанавливать специальные программы себе на компьютер. Процесс сжатия проходит в режиме реального времени и не требует каких-то специальных навыков. Все до безобразия просто. Минус данных сервисов только один – нужно подключение к сети интернет.
Перейдем к обзору трех интернет ресурсов. Каждый из них имеет свои особенности.
Онлайн сервис TinyPNG
Сервисом TinyPNG можно сжимать до 20 изображений и максимальным размером 5 МВ. Работает с форматами PNG и JPEG.
Буквально в два клика происходит оптимизация картинки — загружаете ее на сайт, происходит автоматическое сжатие, затем сохраняете на свой компьютер. Сжатый фрагмент, практически ничем не отличается от оригинального.
Онлайн сервис PunyPNG
PunyPNG тоже простой вебресурс. Работает с форматами PNG, JPEG и GIF. Загружать можно до 20 файлов. Прямо на сервисе будут видны результаты сжатия и процентное соотношение с изначальным.
Онлайн сервис Picresize
Picresize – это единственный из представленных сервисов, где можно устанавливать размер итогового результата. Работает с форматами PNG, JPEG, GIF и BMP.
После загрузки изображения на сайт, можно настроить его размер. No change – исходный размер (без изменений).
Данный сервис позволяет преобразовывать один формат изображения в другой.
В формате JPEG можно задавать желаемый размер файла в килобайтах.
После произведенных настроек, сохраняем изображение на свой компьютер.
Анимированные gif-ки очень популярны в соцсетях, часто их можно встретить на развлекательных сайтах. С помощью гифок можно показать наиболее удачный момент из видеоролика, гиф-скриншоты наглядно демонстрируют этапы работы в какой-либо программе или сервисе. Gif-скриншоты также используют для показа работы элементов сайта, например, выпадающего меню. Перед скачиванием файлов для установки пользователь может ознакомится с их работой посредством gif-анимации. Вы можете и сами создавать и выкладывать собственные анимированные забавные картинки, для этого вам понадобится приложение для андроид
Однако гифки имеют и главный недостаток — большой размер, в связи с этим, значительно замедляется скорость загрузки вебстраниц, на которых они размещены. Чтобы устранить эти недостатки, я предлагаю вам ознакомиться со списком инструментов, которые помогут вам оптимизировать (уменьшить размер) гиф-анимации.
Shrink O’Matic
Это простая программ для Windows для оптимизации gif изображений. Она способна и на простейшие действия с изображениями, такие как поворот, изменение размера, изменение названия файла и его месторасположения, пакетная обработка. Доступные форматы для обработки: GIF, JPEG, PNG.
ImageOptim
Эта программа работает на платформе Mac. Она предназначена для сжатия gif до 60-80% и выше без потери качества.
FileOptimizer — продвинутый инструмент для сжатия гиф анимации. Программа имеет простой интерфейс, поэтому ее могут использовать как новички, так и опытные пользователи.
Другие поддерживаемые форматы: JPEG, PNG, SWF, TIFF, BMP, ICO
Работает на платформах: Windows, Mac OS, Linux
FILEminimizer Pictures
Компрессия изображения достигает 98% и выше в результате собственных оптимизационных технологий.Различают 4 уровня сжатия gif-файлов. Кроме того, программа позволяет загружать картинки напрямую в facebook.
Форматы: JPG, BMP, TIFF, PNG, EMF | Платформа: Windows
RIOT
Эта программа мне понравилась больше остальных. Вы можете управлять сжатием гиф, программа показывает размер исходного и выходного файла, имеется превью, благодаря ему вы можете визуально оценивать потерю качества. Недостаток: анимированная gif превращается в обычное статическое изображение.
GIF Optimizer
Простая программа для оптимизации gif-анимации. Программа имеет всего три кнопки — open — открыть файл, optimize — оптимизировать и Save as — сохранить как. Вы можете управлять сжатием через меню Setting (настройки).