Как уменьшить размер картинки: 10 популярных онлайн-сервисов
- Цены
- Возможности
- Email рассылка
- Конструктор писем
- Аналитика
- Триггерные письма
- А/В-тесты
- Email валидатор
- Сегментация базы
- Формы подписки
- SMS рассылка
- API
- Viber рассылка
- Email рассылка
Оптимизация изображений для сайта — советы по оптимизации картинок на сайте
Вес изображений влияет на скорость загрузки сайта и на поведенческие факторы.
Однако оптимизация картинок — всегда компромисс между скоростью работы и качеством изображений. Поэтому перед оптимизацией обязательно оцените вес сайта и долю изображений. Оптимизируйте, если изображения занимают 50% веса и более.
Оптимизируем векторные изображения
На веб-страницах сайта можно использовать векторные или растровые изображения. Вставляйте векторные изображения, когда на них изображены геометрические фигуры. Для иллюстраций с множеством сложных деталей и нестандартных форм они не подходят, потому что они будут выглядеть нереалистично. Применяйте векторную графику для логотипов, значков и прочего. Они останутся четкими и яркими в любом размере, масштабе и на экране любого разрешения.
Векторные изображения имеют основный формат svg. Файл svg можно создать прямо в текстовом редакторе с помощью тега <svg>. Также разметку svg встраивайте в веб-страницу.
Уменьшить размер векторных файлов можно, оптимизировав их с помощью решения svgo. Он очищает файлы от бесполезной информации: комментариев и скрытых ненужных элементов. Файлы становятся меньше, но качество отрисовки остается на прежнем уровне.
Оптимизируем растровые изображения
Растровые изображения состоят из пикселей. Каждый пиксель содержит информацию о цвете и прозрачности в цветовой модели RGBA (red, green, blue, alpha — прозрачность). В браузере 256 оттенков на каждый канал цвета, который в пересчете занимает 8 битов. Каждый пиксель весит: 4 канала х 8 бит = 32 бита или 4 байта.
Легко рассчитать вес фотографий самостоятельно, зная размер в пикселях.
2500 пикселей х 4 байта = 10 000 байтов
10 000 байтов / 1024 = 10 КБ
Пример расчета веса изображений для разных размеров:
Размер изображения | Количество пикселей | Вес файла, КБ |
100 х 100 | 10 000 | 39 |
250 х 250 | 62 500 | 244 |
500 х 500 | 250 000 | 977 |
800 х 800 | 640 000 | 2500 |
Изображения с множеством деталей не заменишь на векторную графику. Если фотографии просто уменьшать в размере, то при открытии в большом размере и на экранах с высоким разрешением они будут выглядеть размыто и нечетко. Это происходит из-за того, что фотография распадается на пиксели, поэтому основная задача — оптимизировать с минимальной потерей качества. Для этого есть несколько способов.
-
Снижаем глубину цвета. Иногда широкая палитра для отображения цветов не нужна. Если каждый канал имеет 256 оттенков, то мы имеем более 2500 цветов. Ограничьтесь палитрой в 256 цветов всего, тогда на каждый канал будет приходиться 2 бита вместо 8, а пиксель будет весить 2 байта вместо 4. Мы уменьшили вес изображений в два раза.
-
Применяем дельта-кодирование. Этот способ работает не с каждым пикселем, а с соседними. Глаз человека часто не видит разницу между нюансами цветов, поэтому укажите разницу между соседними пикселями. Если они имеют схожие цветовые значения, то разница или дельта между пикселями нулевая.
-
Масштабируем изображения. На большинстве сайтов используются изображения большего размера, чем нужно. Администраторы вставляют картинки тех размеров, что у них есть, а уменьшение их размера до требуемых выполняется со стороны браузера. Выясните, совпадает ли фактический и отображаемый размеры фотографий на вашем ресурсе с помощью Инструментов разработчиков Chrome. Наведите курсор и сравните значения.
Когда изображения большего размера, чем нужно, пользователь вынужден принимать лишние данные. При приведении размера к требуемому убираются лишние размеры и вес изображения. Отсекаются лишние пиксели, каждый из которых весит 4 байта. Это простой метод снижения веса, и он не требует специальных знаний или использование программ-оптимизаторов.
Размер изображения больше всего лишь на 10 пикселей, но вес прибавляется существенно:Фактический размер | Отображаемый размер | Лишний вес, пиксели |
210 х 210 | 200 х 200 | 210х210 — 200х200 = 4100 |
510 х 510 | 500 х 500 | 510х510 — 500х500 = 10 100 |
910 х 910 | 900 х 900 | 910х910 — 900х900 = 18 100 |
Сжимаем данные
Перед оптимизацией оцените, насколько правильно выбраны форматы изображений. В растровой графике есть прозрачность и анимация, но не в каждом формате она поддерживается.
Прозрачность | |||
ДА | НЕТ | ||
Анимация | ДА | GIF | — |
НЕТ | PNG | JPEG |
Используйте только подходящие форматы для изображений. Например, png не сжимается с потерей данных, поэтому он всегда будет весить много. Используйте формат png только для изображений, где важно показать мелкие детали. Для этого можно использовать разные инструменты.
Сервисы для оптимизации изображений — ТОП-9
Онлайн-сервис для сжатия картинок с уменьшением веса до 90%. Работает с форматами JPEG, PNG, SVG, GIF и WEBP. Имеет три степени сжатия: • Lossy – с потерей качества, дает максимальную компрессию. • Lossless – без потери качества. • Custom – настройки задаются вручную, можно менять размер по высоте и ширине, ориентацию, формат файла. Поддерживается пакетная загрузка изображений, есть предпросмотр. Данные выгружаются на жесткий диск или в облачные хранилища Dropbox, Google Drive. В платной версии Pro есть расширенный набор ручных настроек, возможность автоматического переименования файлов.
Очень простой редактор, сжимает картинки в формате JPEG, умеет преобразовывать PNG в JPEG, JPEG в PNG, SVG в PNG, работает с GIF-файлами. Загрузка до 20 картинок одновременно, скачать файлы можно в ZIP-архиве. Сервис позволяет корректировать степень сжатия для каждого изображения с предварительным просмотром.
Функциональный инструмент для работы с изображениями JPEG, PNG, PDF и GIF. В бесплатной версии максимальный размер файла до 2 МБ, в платной – без ограничений. Интегрируется с WordPress, позволяя обрабатывать картинки из панели управления сайтом. Файлы можно загружать через API по протоколу HTTPS. Доступны три режима: • Обычный – режим для щадящей оптимизации без потери качества. • Агрессивный – сжатие до 50% с потерей качества. • Ультра – экстремальное сжатие. Рекомендуется для изображений с минимальным количеством деталей. Настройки позволяют выставлять ширину, высоту, % от оригинального размера. Есть функция восстановления исходных файлов.
Работает с форматами JPEG, PNG, WEBP, позволяет обрабатывать по одному изображению с предпросмотром. В расширенных настройках есть регулировка цветности от 0 до 256 и возможность раздельного изменения палитры для разных областей изображения. Вручную можно задать квантирование, сглаживание и другие параметры. Для улучшения качества отображения и устранения артефактов сжатия после оптимизации применяется дизеринг.
Набор утилит от Google Page Speed для преобразования картинок и GIF-файлов в формат WEBP. Инструмент поддерживает 2 типа перекодирования: • Без потерь – объем данных меньше на 30% по сравнению с файлами JPEG, PNG, GIF. При этом сохраняется эквивалентное визуальное качество. • С потерями – существенно сокращается размер файлов, при этом инструмент прогнозирует результат сжатия. На основе прогноза адаптивно распределяются области, в которых допускается максимальная потеря данных (однородный фон, мало деталей), и области, где важно сохранить визуальную полноту картинки. Утилиты подходят для Windows, Linux, и Mac OS X.
Онлайн-редактор изображений с возможностью их обработки и оптимизации. Сжимает JPEG, PNG, GIF, а так же преобразует сырые форматы TIFF и RAW в JPEG. В сервисе есть возможность добавления водяных знаков, конвертации HTML-страницы в изображение, обрезки, поворота кадра. Файлы можно загружать из Dropbox и Google Drive, предусмотрена пакетная обработка. Изображения сжимаются до наименьшего возможного размера без потери визуального качества. Платформа предлагает плагин для WordPress.
ezGIF работает с форматами GIF, JPEG, PNG, WEBP. Для каждого формата предусмотрено несколько способов оптимизации: • GIF – сжатие за счет дизеринга, за счет уменьшения количества цветов в каждом кадре, за счет пропуска каждого n-ного кадра. • JPEG – оптимизация файла при удалении мета-данных, сжатие по размеру, сжатие по качеству от 0 до 100. • PNG, WEBP – сжатие до минимально возможного размера при сохранении качества картинки. В сервисе есть дополнительные опции: регулировка скорости, фильтры, надписи, водяной знак и создание новой гифки из видео, картинок или нескольких других гифок.
Оптимизирует изображения в формате JPEG. Утилита входит в libjpeg. С ее помощью убираются метаданные из изображения. При сжатии указывайте значение самостоятельно. Наилучшее соотношение определяется методом подбора значения от 5 до 95. Удобное средство для пакетной обработки однотипных изображений (для каталогов, карточек товаров).
Может сжимать изображения PNG с потерями качества. Инструмент конвертирует 32-битные файлы в 8-битные с использованием векторного квантования. Обработка уменьшает размер файла в 2 и более раз. Сохраняется полная альфа-прозрачность. Применяется алгоритм подавления шума.
Прописываем мета-данные
Название файла. Все картинки перед загрузкой на сайт называйте понятными словами, используя латиницу. Если файлы уже были названы по-русски, переведите названия, используя сервис «Транслит». Избегайте спама в названии и нечитаемых символов.
Нет | Да |
|
|
Поле Title. Когда пользователь наводит курсор на картинку на сайте, ему подсвечивается текст, прописанный в поле title. Прописывайте в это поле название фотографии. Пишите на русском.
Нет | Да |
|
|
Поле Alt. Указывайте описание файла. Если он не загрузится, пользователь увидит описание из Alt. Поля title и alt могут совпадать по описанию. Лучше их заполнить одинаково, чем оставить пустыми. Обязательно добавляйте в мета-теги ключевые слова, но избегайте переспама. Делайте описания естественными и информативными.
Шпаргалка
- Вес изображений влияет на загрузку сайтов. Оптимизировав изображения, вы снизите вес и повысите быстродействие, а это один из важных факторов ранжирования.
- Векторную графику используйте для логотипов, значков, элементов, текстов и подобных картинок. Для сжатия применяйте инструмент svgo.
- Растровые изображения — для иллюстраций. Растровая графика состоит из пикселей, каждый из которых весит 4 байта. Определяйте вес файла по формуле: длина х ширина х 4 байта.
- Ограничьте палитру. В каждом пикселе закодировано 4 канала модели RGBA и используются более 2500 оттенков. Часто так много цветов не нужно, а ограничение палитры позволит уменьшить вес в два раза.
- Применяйте дельта-кодирование. Человеческий глаз не различает похожие оттенки и цвета, поэтому применяйте дельта-кодирование для соседних пикселей и целых блоков, задавая дельту между пикселями.
- Масштабируйте изображения, чтобы привести их к допустимому размеру. Размещая на сайтах картинки большего размера, вы вынуждаете пользователей скачивать лишние данные. Я оптимизирую изображения даже на 10 пикселей больше, чем требуется. Проверяйте соответствие размеров в Инструментах разработчика Chrome.
- Используйте подходящие форматы: gif — для анимации, png — для прозрачности и для отображения мелких деталей, jpeg — для остального. Для сжатия воспользуйтесь сервисами: gif — ezGIF, Gifsicle, для png — Compressor, Optipng, Pngquant, для jpeg — Imagify, Jpegtran, Compressjpeg.
- Называйте файлы латиницей и понятным названием. В поле Title указывайте название картинки, в поле alt — описание. Title и Alt могут совпадать. Пишите понятные описания для людей, включайте ключевые слова, избегайте переспама.
Материал подготовила Светлана Сирвида-Льорентэ.
Уменьшить фото онлайн, изменить размер фотографии, уменьшить картинку.
Уменьшить фото онлайн: инструкция.
На этой странице вы можете уменьшить фото онлайн бесплатно и без регистрации. Для того, чтобы изменить размер фотографии в меньшую сторону следуйте следующим шагам:
Шаг 1. Загрузите фото, которое вы хотите уменьшить, в окно приложения. Можно перетащить или открыть через «Обзор…» вашего браузера (надо кликнуть в любое место интерфейса).
Шаг 2. Измените размер изображения с помощью верхних полей. Чтобы уменьшить фотографию, введите нужные цифры в поля ширины и длины. Также, для этой цели вы можете использовать слайдеры, расположенные под полями. По умолчанию включен режим пропорциональности. Это значит, что ширина и высота взаимосвязаны и изменяются одновременно. Если вам необходимо выставить ширину и высоту по отдельности, то отключите режим пропорциональности с помощью клика по иконке в виде звена цепи (которая находится между полями размеров).
Шаг 3. Нажмите «Создать» (синяя кнопка справа). Фото будет уменьшено автоматически и откроется окно предварительного просмотра, в котором вы сможете оценить результат. Если вас не устраивает размер картинки, то нажмите на кнопку «Назад» и вернитесь к редактированию.
Шаг 4. Скачайте уменьшенную фотографию. Нажмите на кнопку «Скачать» и загрузите уменьшенное изображение на свой компьютер.
Если вы хотите изменить размер еще одного фото, то нажмите на красный крестик в левом верхнем углу и рабочая область будет очищена. После этого вы сможете загрузить и уменьшить следующее изображение.
Как уменьшить размер фотографии, если она очень большая?
Данный сервис умеет работать даже с очень большими изображениями. С его помощью можно уменьшить картинку шириной и высотой даже в несколько тысяч пикселей. Какое-либо масштабирование в данном случае не предусмотрено, то есть вы будете видеть и уменьшать размер оригинальной фотографии, что позволит вам увидеть реальный потенциальный масштаб. Если фото очень большое, то для часть будет скрыта за границами браузера. Для ее просмотра вам потребуется смотать ползунок вправо или воспользоваться колесиком мыши.
Как уменьшить изображение формата PNG?
Онлайн сервис поддерживает все популярные графический форматы, такие как jpg, gif, bmp и многие другие. В том числе, вы без проблем можете изменить размер изображения в формате png. Он обрабатывается приложением точно так же как и другие расширения файлов.
Политика конфиденциальности.
Наш сервис используют люди, которым требуется сделать фото меньше. Поэтому, возникает резонный вопрос: не попадут ли личные фото в плохие руки? Спешим вас успокоить. Абсолютно все изображения, которые вы загружаете на сайт, удаляются автоматически после его закрытия. То есть, когда вы уходите с сайта, все временные файлы стираются безвозвратно. Таким образом, если вы хотите уменьшить фото онлайн, то можете не переживать на счет конфиденциальности личной информации.
Изменяйте размер фото, изображений или картинок бесплатно онлайн на Easy-Resize.com
Изменяйте размер фото, изображений или картинок бесплатно онлайн на Easy-Resize.comИзменение размера изображения онлайн
Воспользуйтесь Easy Resize и измените размер ваших изображений онлайн до нужных размеров и пропорций. Вы можете конвертировать одно изображение, или переместить несколько фото, чтобы обработать их одновременно. Нажмите на большую табличку снизу, чтобы изменить размер изображения, или прочтите простые инструкции ниже.
Минимальный размер файла:
5 Кбайт s 10 Кбайт s 20 Кбайт s 50 Кбайт s 100 Кбайт s 200 Кбайт s 250 Кбайт s 500 Кбайт s 1 Мбайт s
Максимальный размер файла:160 px 320 px 640 px 800 px 1024 px 1280 px 1600 px 2048 px
Как изменить размер изображения
Проблемы с загрузкой ваших изображений на другие веб-сайты в нужном размере? Не удается отправить слишком большие фото? Сжатие картинок с Easy Resize это просто, как 1-2-3:
- Начните, нажав на таблицу выше. Выберите изображение в всплывающем окне. Вы также можете переместить несколько изображений вместе для групповой конвертации фото.
Easy Resize поддерживает все известные форматы (JPG, GIF, PNG, TIFF, BMP), а также WebP, PDF и около 100 других. - Убедитесь, что максимальный размер фото и максимальный размер файла соответствуют вашим потребностям.
- Как только загрузка будет завершена, появится ссылка на Скачивание. Нажмите на ссылку, и уменьшенная версия вашего изображения начнет скачиваться.
- Бонус: Если вам понравилось бесплатное изменение изображения онлайн, пожалуйста, нажмите мне нравится на Facebook ниже.
Поделитесь любовью
У меня всегда были проблемы с изменением размера файлов в интернете. С Easy Resize это просто.
Элли M., Цюрих, Швейцария
Вам тоже понравился Easy Resize? Поделитесь и сохраните ссылку при помощи кнопок ниже:
Как ужимать картинки без потери качества? 4 лучших способа для ускорения вашего сайта
Изображения — важная часть контента на сайте. Они не только делают страницу красивее, но и могут сами стать источником трафика. Все говорят, что в первую очередь изображения должны быть яркими, сочными, чёткими, полезными и т.д. Это да, не поспоришь. Но важно, чтобы они не мешали быстрой загрузке сайта, которая, кстати, колоссально от них зависит. Поэтому сегодня мы будем разбираться, как сократить размер картинки без потери качества.
Не грузите полный размер
Нет смысла загружать на сайт картинку полного размера, чтобы потом её уменьшать. Так вы уменьшаете её только визуально, а вес остаётся огромным. Гораздо правильней будет подготовить картинку с нужным размером у себя на компьютере и только потом загрузить её на сайт.
Изображение должно иметь такой размер, с каким оно будет выводиться на странице. Если вам в статье нужна фотография размером 200х200 пикселей, то вариант загрузить её на сайт размером 2000х2000 пикселей и просто уменьшить — не самый оптимальный. Лучше сразу грузите её на сервер размером 200х200 пикселей.
Давайте разберём это на примере. Мне нужна картинка для статьи, и я хочу, чтобы она выводилась размером от одного края текста до другого. Как мне узнать точный размер?
Представим, что я хочу вставить вот эту картинку и понять, какой точно размер ей нужен. Для этого я должна выделить блок текста под ней.
Я захожу на страницу статьи, кликаю по тексту правой кнопкой мыши и выбираю «Исследовать элемент». У пользователей MacOS этот пункт меню называется «Показать программный код страницы». Теперь у нас появляется вот такая вставка с кодом:
Чтобы узнать параметры определённого элемента на сайте, мы должны выбрать вот этот инструмент выделения в левом углу страницы.
Теперь мы наводим мышку на нужный нам блок текста и — вуаля! Мы видим его размер. Нам интересна ширина контента, ведь высоту вы можете выбрать уже произвольно.
Теперь вы понимаете, как узнать нужный размер картинки. Не стоит заливать картинки больше требуемого, это будет только перегружать страницу.
5 лучших сервисов для сжатия картинки без потери качества
На установке нужного размера ваши действия не заканчиваются. Следующий пункт — сжатие изображения. Для этого существует масса бесплатных онлайн-сервисов. Например:
Tinypng
Сайт, которым пользуюсь лично я, называется Tinypng. Он совершенно бесплатный. Работает просто: загружаете картинки, а сервис ужимает их в среднем на 60-80% без потери качества.
Kraken.io
Следующий сервис, который даже популярнее, чем Tinypng, — это Kraken. Тут можно сжимать сразу несколько изображений, загружая ZIP архив или пользуясь импортом из Google диска или с Dropbox.
Compressor.io
Compressor.io — ещё один отличный сервис для сжатия изображений. Возможность массовой загрузки файлов тут отсутствует. Изображения уменьшаются в среднем на 60-80% без потери качества.
Imagecompressor.com
Сервис Imagecompressor.com отличается возможностью регулирования качества изображения. Происходит это обычным ползунком. На сервис можно за раз закинуть до 20 изображений.
Jpeg-optimizer.com
И последний, но не менее важный — Jpeg-optimizer.com. Дизайн может и не самый современный, зато со своими функциями сервис справляется на отлично. Он позволяет точно выставить уровень сжатия. Рекомендую для веб-страниц выставлять значение 80 в пункте «Compress Image».
Помимо сжатия тут можно ещё и сразу изменить размер изображения.
Выберите для себя один сервис и используйте его, прогоняя через него все изображения перед заливкой на сайт. Так вы уменьшите их размер больше, чем вдвое раз! Но и это ещё не всё.
Читайте также
Лучшие плагины для оптимизации изображений в WordPress
Теперь мы с нашей фотографией добрались аж до самой консоли сайта. Пусть она пройдёт ещё один фильтр — оптимизацию. В WordPress существует множество плагинов для выполнения этой функции. Сегодня я расскажу вам про лучшие пять:
EWWW Image Optimizer
EWWW Image Optimizer считается одним из лучших плагинов для оптимизации картинок. Он позволяет сделать разовое сжатие всех файлов (например, когда вы только установили плагин на сайт), а также выбирать картинки, которые оптимизироваться не будут. Это будет полезно, например, для сайтов с тематикой фотографии, когда важно не ухудшать качество снимков. Но в целом оптической разницы вы не заметите, зато сайт будет загружаться быстрее.
WP Smush
WPMU DEV предлагает сразу несколько плагинов для ускорения сайта. И WP Smush — часть этой группы. Он занимается сжатием изображений пачками либо в момент их загрузки на сайт. Есть платная и бесплатная версии, в бесплатной можно обрабатывать не более 50 изображений подряд. Поддерживаемые для оптимизации форматы: JPEG, PNG и GIF.
Optimus
Вот такой робот Optimus уменьшает размер изображений на 70%. Но у него есть ограничение — 100 kB. Он работает как с исходными изображениями, так и с только загружающимися на сайт.
TinyPNG
Бесплатный онлайн-сервис TinyPNG, о котором мы говорили выше, можно установить и в качестве плагина. Он сжимает файлы только форматов JPEG и PNG.
Short Pixel
Главное отличие плагина Short Pixel — возможность обработки PDF-файлов и совместимость с WooCommerce. В остальном он выполняет все те же функции, что и предыдущие сервисы.
Установите себе какой-то из этих плагинов для оптимизации изображений, и это уже ускорит работу вашего сайта.
Настройка lazy loading изображений
Есть ещё один способ ускорения сайтов при помощи оптимизации изображений. Это настройка отложенной или ленивой (lazy) загрузки. Такую функцию использует очень много сайтов.
Её работа заключается в том, что изображения грузятся не сразу вместе с открытием страницы, а по мере надобности: например, при скроллинге, при клике или в фоновом режиме.
Когда стоит настраивать отложенную загрузку?
- Если у вас на сайте много изображений.
- Когда картинки — основной контент.
- Когда сайт грузится очень медленно.
- Процент посетителей с мобильных устройств больше 50.
Когда не стоит настраивать отложенную загрузку? Если с изображений идёт хороший трафик. В остальных же случаях это пойдёт сайту только на пользу.
Как сделать отложенную загрузку изображений?
Для этого используется атрибут loading, он задаёт условия загрузки. Он устанавливается как для фотографий с тегом img, так и для медиа с тегом iframe.
Для отложенной загрузки (когда картинка грузится по мере необходимости) мы ставим параметр lazy:
<img src=»image.png» loading=»lazy» alt=»timeweb»>
Вот вы и узнали, как правильно оптимизировать картинки. Теперь они точно не заставят ваш сайт оставаться позади быстрых соперников! Пользуйтесь советами из статьи и ускоряйте свой ресурс. Удачи!
Как уменьшить размер изображения без фотошопа 💻
Слишком большой размер изображения? Не влазит в письмо или на сайт? Сейчас быстро разберёмся как заставить его похудеть! Наверное каждый хоть раз сталкивался с необходимостью уменьшить размер изображения. Ведь снимки с цифровых фотоаппаратов и даже с мобильных телефонов имеют совсем не малые размеры.
Не сложно овладеть парочкой приёмов. Для этого совсем не обязательно ставить такого монстра как фотошоп. Это можно сделать стандартными средствами Windows 7/8/10 или с помощью сторонних утилит.
А как это вообще работает?
Перед тем как уменьшать изображения, полезно понимать как это работает, каким путём идти и на сколько можно будет сжать картинку. В обиходе используется несколько форматов изображений:
- BMP – не сжатые изображения, имеют очень большой размер
- JPG или JPEG – сжатые изображения, самый распространённый формат
- PNG и GIF – тоже сжатые изображения. Весят больше чем JPG, но имеют дополнительные фишки, как прозрачый фон или анимация (гифки)
Также есть ещё миллион форматов, но важно понять, что:
- BMP всегда можно уменьшить в десятки раз, просто преобразовав его в JPEG
- PNG и GIF – также можно сжать, но не в десятки, а в 1,5-3 раза, при этом потеряв прозрачный фон или анимацию, если они были.
- Если файл и так JPEG, то сжать можно уменьшив разрешение и/или качество
Разрешение — это количество точек в изображении по горизонтали и вертикали. Например, у фотоаппарата с матрицей 10.1 Мп разрешение фотографий 3648×2736 точек. Её может понадобится уменьшить до 640×480 точек, например. То есть, уменьшить размер фотографии можно, преобразовав её в другой формат или уменьшив разрешение изображения.
ИНТЕРЕСНО: если ваш файл с расширением BMP, то его можно уменьшить во много раз, просто пересохранив в JPEG. Если при этом использовать 100% качества, то разницы на глаз не будет заметно. Как? Читайте ниже.
Как уменьшить размер изображения стандартными средствами Windows 7/8/10
Для этого нам понадобится стандартный редактор изображений Paint. Вы можете посмотреть видео или читать статью:
Действия по пунктам:
- Нажимаем на изображении правой кнопкой и выбираем «Изменить»
- Если такого нет, то выбираем
- В «Paint» нажимаем на «Изменить размер»
- И вводим в процентах на сколько уменьшить картинку, или конкретно в пикселах. Кстати, в Windows XP можно вводить только в процентах. Если оставить галочку «Сохранить пропорции», то изображение не будет сплюснутым или растянутым.
- Сохраняем изображение в JPEG.
Единственное что нельзя сделать в Paint, так это изменить качество сохранения в JPEG (качество сжатия), но это можно сделать в сторонних утилитах. Кстати, программа Paint ещё пригодиться вам чтобы делать снимки с экрана.
Сжимаем размеры фото с помощью Irfan View
Программа Irfan View одна из самых популярных, очень лёгкая, позволяет по-разному корректировать фото. Во всём мире около 1 миллиона человек в месяц загружают её! Скачиваем замечательную и бесплатную программку IrfanView на официальном сайте из раздела Download.
Скачать IrfanView
Скачать руссификатор
Во время установки можно всё время нажимать «Next». Чтобы применить руссификатор, нужно при первом запуске войти в меню и выбрать «RUSSIAN.DLL».
После установки программы, в контекстном меню изображений появится . Выбираем его.
Идём в меню
В окне предоставлена возможность менять размер по своему усмотрению, кому как удобно. Можно ввести желаемый размер в пикселах, сантиметрах или дюймах, можно в процентах, можно выбрать один из стандартных размеров, или просто нажать кнопку «Вдвое уменьшить»
Также рекомендую выбрать алгоритм преобразования «Lanczos (самый медленный)». Это самый качественный алгоритм, а медленная скорость будет заметна лишь при пакетном преобразовании десятков и сотен изображений (эта функция в программе также есть).
Теперь сохраняем файл в меню и выбираем тип JPEG. Вот здесь можно выбирать качество сжатия JPEG. Чем выше – тем лучше. Почти незаметна потеря качества от 90%, а при 100% потерь качества почти нет, но размер файла увеличивается. Для крупных изображений, предназначенных для загрузки на сайт, есть смысл поставить галочку «Прогрессивный формат JPG». В этом случае изображение будет загружаться не сверху-вниз, а сначала покажется размытый силует, а затем полная версия. Думаю вы такое встречали в интернете.
Я просто хочу отправить письмо в Outlook!
А если стоит задача просто уменьшить размер вложения в Microsoft Outlook, то там в окне редактирования письма нажмите «Параметры вложений» («Attachment Options…») и выберите «Уменьшать изображение» («Select picture size:») и предпочитаемый размер. Можно ставить «Большой (1024×768)» («Large»), если изображений во вложении немного.
Теперь вы с лёгкостью сможете сохранять картинки с нужным разрешением для сайта, почты или для рабочего стола без установки фотошопа. Поделитесь этим полезным советом с друзьями с помощью кнопок социальных сетей!
Как уменьшить размер любого фото до 2 МБ и менее без потерь в качестве
Можно ли в несколько раз уменьшить размер фотографии формата JPG (JPEG) без потерь в качестве? Любой грамотный пользователь вам ответит, что это невозможно, и в принципе будет прав. Потери в качестве при компрессии картинки будут всегда, а вот насколько они будут визуально заметны – это уже другой вопрос.
При помощи онлайн сервиса Squoosh Вы сможете без видимых глазу артефактов сжать в несколько раз абсолютно любую фотографию. Хотите уменьшить её до 2 Мб? Не проблема! До одного мегабайта и даже менее? Тоже не вопрос! Исходный файл и результат на глаз будут практически неотличимы.
Сервис имеет визуальный контроль качества результата в режиме реального времени и целый набор настроек, которые позволят вам оптимизировать любое, даже самое «тяжелое» изображение. Отлично работает как в десктопных, так и мобильных браузерах. Рекомендую посмотреть его коротенькую видеопрезентацию:
Загрузить свою картинку в Squoosh можно как простым её перетаскиванием в окно браузера из проводника, так и нажатием на ссылку «select an image».
После этого экран браузера будет разделен вертикальной синей линией на две области:
- Левая – здесь находится исходное загруженное фото
- Правая – результат работы умного алгоритма компрессии графики
Соответственно, снизу слева указан вес исходного фото, а снизу справа – вес оптимизированного. Синюю линию между перемещать для того, чтобы сравнить «до и после».
В правой части окошка находится целый ряд настроек компрессии:
- Формат: OptiPNG, MozJPEG, WebP, Browser PNG, Browser JPEG, Browser WebP
- Качество: по умолчанию ползунок выставлен на 75%, что позволяет значительно уменьшить размер фото (в четыре и более раз) абсолютно без каких-либо артефактов.
В том, что потерь в качестве нет, вы сами можете убедиться на конкретном примере. Я выбрал фото (разрешение 4000×3000 px), снятое мной на Canon PowerShot SX50 HS:
При сжатии изображений в первую очередь страдают мелкие детали, типа шерсти, волос и пр. Поэтому я специально взял этого красавца в качестве «подопытного» 🙂
По умолчанию, Squoosh оптимизирует картинку с качеством 75%. В моем примере это дало возможность уменьшить вес файла с 3,62 Мб до 892 Кб, то есть в четыре раза. Давайте при 100%-ом увеличении посмотрим заметны ли какие-то артефакты сжатия:
Как видим, их нет! Причем нет абсолютно, даже если рассматривать фото при крупном увеличении. А при каком значении ползунка качества они становятся визуально различимы? Я обнаружил слегка заметные артефакты сжатия лишь при снижении качества до 45%, но различимы они глазу только при масштабировании картинки до 200% и выше.
При просмотре фото «в полный рост» без масштабирования никаких визуальных отличий нет, однако размер фото при этом уменьшился с 3,62 Мб до 424 Кб, то есть в 8,5 раз! Как по мне, результаты просто великолепны!
Поставив галочку возле «Show advanced settings», вы получите доступ к целому набору настроек, которыми можно влиять на работу алгоритма компрессии:
Уделять им внимание я не стану, потому что результат в полностью автоматическом режиме устроит 99% пользователей, ну а оставшийся 1% и самостоятельно разберется с этими настройками при необходимости 🙂
До знакомства с Squoosh моим любимым инструментом оптимизации графики был JPEGMini, но после того как из бесплатного онлайн сервиса он превратился в платную программу, я начал искать альтернативы.
Уверен, что со Squoosh не произойдет то же самое, потому что, во-первых, он создан компанией Google, а во-вторых, имеет открытый исходный код, выложенный на GitHub. В ближайшее время я опубликую статью с обзором еще парочки подобных сервисов со сравнением их работы и выбором победителя. Не пропустите 🙂
Автор статьи: Сергей Сандаков, 40 лет.
Программист, веб-мастер, опытный пользователь ПК и Интернет.
Как уменьшить размер изображения до 100 КБ (простой способ)
Ваши фотографии настолько велики, что вам нужно отправлять их по электронной почте по одной? У вас есть изображения, которые загружаются на ваш сайт долго? Вы изо всех сил пытаетесь разместить свою библиотеку изображений на одном жестком диске или даже на сервере?
Эти проблемы становятся все более и более распространенными при использовании штанги в камерах высокой четкости (HD).
За последние годы в изображениях для цифровых приложений изменились три вещи.
1.Кажется, что доступ к HD-камерам есть повсюду. Кажется, что в каждом смартфоне есть камера HD, цифровые SLR подешевели, и даже ваши камеры в стиле «наведи и щелкни» снимают высококачественные фотографии. Однако изображения HD по определению имеют большой размер файла. Нередко снимаются фотографии размером от 2 до 20 МБ каждая! Сложите хотя бы 10 из них вместе, и вы увидите много данных.
2. Увеличилась скорость интернета. Загрузка фотографий в формате HD (будь то в социальных сетях, на вашем веб-сайте или даже по электронной почте) происходит намного быстрее, чем это было в последние годы.Подумайте о тех временах, когда использовались коммутируемые соединения, и о том, как мучительно было загружать даже умеренное изображение. Однако скорость интернета не увеличивалась с той же скоростью, что и размер изображения.
3. Похоже, наше терпение уменьшилось. Мы живем в рассеянном мире с почти неограниченными возможностями. Хорошо известно, что если ваш веб-сайт не загружается менее чем за 4 секунды, высока вероятность того, что пользователь сдастся и уйдет в другое место, чтобы найти свою информацию. Во многих отношениях мы испорчены мгновенным удовлетворением и быстрой загрузкой многих тонких веб-сайтов.Если ваши изображения не загружаются быстро, значит, вы уже в невыгодном положении.
Это хорошо известный факт, что если ваш веб-сайт не загружается менее чем за 4 секунды, высока вероятность того, что пользователь сдастся и уйдет в другое место, чтобы найти свою информацию.
Итак, к чему вы должны стремиться?
Как правило, мы стремимся к файлам изображений размером менее 100 КБ. Мы знаем, что в большинстве онлайн-приложений они загружаются менее чем за секунду, их просто отправить по электронной почте и они не занимают много места.
Оптимизация изображения — это создание файла минимального размера без потери качества изображения. На это влияет несколько факторов. Они включают в себя: тип файла, разрешение, размер изображения и т. Д. На данный момент переменная с наибольшей «отдачей», которую мы можем контролировать, — это размер изображения.
Бывают случаи, когда нам нужны большие, четкие, глянцевые изображения. Но в 90% случаев нам нужно изображение, которое передает сообщение. Если вы используете изображения в статьях или на своей странице в Facebook, изображение редко занимает больше половины экрана (я говорю о ноутбуке или настольном мониторе с шириной менее 2000 пикселей).В этих ситуациях будет достаточно изображения с шириной 800 пикселей и высотой 600 пикселей (или меньше). Это также правильный размер файла (около 100 КБ).
Итак, напомним, мы стремимся к изображениям размером 800×600 пикселей и размером менее 100 КБ.
Как уменьшить наши изображения?
Существует множество сторонних программ, которые помогут вам сделать это массово, но для этого часто требуется установка и изучение нового программного обеспечения. Если вы занятый владелец бизнеса, вам может показаться, что это слишком много усилий.
Что, если бы я мог показать вам, как уменьшить размер файлов за считанные секунды, используя только Windows и ваш почтовый клиент.
Уменьшение изображений до 100 КБ с помощью Outlook (или другого почтового клиента)
Шаг 1. Я создал здесь две папки: в одной хранятся все мои большие изображения, а другая пуста. Нажав на изображение, я могу увидеть его размер и другие метаданные.
Шаг 2. Выберите все изображения, которые нужно сжать. Щелкните правой кнопкой мыши и выберите «Отправить в почтовый клиент».
Шаг 3. Откроется диалоговое окно. Выберите размер изображения (подойдет 640 × 480 или 800 × 600). Ваши изображения будут быстро сжаты и прикреплены к электронному письму.
Шаг 4. Скопируйте все изображения и вставьте в другую папку. Закройте и откажитесь от своей электронной почты.
Теперь у вас есть две папки — одна с исходными изображениями, другая с уменьшенными изображениями, готовыми для использования в другом месте. Эти небольшие изображения теперь идеально подходят для использования в Интернете, социальных сетях, электронной почте и везде, где важен (небольшой) размер.
Если вы хотите увидеть это в коротком видео, посмотрите его здесь:
Теперь ваша очередь. В комментариях ниже дайте мне знать, что вы думаете об этом методе и как вы используете изображения меньшего размера.
Или же, если вы хотите присоединиться к нашей группе в Facebook, где мы каждый день обсуждаем множество подобных идей, приходите к нам на сайт Getting Regional Business Online.
Приветствуем оптимизированные изображения!
Как уменьшить размер файла изображения? »Изображения» Mac »Tech Ease
Основной способ уменьшить размер файла изображения — увеличить степень сжатия.В большинстве приложений для редактирования изображений это делается с помощью выбора, который вы делаете в диалоговом окне «Сохранить как» или «Экспортировать как» при сохранении PNG, JPG или GIF. Чем сильнее сжатие, тем меньше будет файл и тем быстрее он загрузится на веб-страницу.
Но сначала вам нужно решить, какой из трех форматов файлов вы хотите использовать. Если ваше изображение представляет собой фотографию с большим количеством цветов или иллюстрацию с градациями, и вы хотите уменьшить размер файла, JPEG, вероятно, будет вашим лучшим выбором.Если аналогичная фотография должна иметь сжатие без потерь или прозрачные области, потребуется PNG-24. Если у вас простая графика с небольшим количеством цветов и сплошными областями, то лучшим выбором будет GIF или PNG-8. Мы рассмотрим, как добиться наилучшего сжатия в каждом из трех типов файлов, начиная с JPEG. Для получения информации о сжатии PNG или GIF прокрутите эту страницу вниз.
Сжатие JPG
Сжимать JPG (также называемый JPEG) проще всего, потому что нужно учитывать только одно: качество.При экспорте в JPG из программы редактирования изображений вам будет предложено выбрать желаемый уровень качества. Вы можете просто увидеть несколько вариантов, например: низкий, средний, высокий или максимальный. Вам может быть задан диапазон чисел, например от 0 (низкое качество) до 12 (высшее качество). Или вас могут попросить выбрать процентное значение от 0% (низкое качество) до 100% (высшее качество). Вы всегда должны выбирать самое низкое качество, которое все еще подходит для ваших целей.
Одна из стратегий выбора наилучшего уровня — начать с довольно высокого качества настройки, и если все выглядит нормально, попробуйте немного снизить качество.Если пониженный уровень выглядит достаточно хорошо, попробуйте другое понижение. Когда вы достигнете неудовлетворительного уровня качества, вернитесь к самому низкому уровню, который все еще был достаточно хорошим для ваших целей. Всегда помните, какова цель изображения. Если вы публикуете фотографию цветка на веб-сайте ботанической энциклопедии, вы, вероятно, хотите, чтобы она была достаточно высокого качества, чтобы можно было четко видеть мелкие отличительные детали. Если вы публикуете фотографию цветка, чтобы отпраздновать приход весны, то, вероятно, подойдет и гораздо более низкое качество.Давайте возьмем фрагмент фотографии цветка и экспортируем ее с шестью различными настройками качества.
Качество 100%, размер файла 103 КБ
Изображение ниже было экспортировано с качеством 100%. Эта настройка редко когда-либо понадобится.
Качество 80%, размер файла 48 КБ
Настройка 80% практически неотличима от настройки 100%. Но давайте посмотрим, сможем ли мы сжать его дальше.
Качество 60%, размер файла 28 КБ
Даже при 60% большинство людей не заметят никакой разницы от настройки 100%, а поскольку это четверть размера, загрузка будет в четыре раза быстрее.
Качество 40%, размер файла 17 КБ
Для многих обычных целей приемлемо даже такое изображение с качеством 40%. И загружается в пять раз быстрее оригинала.
Качество 20%, размер файла 12 КБ
Ужасно тут.
Качество 0%, размер файла 7 КБ
Блочность экстремального сжатия JPG очень очевидна.
Пример фотографии из коллекции стоковых фотографий растений FCIT на веб-сайте ClipPix ETC.
Другой способ сохранить размер файла в формате JPG — слегка размыть изображение перед его сжатием. Изображение с меньшим количеством резких краев и четкими деталями сожмется намного меньше. Возможно, вы собираетесь использовать фотографию в качестве фонового изображения. Это идеальный случай для использования размытой фотографии. Вы даже можете размыть только части изображения и добиться экономии файлов. Ниже фото лилейной лилии на насыщенном фоне. Размер файла составляет 77 КБ при сжатии с качеством 60%.
Если мы возьмем то же изображение, выберем фон в программе редактирования изображений, такой как Photoshop, а затем размыем выделение, только фон будет размытым, а цветок останется резким.Фотография ниже была экспортирована в формат JPG с теми же настройками качества 60%, что и выше, и имеет размер всего 54 КБ — это экономия около 30% от размера файла, поэтому он будет загружаться намного быстрее. В этом примере мы получаем немного более художественную фотографию, где фокус остается должным образом на самом цветке, а также достигается значительная экономия в размере файла. Это беспроигрышный вариант.
Последнее замечание о JPG. Помните, что это формат с потерями. Каждый раз, когда вы сохраняете файл в формате JPG, вы теряете качество. Если вы думаете, что когда-нибудь снова захотите использовать ту же фотографию, обязательно сохраните оригинал в таком формате, как TIFF или PSD, а затем просто экспортируйте файл в JPG.Это дает вам как сжатый файл JPG для использования в Интернете, так и исходный несжатый файл, который вы можете использовать позже. Единственное, чего вы определенно не хотите делать, — это сохранять вашу единственную копию файла в виде сжатого JPG, повторно открывать ее для редактирования и снова сохранять как JPG. Это все равно, что делать ксерокопии фотокопий. С каждым разом качество будет ухудшаться. Всегда лучше вернуться к исходному несжатому файлу.
Сжатие GIF
Традиционным выбором типа файла для графики, состоящей из простых областей и небольшого количества цветов, является GIF, хотя теперь можно достичь тех же результатов с PNG-8 (и при меньшем размере файла).
изображений GIF ограничены 256 цветами, но вы можете установить меньшую глубину цвета для существенной экономии размера файла. Для достижения наилучших результатов попробуйте выбрать одно из следующих чисел или чуть меньше: 256, 128, 64, 32, 16, 8, 4 или 2. Например, если в вашем изображении 33 цвета, вы можно значительно сократить размер файла, если уменьшить палитру до 32 цветов, но вы не получите такой же экономии при переходе с 32 до 31 цвета.
См. «Что такое битовая глубина?» для получения дополнительной информации и примеров изображений.
При сохранении (или экспорте) в формате GIF сначала выберите желаемое количество цветов в окончательном изображении. Во-вторых, если вы заметили «полосы» в областях градиентов, изображение, вероятно, изначально не подходило для GIF, но вы можете сделать полосу менее очевидной, выбрав шаблон дизеринга — обычно шаблон «диффузия» будет работать. Лучший. В-третьих, если у вас есть прозрачные области вашего изображения, обязательно выберите «прозрачный».
Есть несколько настроек, которые можно игнорировать.Оставьте «Веб-привязку» равным нулю. Этот параметр — пережиток тех времен, когда большинство мониторов не отображали миллионы цветов, как сегодня. Параметр «Матовый» раньше был очень полезен для смешивания краев прозрачного GIF-изображения с фоном, но если это проблема для конкретного изображения, вам, вероятно, все равно следует переключиться на PNG.
И, конечно же, GIF был традиционным выбором для анимированных изображений, хотя PNG может занять и эту область.
Пример изображения из коллекции иллюстраций роботов FCIT на веб-сайте TIM.
Сжатие PNG
Наконец-то мы подошли к PNG. Он последний в списке не потому, что он наименее важен, а потому, что он включает в себя функции как JPG, так и GIF. Его популярность неуклонно растет и, по некоторым оценкам, теперь используется на большем количестве веб-сайтов, чем JPG или GIF. Поначалу это может показаться немного более сложным, но если вы будете регулярно создавать веб-графику, это, безусловно, стоит освоить.
Во-первых, вам нужно решить, экспортировать ли как PNG-8 или PNG-24.PNG-8 похож на GIF в том смысле, что он лучше всего подходит для графики с небольшим количеством цветов и сплошными областями, такими как логотипы. Основное различие между PNG-8 и GIF заключается в том, что файл PNG-8 обычно меньше, чем файл GIF. PNG-24 похож на JPG в том, что он лучше всего подходит для изображений с непрерывным тоном, таких как фотографии или другие изображения с более чем 256 цветами. Основное различие между PNG-24 и JPG заключается в том, что PNG-24 не содержит потерь, поэтому размер файла будет несколько больше, чем у JPG, но качество будет выше.
Экспорт в PNG-8. Если вы экспортируете в PNG-8 из графической программы, вы увидите интерфейс, очень похожий на GIF. Как и в случае с GIF, вам нужно будет выбрать количество цветов (2, 4, 8, 16, 32, 64, 128 или 256), добавлять ли шаблон дизеринга или нет, и нужна ли вам прозрачность или нет. Единственное существенное отличие состоит в том, что PNG-8 будет немного меньше.
Вот мультфильм, экспортированный как 32-цветный GIF. Размер файла 13,6 КБ.
Вот тот же рисунок, экспортированный как 32-цветный PNG с точно такими же настройками, как указано выше.Размер файла 10,2 КБ. Это сокращение размера файла на 25%.
Образец графики из коллекции технических мультфильмов FCIT на веб-сайте TIM.
Экспорт в PNG-24. Поскольку PNG-24 — это формат без потерь, у вас действительно нет никаких параметров качества при экспорте. В отличие от JPG, никакая информация об изображении не отбрасывается. Это также означает, что размер файла может быть довольно большим.
Вот фотография ара, экспортированная в формате PNG-24. Размер его файла составляет 400 КБ.Это довольно много.
Вот та же фотография, экспортированная в формате JPG с настройкой максимального качества (100%). Размер его файла 259 КБ.
А вот та же фотография, экспортированная в формате JPG с настройкой высокого качества (60%). Размер его файла составляет всего 69 КБ.
Пример фотографии из коллекции стоковых фотографий животных FCIT на веб-сайте ClipPix ETC.
Вау, если размер PNG в 5 или 6 раз превышает размер пригодного для использования JPG, зачем мне его использовать? Что ж, может быть несколько причин для выбора PNG-24 вместо JPG.
1. Если вам нужна прозрачность изображения, необходим PNG, потому что JPG не поддерживают прозрачность.
2. Если вам нужен формат без потерь, вам понадобится PNG, потому что даже при максимальных настройках JPG теряет информацию, а изображение ухудшается, даже если это не очевидно с первого взгляда.
3. Если вам абсолютно необходимо четкое изображение без артефактов сжатия JPG, ваш выбор — PNG. Хорошим примером является скриншот, на котором много мелкого шрифта. По самой своей природе JPG «размазывает» шрифт, что затрудняет его чтение.PNG будет воспроизводить тип пиксель за пикселем, как это было изначально на экране.
Связанные страницы
В чем разница между растровыми и векторными изображениями?
Что такое битовая глубина?
Сжать картинку
Выберите изображение, которое вы хотите сжать.
Щелкните вкладку Работа с рисунками, формат , а затем щелкните Сжать изображения .
Выполните одно из следующих действий:
Чтобы сжать изображения для вставки в документ, при разрешении щелкните Печать .
Чтобы сжать изображения для публикации на веб-странице, с разрешением щелкните Интернет .
Чтобы сжать изображения для отправки в сообщении электронной почты, при разрешении Разрешение , щелкните Электронная почта .
Некоторые изображения допускают только один или два из этих вариантов.
Щелкните OK , дайте имя и сохраните сжатое изображение где-нибудь, где сможете его найти.
Примечание: Вы можете отменить сжатие, нажав Сбросить изображение . Изменения сжатия не будут сохранены, пока вы не сохраните их явным образом.
Выберите изображение, которое вы хотите сжать.
В меню Изображение щелкните Сжать изображения .
Выполните одно из следующих действий:
Чтобы сжать изображения для вставки в документ, в разделе Сжать для щелкните Документы .
Чтобы сжать изображения для публикации на веб-странице, в разделе Сжать для щелкните Веб-страницы .
Чтобы сжать изображения для отправки в сообщении электронной почты, в разделе Сжать для щелкните Сообщения электронной почты .
Нажмите ОК .
Примечание: Вы можете отменить сжатие, щелкнув Отменить сжатие изображения в меню Правка .Изменения сжатия не будут сохранены, пока вы не сохраните их явным образом.
Как сжать и уменьшить размер файла фотографий на iPhone
Узнайте, как сжать и уменьшить размер файла фотографий на iPhone. С помощью приложения «Сжать фотографии» вы можете уменьшить размер изображений PNG, JPEG и HEIF, а также освободить место для хранения на вашем iPhone.
Хотя место для хранения становится все дешевле и дешевле, кажется, что нам всегда нужно и хочется все больше и больше.Это особенно верно, если у вас iPhone 16 ГБ. В таком случае хранилище для вас еще более ценно, и вам следует постараться учитывать каждый МБ.
Наряду с музыкой и видео фотографии, вероятно, являются одними из самых печально известных пожирателей памяти на вашем iPhone. Я знаю, что моя только картинок заполнена более чем 20 ГБ. Если вы находитесь в такой же ситуации и хотите сэкономить место для хранения на вашем iPhone, один из вариантов — уменьшить размер файла с фотографиями iPhone.
Как всегда, для этого есть приложение.Собственно говоря, мы разработали свою собственную! Единственная цель приложения под названием «Сжать фотографии» — уменьшить размер файла изображений PNG, JPEG и HEIF с сохранением исходного размера, если вы не выберете иное.
В этом посте я покажу вам, как уменьшить размер файла изображения на iPhone с помощью функции «Сжать фотографии», чтобы освободить место на вашем устройстве…
Как уменьшить размер файла фотографии на вашем iPhone
Прежде чем мы получим При запуске, необходимо отметить, что, хотя сжатие фотографий уменьшит размер файла фотографий и может уменьшить фактические размеры изображений, это не является основной целью приложения.Если это то, что вы пытаетесь сделать, ознакомьтесь с нашим руководством о том, как изменить размер изображения на вашем iPhone.
1) Загрузите бесплатно Compress Photos из App Store.
2) Запустите приложение и коснитесь значка «+» в центре экрана. Он покажет все фотоальбомы, доступные на вашем устройстве. Откройте альбом и выберите одну или несколько фотографий, которые вы хотите сжать, затем нажмите Выбрать .
3) Теперь вы можете настроить уровень сжатия.Вам доступны два уровня сжатия: качество изображения и размеры изображения. Чем больше вы хотите сжать размер файла фотографии, тем ниже должен быть уровень качества. Точно так же вы можете уменьшить размер изображений, чтобы уменьшить их размер файла.
Для целей этой публикации я установил качество изображения на 60%, а также решил уменьшить размер файла до 85% от его фактического размера.
4) Нажмите на кнопку Сжать изображения внизу.Приложение будет творить чудеса, чтобы уменьшить размер файла ваших фотографий. Чем больше снимков придется обработать, тем больше времени у вас уйдет. По моему опыту, приложение очень быстро сжимало каждое изображение, но, конечно, ваш опыт может отличаться.
По мере обработки каждого файла изображения приложение указывает, насколько он меньше после сжатия.
5) После того, как приложение закончит обработку изображений, они будут автоматически сохранены в вашем альбоме «Фотопленка». Для удобства они также будут добавлены в автоматически созданный альбом под названием «Сжать фотографии», чтобы вы могли легко их найти.
6) Теперь у вас есть возможность удалить исходные фотографии , чтобы сэкономить место на вашем устройстве. В зависимости от ваших потребностей вы можете выбрать этот вариант или нажать Сохранить исходные изображения .
Преимущество сжатия фотографий
Уменьшение размера файла фотографий может сэкономить массу места на устройстве. Конечно, чтобы сэкономить это место, вам придется удалить исходные фотографии и очистить папку, содержащую удаленные фотографии.Также помните, что чем больше вы уменьшаете размер файла изображения, тем хуже будет качество этого изображения.
Вот размер этих трех фотографий до и после сжатия:
- Фотография 1 была 2,3 МБ, теперь 155 КБ
- Фотография 2 была 2,2 МБ, теперь 293 КБ
- Фотография 3 была 1,7 МБ, теперь 207 KB
По моему опыту работы со сжатием фотографий, я действительно не заметил явной потери качества, но если вы хорошо разбираетесь в подобных вещах, это может иметь значение для вас, особенно если вы уменьшите сжатие качество.
Пока мы обсуждаем эту тему, вот несколько статей, которые могут вас заинтересовать:
Пожалуйста, поделитесь своими комментариями ниже, особенно если у вас есть собственный трюк для сжатия размера файла фотографии на iPhone .
Как уменьшить размер изображения и ускорить WordPress
Как фотографа, который также ведет блог, меня часто спрашивают, как оптимизировать изображения, чтобы сократить время загрузки веб-сайта. Поэтому я подумал, что сообщение, объясняющее, как именно уменьшить размеры изображений в целом, а также как оптимизировать изображения для веб-сайта, в частности, поможет ответить на этот вопрос.
В этом посте я расскажу о нескольких вещах. Я объясню, как уменьшить размеры изображений для любых целей, в которых вы хотите их использовать. Это может быть для отправки по электронной почте, загрузки в социальные сети или онлайн-галерею фотографий, или потому, что вы хотите разместить их на веб-сайте или в блоге.
Если вы загружаете изображения на веб-сайт, я объясню, почему так важно оптимизировать изображения для вашего веб-сайта. Затем я расскажу о различных вариантах, которые у вас есть для этого, от программных инструментов на вашем компьютере до размещаемых в Интернете опций и плагинов для WordPress.
Наконец, для владельцев веб-сайтов из вас, я дам несколько общих советов по сокращению времени загрузки вашего сайта, которые связаны с тем, как изображения появляются на вашем сайте.
Зачем нужно оптимизировать изображения?
Если у вас большая библиотека изображений, вы заметите, что они занимают много места. Итак, основная причина для оптимизации ваших изображений заключается в том, чтобы они занимали меньше места. Это может быть сделано для того, чтобы освободить место на вашем собственном жестком диске, или это может быть связано с тем, что вы хотите поделиться ими с друзьями и семьей, а файлы слишком велики для совместного использования.
Если вы размещаете веб-сайт, то есть еще одна веская причина для оптимизации ваших изображений, и эта причина — скорость сайта.
Если вы посетите подобный веб-сайт, вы заметите, что на нем много изображений. Изображения важны для передачи информации и иллюстрации нашего контента — Интернет без изображений был бы довольно скучным!
Однако файлы изображений — это большие файлы, занимающие довольно много места. Средний файл изображения в стандартном формате JPG, снятый непосредственно с камеры или телефона, обычно имеет размер около 4-7 мегабайт.
Если у вас есть статья в Интернете с десятью изображениями, это будет равно 40–70 мегабайтам данных, которые ваш веб-браузер должен будет загрузить, чтобы вы могли ее прочитать. И это даже не считая всего остального, что может быть на странице, которое также содержит текст, скрипты и т. Д.
Попытка загрузить страницу с 40 мегабайтами изображений потребует времени даже при быстром подключении к Интернету! При медленном мобильном соединении это может занять целую вечность.
И скорость имеет значение для пользователей.Фактически, исследования показали, что более 50% мобильных пользователей покидают сайт, если загрузка занимает более 3 секунд. BBC стало известно, что за каждую дополнительную секунду загрузки сайта еще 10% пользователей покидают его.
Если у вас есть веб-сайт, я могу порекомендовать запустить его с помощью инструмента Google «Проверить мой сайт», который покажет вам, насколько быстро загружается ваш сайт. Цель меньше 3 секунд. Страницы на этом сайте в среднем используют этот инструмент около 2 секунд.
Но не только пользователи любят быстрые сайты.Решая, где разместить страницы в результатах поиска, Google использует скорость сайта как один из многих факторов ранжирования. Это означает, что если у вас есть веб-сайт, который вы хотите получить в Google, вам нужно подумать о том, насколько быстро он загружается. А оптимизация изображений может иметь большое значение для создания более быстрого сайта.
Google предоставляет еще один инструмент для проверки скорости страницы сайта и предоставляет подробные советы по повышению скорости вашего сайта: Google PageSpeed Insights (PSI). Мы настоятельно рекомендуем запустить свой веб-сайт с помощью этого инструмента, чтобы увидеть, какие результаты он дает.
На этом веб-сайте мы набрали 85–92 балла в мобильной версии PSI и 97–100 в версии для настольных компьютеров. Большая часть этого результата достигается за счет хорошо оптимизированных изображений.
Теперь давайте посмотрим на следующий момент, который также часто вызывает путаницу, когда дело касается изображений, — разница между размером изображения и степенью сжатия изображения.
Размер изображения и сжатие изображения
В моем примере выше я предположил, что если вы берете свои фотографии прямо с камеры или смартфона и загружаете их в Интернет или отправляете по электронной почте друзьям, они будут размером от 4 до 7 мегабайт.
Размер в данном случае является мерой размера файла изображения. Этот размер файла является результатом двух вещей: размеров изображения (также часто ошибочно называемого размером) и степени сжатия изображения.
Это две совершенно разные вещи, и важно понимать и решать их обе, особенно для оптимизации веб-сайта.
Размер изображения
Когда мы говорим о размере изображения, мы можем иметь в виду размер файла, измеряемый в байтах, или размеры изображения, измеряемые в пикселях.Я объясню и то, и другое, и как они соотносятся друг с другом.
Когда вы делаете снимок на камеру или телефон, у камеры будет рейтинг «мегапикселей». Это относится к тому, сколько пикселей составляет изображение, которое делает камера.
Например, 12-мегапиксельная камера, которую можно найти на многих смартфонах, сделает изображение, состоящее из двенадцати миллионов пикселей. Это изображение будет иметь ширину 4000 пикселей и высоту 3000 пикселей, и вы умножаете одно на другое, чтобы получить общее количество пикселей.
Если файл несжатый, для представления каждого пикселя потребуется один байт данных. Итак, двенадцатимегапиксельное изображение будет состоять из двенадцати миллионов байтов.
В Интернете очень немногие люди просматривают страницы с экранами, достаточно большими для отображения изображения шириной 4000 пикселей. Фактически, среднее разрешение экрана по состоянию на декабрь 2018 года составляет всего 320 пикселей в ширину и 640 пикселей в высоту, в основном из-за того, что так много людей просматривают Интернет на мобильных устройствах.
Отображение изображения шириной 4000 пикселей на экране шириной 320 пикселей будет огромной тратой полосы пропускания, так как браузер в любом случае просто уменьшит его до 320 пикселей в ширину.
Очевидно, что здесь проще всего изменить размер изображения, прежде чем оно будет отправлено в веб-браузер. Если у вас нет действительно веской причины для увеличения изображения, такого как действительно широкое изображение заголовка, которое, по вашему мнению, будет отображаться на широких мониторах, мы не рекомендуем использовать на вашем веб-сайте изображения шириной более 1000 пикселей. Большинство людей используют те, которые еще меньше, а стандартные размеры изображений — 640, 800 и 1024 пикселей.
Например, в наших блогах о путешествиях мы используем изображения размером 800 пикселей в «Independent Travel Cats» и 2000 пикселей в «Поиске Вселенной».
Если мы возьмем изображение 4000 x 3000 и уменьшим его размер до более разумных 1000 x 750 пикселей, мы перейдем от 4 мегапикселей к более разумным 750 килопикселям. Предполагая, что один байт на пиксель, это изображение 750 КБ.
Конечно, 750 КБ по-прежнему немного много для каждого изображения на вашем сайте, где вы, вероятно, стремитесь к изображениям размером от 50 до 300 КБ.
Следующая хорошая новость заключается в том, что это также возможно с помощью так называемого сжатия изображений.
Сжатие изображения
Если вы обратили внимание, то заметили, что я изначально сказал, что изображение размером 4000 x 3000 пикселей будет размером 12 мегабайт, но что среднее изображение, полученное с камеры или смартфона с 12-мегапиксельной камерой, скорее всего, будет быть от 4 до 7 мегабайт.
Ясно, что здесь что-то происходит. И это то, что мы называем сжатием изображений.
JPG или JPEG — это формат файла сжатого изображения.В отличие от файла изображения RAW, который представляет собой просто данные RAW, которые сохраняет ваша камера (подробнее о RAW см. Здесь), файл JPG представляет собой обработанный и, что наиболее важно, сжатый формат файла.
Сжатие изображений — это умный метод, при котором размер файла изображения уменьшается с помощью различных алгоритмов. Это довольно умная штука, и ее можно сделать с помощью сжатия «без потерь» или «с потерями».
Не волнуйтесь, мы почти на дне кроличьей норы.
Сжатие без потерь — это способ сжатия изображений таким образом, чтобы они не менялись визуально, но при этом уменьшались в размере.Он отлично подходит для качества изображения, но не имеет большого значения для фактического размера файла, поскольку не так много информации может быть удалено без какого-либо, даже незначительного, влияния на качество изображения.
Сжатие с потерями является более агрессивным и уменьшает размер файла за счет снижения качества изображения. При сжатии JPG это часто измеряется по скользящей шкале от 1 до 100, где 100 означает отсутствие снижения качества изображения, а 1 — максимальное снижение качества изображения. Обратите внимание, что это не линейная шкала, и уменьшение от 100 до 80 обычно дает гораздо большую экономию, чем, скажем, от 60 до 40.
По моему опыту, вы можете сжать файл со сжатием JPG с размером сжатия 76–80 без заметных изменений качества изображения, которые сможет обнаружить большинство пользователей.
Так какая разница в размере файла изображения?
Что ж, позвольте мне взять пример файла изображения, размер которого составляет 4000 x 3000 пикселей.
При полном размере, то есть 4000 x 3000 пикселей, следующие параметры сжатия с потерями при экспорте изображения из Adobe Lightroom CC дают следующие результаты:
JPG при 100% — 10.3 МБ
JPG при 80% — 4,5 МБ
JPG при 75% — 3,4 МБ
Если мы затем уменьшим размеры изображения до 1000 x 750 пикселей и снова сделаем сжатие из Adobe Lightroom CC:
JPG при 100% — 764 кб
JPG при 80% — 411 кб
JPG при 75% — 332 кб
Как видите, мы идем вперед! Однако мы еще не закончили.
Как уменьшить размер изображения с помощью инструментов сжатия изображений
Хотя Adobe Lightroom — замечательный инструмент, я бы сказал, что он не предназначен для людей, которые хотят сжать свои фотографии до последней капли.Во многом это связано с тем, что обычно как профессиональный фотограф вы больше беспокоитесь о качестве изображения, чем о размере файла, поэтому алгоритмы сжатия Lightroom не слишком агрессивны.
Однако существует ряд сторонних инструментов, специально разработанных для оптимизации изображений в Интернете, которые могут дать гораздо более впечатляющие результаты.
Два примера настольных компьютеров, которые я собираюсь использовать для сравнения, — это Romeolight JPEGmicro (больше не доступен для загрузки) и FileOptimizer (бесплатно).Я также собираюсь использовать бесплатный онлайн-инструмент под названием Compress JPEG, который позволит вам изменять размер файлов с помощью веб-браузера.
Установив их на сжатие в JPG на 75%, мы получим следующие результаты из наших файлов. Сравните их с версией Lightroom.
Lightroom при 75%:
4000 × 3000 пикселей: 3,4 МБ
1000 × 750 пикселей: 332 КБ
Romeolight JPEGmicro при 75%
4000 × 3000 пикселей: 1,7 МБ
1000 × 750 пикселей: 163 КБ
FileOptimizer при 75%
4000 × 3000 пикселей: 3.3 МБ
1000 × 750 пикселей: 156 КБ
СжатьJPEG на 75%
4000 × 3000 пикселей: 1,8 МБ
1000 × 750 пикселей: 123 КБ
Как видите, эти специализированные инструменты сжатия изображений позволяют получить файлы гораздо меньшего размера, особенно изображения меньшего размера, которые нас особенно интересуют.
Если вы просто хотите оптимизировать свои изображения для отправки по электронной почте или друзьям, я бы посоветовал использовать один из перечисленных выше инструментов или что-то подобное.Кроме того, если вы размещаете на бесплатной версии WordPress (wordpress.com) или на таком сайте, как Blogger, Wix, Druple или Joomla, лучшим вариантом будет оптимизация с использованием вышеуказанных инструментов.
Однако, если вы самостоятельно размещаете свой сайт на WordPress, читайте дальше, чтобы узнать о лучших вариантах.
Плагины для оптимизации изображений WordPress
Я знаю, о чем вы думаете. Все это звучит как большая работа. Сначала вам нужно отредактировать свои фотографии, затем вы должны изменить их размер, затем вам нужно сжать их, прежде чем вы даже загрузите их.
Разве все это не было бы намного проще, если бы все это выполнялось автоматически?
У меня хорошие новости — есть! Если вы размещены на WordPress, вы можете установить плагины, которые будут выполнять эти задачи за вас и приносить отличные результаты. Я рассмотрел некоторые из самых популярных вариантов, чтобы дать вам представление о том, что доступно.
Для каждой из служб в списке я взял мое тестовое изображение размером 1000 x 750 пикселей, экспортированное из Adobe Lightroom, и протестировал доступное сжатие, если они предлагали бесплатную услугу.
Обратите внимание, что это ни в коем случае не окончательный тест, его цель — просто продемонстрировать, как эти онлайн-сервисы сравниваются с выполнением этого с использованием настольных решений, подобных перечисленным выше. Подробный тест потребует использования широкого диапазона изображений разных предметов, чтобы определить явного победителя. Это сравнение просто для того, чтобы показать, что каждая услуга предлагает примерно сопоставимый результат.
Кроме того, трудно сравнивать некоторые из этих сервисов напрямую, поскольку у каждой службы есть несколько разные настройки, которые вы можете изменить.В идеальном мире я мог бы установить для каждого из них качество 75% для более точного тестирования, но многие из этих сервисов не предлагают такой уровень контроля.
Однако, как общий обзор того, что доступно, я считаю, что этот список поможет вам решить, что может сработать для вас.
Без лишних слов, вот некоторые из лучших плагинов для оптимизации изображений WordPress, которые стоит рассмотреть, а также подробные сведения о ценах и функциях, которые они предлагают.
1. ReSmush.It
Resmush.it — это сервис, который мы используем на наших сайтах для оптимизации изображений.Он предлагает детальный контроль над настройками качества и создает резервную копию вашего исходного файла изображения на вашем сервере, поэтому вы всегда можете изменить настройки, если хотите, и вы не потеряете исходный файл.
Вы можете оптимизировать изображения при загрузке, плюс есть инструмент массовой оптимизации, позволяющий оптимизировать всю вашу библиотеку. Плагин WordPress прост в использовании, и результаты, по нашему опыту, отличные. Кроме того, это совершенно бесплатно!
Resmush.it на 75%
1000 × 750 пикселей: 143 КБ
Цена : Бесплатно, максимальный размер изображения 5 МБ.
2. ShortPixel
ShortPixel предлагает сжатие для файлов JPG, PNG, GIF и WebP, а также преобразование из JPG, PNG и GIF в WebP. WebP — это новый формат файлов изображений, который предлагает улучшенное сжатие, но пока еще не поддерживается всеми браузерами, поэтому для его реализации на вашем веб-сайте вам потребуются некоторые усилия.
Другие функции включают оптимизацию массовых изображений в вашей медиа-библиотеке, отсутствие ограничений на размер файла и отличную поддержку. Вы также можете запустить его на нескольких веб-сайтах с одной лицензией.
Что касается сжатия изображений, ShortPixel имеет три настройки: Lossy, Glossy и Lossless. Lossy — самый агрессивный, Glossy пытается дать хорошие результаты, но с более высоким качеством изображения, а lossless — это самое высокое качество изображения, которое не будет иметь большого значения. Однако в настоящее время вы не можете настроить конкретную степень сжатия.
ShortPixel со сжатием с потерями
1000 × 750 пикселей: 91,1 КБ
Лично я должен признать, что я считаю, что сжатие с потерями в Shortpixel дает изображения, которые слишком мягкие, но если они работают для вас, это здорово, поскольку размеры файлов определенно самые маленькие из всех плагинов, которые я пробовал. .Но у них есть еще один вариант для придирчивых людей вроде меня: глянцевый.
ShortPixel с глянцевым сжатием
1000 × 750 пикселей: 182 КБ
По-прежнему хороший результат, хотя результаты с потерями определенно более впечатляющие с точки зрения уменьшения размера файла, если вас устраивают результаты сжатия изображения.
Цена: Первые 100 компрессий в месяц бесплатно, затем различные модели ценообразования. Большинству из них подойдет план изображений 5 долларов США в месяц и 5 000 изображений или план 10 долларов США в месяц 12 000 изображений в месяц.Также доступны разовые планы массовой оптимизации изображений.
3. Kraken.io
Kraken.io предлагает сжатие JPEG, PNG и GIF с поддержкой файлов размером до 32 МБ. Размер изображений можно автоматически изменять при загрузке, и у вас есть точный контроль над параметрами изменения размера, включая настройки с потерями, без потерь и экспертные настройки. Последний позволяет вам выбрать точное качество изображения, которое вы хотите использовать в алгоритме.
Kraken.io на 75% (экспертная настройка)
1000 x 750 пикселей: 155 КБ
Цена: Доступны разные уровни, от 50 долларов США в год за 500 МБ изображений в месяц до 790 долларов США в год за 60 ГБ изображений в месяц
4.TinyPNG
Несмотря на название, TinyPNG предлагает сжатие файлов как JPG, так и PNG. Он предлагает массовую оптимизацию вашей библиотеки изображений, оптимизацию при загрузке и возможность изменения размера изображений при загрузке. Вы можете использовать свой тарифный план на нескольких веб-сайтах без ограничений по размеру файла.
Однако в настоящее время вы не можете выбрать уровень сжатия, поскольку служба делает это для каждого изображения. Однако результаты, безусловно, соответствуют другим инструментам в этом списке.
TinyPNG по умолчанию
1000 × 750 пикселей: 141 КБ
Стоимость: Первые 500 компрессий в месяц бесплатно, затем 0 долларов США.009 / изображение до 10 000, затем 0,002 доллара США / изображение.
5. Вообразите
Imagify предлагает оптимизацию файлов JPG, PNG и GIF, и вы можете использовать свое разрешение на нескольких сайтах. Он также предлагает возможность изменения размера изображения, что является удобной функцией.
Доступны три уровня сжатия изображений: Нормальный, Агрессивный и Ультра. В моем тестировании с использованием веб-интерфейса все они в конечном итоге дали одинаковый результат для множества файлов, которые я тестировал, что я могу только предположить как ошибку, поскольку полученный файл был намного больше, чем с другими службами.
Как и другие сервисы, доступен плагин WordPress.
Цена основана на гигабайтах изображений, которые вы отправляете, при этом Imagify оценивает, что 1 ГБ эквивалентен 10 000 изображений. Планы доступны на ежемесячной, годовой или разовой основе.
Imagify при настройке Ultra
1000 × 750 пикселей: 271 КБ
Стоимость: 49,90 долларов США в год за 1 ГБ изображений в месяц, 200 долларов США в год за 5 ГБ изображений в месяц. Доступны другие уровни.
6. EWWW.IO
EWWW.IO предлагает сжатие файлов изображений JPG, PNG, GIF, а в качестве бонуса вы также можете сжимать файлы PDF. Он также предлагает преобразование изображений WebP, массовую оптимизацию всей вашей медиа-библиотеки или определенных папок, а также изменяет размер ваших изображений при загрузке.
Параметры качества подходят для большинства пользователей, но опытные пользователи могут настроить этот параметр качества при желании.
EWWW.IO с настройкой потерь
1000 × 750 пикселей: 158 КБ
Цена: $ 0.99 за доступ к API, затем 0,003 доллара США за изображение (первые 500 изображений бесплатны)
6. Дополнительные параметры
Существует ряд других опций, которые предлагают аналогичную производительность с разными ценовыми моделями. К ним относятся Optimus.io (29 долларов в год, неограниченное использование) и WP Smush Pro (49 долларов в месяц для подписки WPMU).
Я не включил их в обзор, поскольку они не допускают бесплатного тестирования, но поскольку лежащая в основе технология почти такая же, я подозреваю, что они дадут аналогичные результаты.
Optimus.io, в частности, имеет очень привлекательную модель ценообразования, а также включает преобразование WebP, максимальный размер файла 10 МБ, массовое преобразование и возможность настройки качества, если это необходимо.
Сводка плагинов для оптимизации изображений WordPress
Как видите, эти плагины для оптимизации изображений предлагают эквивалентное сжатие по сравнению с настольным решением, но с рядом преимуществ.
Во-первых, изображения сжимаются при загрузке файла, поэтому вам не нужно беспокоиться о выполнении дополнительных действий перед загрузкой.
Во-вторых, они сжимают все версии изображения, создаваемые WordPress, а также исходный файл изображения. Каждый раз, когда вы загружаете изображение, WordPress создает несколько его версий, которые используются для разных вещей, таких как миниатюры сообщений в блогах, избранные изображения или изображения заголовков.
По умолчанию они плохо сжаты, и эти плагины обрабатывают сжатие этих файлов, что также экономит место на сервере.
Однако при сравнении цен помните, что каждое из этих изображений считается конверсией.В среднем WordPress будет иметь пять версий каждого изображения, поэтому, если вы используете сервис, который взимает плату за сжатие изображения, каждое изображение, которое вы загружаете в WordPress, будет использовать пять ваших кредитов.
Так какой же выбрать?
Ну, я использую resmush.it на наших сайтах. Это бесплатно, что является огромным бонусом, сжатие отличное, и когда у меня возникали проблемы, команда очень быстро реагировала.
Моим вторым выбором будет Optimus.io. Хотя я не тестировал его, цена отличная, а отзывы пользователей положительные.
Наконец, я также могу порекомендовать ShortPixel. У них простой для понимания интерфейс, и они дают отличные результаты, особенно с настройкой с потерями. Благодаря поддержке преобразования изображений WebP и неограниченного размера файлов, а также отличной поддержке, это один из лучших платных вариантов премиум-класса.
Наконец, стоит отметить, что, по моему опыту, не существует единственного «лучшего» варианта, когда дело доходит до оптимизации изображений, и, поскольку я тестировал только одно изображение для каждой службы, это, очевидно, не окончательное сравнение.
Итак, я советую выбрать плагин или инструмент, который лучше всего подходит для вашего рабочего процесса, имеет ценовую модель, которая работает для вас, и используйте ее.
Другие плагины для изображений WordPress, которые стоит рассмотреть
Хотя вышеупомянутые плагины отлично справляются с сжатием изображений, они не являются единственным вариантом для улучшения вашего рабочего процесса с изображениями, и я хотел включить еще пару вариантов, о которых вы должны знать в WordPress.
Имсанити
Imsanity — это инструмент, который избавляет вас от необходимости не забывать вручную изменять размер изображений.Хотя многие из плагинов в этом списке также делают это за вас, не все из них делают, и Imsanity — это бесплатный плагин от создателей EWWW.io, который автоматически изменяет размер ваших изображений при загрузке.
Так что, если вы случайно загрузите изображение шириной 4000 пикселей, Imsanity уменьшит его для вас до более удобного размера. Вы сами устанавливаете размер.
JetPack
Jetpack — это многоцелевой плагин, который может делать всевозможные полезные вещи для веб-сайта. Когда дело доходит до изображений, у него есть две действительно полезных функции — он поддерживает отложенную загрузку изображений (подробнее об этом чуть позже), а также имеет действительно отличную встроенную функцию сжатия изображений под названием Photon.
Photon — это сервис, который в основном берет изображения из ваших сообщений, сжимает их (вы можете настроить, насколько сильно), а затем возвращает оптимизированные изображения из Jetpack CDN. Это снижает нагрузку на полосу пропускания на вашем сервере. Более того, эта служба также поддерживает преобразование WebP, поэтому, если пользователь посещает ваш сайт с помощью браузера, который поддерживает изображения WebP, ему автоматически будет предоставлено изображение WebP без каких-либо усилий с вашей стороны.
Если у вас есть JetPack, я настоятельно рекомендую включить эту функцию вместе с функцией отложенной загрузки, и тогда вам вообще не придется устанавливать какие-либо другие плагины на этой странице.Это часть бесплатного плагина Jetpack для WordPress.
Дополнительные советы по загрузке изображений в WordPress
Теперь, когда у вас есть оптимизированные изображения, есть еще несколько настроек, которые вы можете реализовать, когда дело доходит до загрузки изображений на ваш сайт для максимальной производительности.
Показывать изображения нужного размера для пользовательского устройства
В наши дни люди просматривают Интернет на самых разных устройствах, от смартфонов до планшетов, ноутбуков и настольных компьютеров.
У каждого из этих устройств разный размер экрана, и отображение одного и того же изображения на каждом устройстве может быть огромной тратой полосы пропускания — даже если изображение сжато.
Давайте рассмотрим пример: мобильный пользователь, посещающий ваш сайт на экране шириной 320 пикселей, и пользователь настольного компьютера, посещающий ваш сайт на широком экране 1366 пикселей (это наиболее распространенная ширина экрана мобильных / настольных компьютеров по состоянию на декабрь 2018 года).
Изображение шириной 1366 пикселей составляет 230 КБ после сжатия 75%.
Изображение шириной 320 пикселей составляет 30 КБ после сжатия на 75%.
Это огромная разница. Очевидно, что в идеальном мире вы хотите отображать для пользователя изображения, наиболее точно соответствующие размеру экрана устройства, с которого он просматривает ваш сайт.Нет необходимости отправлять им изображение, которое шире, чем экран, на котором они его просматривают, так как это пустая трата пропускной способности.
К сожалению, реализовать это не так просто, как установить плагин. Это будет зависеть от дизайна и темы вашего сайта и потребует некоторого кодирования, а также принятия решения о том, какие размеры изображения вы хотите создать. Здесь есть хорошее руководство, как это сделать, но мы бы порекомендовали обратиться к веб-разработчику за помощью, если вам потребуется изменить код.
Ленивая загрузка изображений
Простой и действительно быстрый способ улучшить время загрузки вашего сайта — это отложенная загрузка изображений на ваш сайт.
Что означает отложенная загрузка? По сути, это метод, который широко используется в Интернете, а это означает, что загружаются только те изображения, которые фактически находятся на экране. Изображения, расположенные ниже по странице, не загружаются, пока пользователь не прокручивает окно своего браузера, а это означает, что эти изображения не влияют на время начальной загрузки сайта.
Ленивую загрузку легко реализовать в WordPress с помощью нескольких доступных плагинов, которые предлагают эту функцию. Наш текущий фаворит — Lazy Loader, но мы также использовали BJ Lazy Load и a3 Lazy Load с хорошими результатами.
Вкратце
Я ценю, что это было много информации, поэтому я хотел предоставить краткое изложение всего вышеперечисленного с некоторыми практическими шагами, которые вы можете предпринять, чтобы улучшить время загрузки изображений на вашем собственном веб-сайте.
5 шагов, которые вы можете предпринять, чтобы сократить время загрузки изображений на вашем веб-сайте
Шаг 1. Измените размер изображений до максимального размера, подходящего для вашего сайта.
Обычно это будет от 1000 до 2000 пикселей в ширину. Вы можете сделать это перед загрузкой или с помощью плагина для изменения размера изображения, такого как Imsanity.
Шаг 2. Сжимайте изображения настолько, насколько вам удобно.
Самый простой способ — использовать плагин, подобный упомянутым выше, включая Resmush.it, Optimus.io или ShortPixel.
Шаг 3. Используйте плагин отложенной загрузки для загрузки изображений
Это увеличит скорость загрузки вашего сайта, поскольку изображения будут загружаться только по мере необходимости, а не сразу сразу.
Шаг 4. Показывать изображения пользователям в зависимости от ширины их устройства
Наличие сильно сжатых изображений — это только часть решения — нет смысла отображать изображения, которые намного шире, чем их браузер.Вы можете сэкономить много трафика и увеличить скорость загрузки сайта, загрузив изображение нужного размера в зависимости от ширины окна браузера пользователя.
Шаг 5: Тест!
Воспользуйтесь такими сервисами, как Google Testmysite и Pagespeed Insights, чтобы изображения вашего сайта были максимально оптимизированы.
Дополнительная литература
Надеюсь, это руководство по оптимизации изображений для Интернета и сайтов WordPress, в частности, помогло вам получить некоторые идеи о том, как улучшить время загрузки вашего сайта.
У нас есть ряд других статей и ресурсов, которые, как мы думаем, вы найдете полезными, охватывающие как ведение блога, так и фотографию. Вот некоторые из них, с которых можно начать.
И все. Как всегда, мы будем рады ответить на ваши вопросы и выслушать ваши отзывы по любому из вышеперечисленных. Просто оставьте их в комментариях ниже, и мы свяжемся с вами!
Размер загружаемого фото слишком велик? Измените размер своих фото бесплатно!
Вы когда-нибудь пытались поместить фотографию в свою медиатеку WordPress и получали сообщение о том, что ваше изображение слишком велико? Или вы сделали идеальное селфи для своего профиля в социальной сети, но вам сказали, что размер вашего файла слишком велик? Наконец, найти нужную фотографию и не удастся ее использовать, особенно если у вас нет приложения для изменения размера изображения, такого как Photoshop.
Здесь, в Infomedia, мы используем Photoshop для изменения размера, ретуши и редактирования фотографий. Наши дизайнеры являются профессионалами в создании изображений, идеально подходящих для создаваемых нами веб-сайтов. Но Photoshop — дорогой инструмент, и не стоит покупать весь пакет, если все, что вам нужно, это время от времени изменять размер фотографии.
Нам было странно трудно найти бесплатный инструмент для изменения размера фотографий, который нам нравится, но наконец-то у нас есть один, который мы можем порекомендовать — PicResize. Это работает, это бесплатно и, в первую очередь, может загружать широкоформатные фотографии (до 100 МБ) (многие из найденных нами бесплатных инструментов для изменения размера фотографий имели небольшой лимит загрузки, что для нас неважно).Вы также можете использовать этот бесплатный фотоинструмент для обрезки изображений — вы можете нарисовать рамку вокруг фрагмента, который хотите сохранить, или вы можете выбрать нестандартный размер для обрезки, если у вас есть определенные ограничения размера для вашей фотографии (например, если вы используете его для слайдера на своем веб-сайте).
Вот как это работает:
Загрузите свое фото
Нажмите кнопку «Обзор», и это позволит вам выполнить поиск файла изображения на вашем компьютере. Если вы получили изображение по электронной почте или в Dropbox, вам сначала необходимо загрузить его на свой компьютер.
После загрузки изображения щелкните желтую стрелку «Продолжить».
Поверните и обрежьте изображение (при желании)
Слева от фотографии вы увидите меню кадрирования и меню поворота. Используйте меню поворота, если ваше изображение перевернуто, перевернуто или перевернуто. Используйте меню кадрирования, если хотите изменить то, что отображается на вашем изображении. (Для кадрирования сначала наведите курсор на ту часть фотографии, которую вы хотите разместить в верхнем левом углу изображения; затем перетащите вниз, и вы увидите, что на вашем изображении появится поле; сделайте это поле включенным все, что вы хотите Фото.Когда вы будете довольны своим выбором, нажмите кнопку Crop Selection.)
Измените размер изображения
Это именно то, что мы хотим! Вы можете уменьшить размер изображения на 25%, 50% или 75% либо выбрать размер разрешения — или выбрать нестандартный размер. Если вы выберете нестандартный размер, укажите только или ширину, или высоту — вы хотите сохранить правильные пропорции, иначе ваша фотография будет выглядеть искаженной. Если вы введете только одно или другое, программа автоматически выберет правильную пропорцию для отсутствующей записи.
Далее программа дает вам возможность выбрать специальный эффект, но мы настоятельно не рекомендуем этого делать; для таких непрофессионалов, как мы, очень легко зайти слишком далеко со спецэффектом. Если ваша фотография нуждается в подобном редактировании, мы рекомендуем вам отправить ее в Infomedia и позволить одному из наших профессиональных дизайнеров помочь с вашей фотографией.
Сохраните фото с измененным размером
Мы рекомендуем сохранить как JPG и выбрать «Лучше» в зависимости от качества изображения. Вы можете оставить поле размера файла пустым.После того, как вы нажмете, чтобы изменить размер изображения, вы увидите несколько вариантов: нажмите «Сохранить на диск» (вариант с гибким диском), чтобы сохранить файл на свой компьютер; оттуда вы можете загрузить его в свою медиатеку WordPress.
Если у вас есть фотография, размер которой нужно изменить для вашего веб-сайта, посетите Pic Resize и начните обрезать свое изображение сегодня! Затем просто загрузите его в свою медиатеку (вот видео, показывающее, как использовать медиатеку) и начните наслаждаться прекрасными новыми изображениями на своем веб-сайте!
Общие форматы файлов цифровых фотографий Цифровой формат, в котором хранится изображение, очень важен для качества.Существуют десятки форматов цифровых изображений, но три наиболее распространенных — это JPEG (формат без потерь), TIF (формат без потерь) и RAW (формат без потерь, встроенный в камеру). С потерями означает, что данные изображения теряются при сжатии изображения, в то время как формат без потерь сохраняет все исходные данные даже при сжатии. JPEG (JPG, JPE) означает Joint Photographic Experts Group и представляет собой стандарт, разработанный в 1980-х годах для обработки цветных цифровых изображений. Лучше всего он работает с фотографическими изображениями (в отличие от изображений текста), поскольку основан на смешивании цветов.Это формат с потерями, он уменьшает размер файла изображения путем смешивания «избыточных» пикселей изображения. По мере сжатия изображения по краям объектов на фотографии появляется размытость. Большинство камер будут показывать такие настройки качества изображения JPEG, как низкое (высокое сжатие), высокое (умеренное сжатие) и сверхвысокое (низкое сжатие). Это не следует путать с размером изображения, это две разные вещи (камеры обычно показывают размер изображения как маленький, средний и большой, что связано с размерами изображения в пикселях).В компьютерных программах для редактирования фотографий сжатие JPEG обычно выражается в процентах, где 100% — это отсутствие сжатия, а 0% — максимальное сжатие (например, качество 100% против качества 0%). Обычно видимые искажения начинают проявляться при 50%. Adobe Photoshop использует скользящую шкалу от 0 до 12 * (на самом деле от 0% до 100%). После сжатия в формате JPEG изображение не может быть распаковано (вы не можете восстановить исходное качество). Вот почему исходная фотография (ваш цифровой негатив) должна быть сделана с минимальным сжатием.
Проблема с использованием файла JPEG в качестве исходного для редактирования заключается в том, что каждый раз, когда вы выполняете «сохранить как» с JPEG после редактирования, он еще больше ухудшается, даже если для сжатия JPEG установлено максимальное качество.Ухудшение не является серьезным, но те, кто желает сохранить наилучшее качество своих изображений, сначала «сохранят как» свое изображение в формате без потерь, таком как TIF, а затем выполнят все свое редактирование в этом формате. Окончательное изображение можно сохранить в формате JPEG высокого качества. Обратите внимание, что вы можете скопировать файл JPEG, используя функцию копирования вашего компьютера, несколько раз без потери качества (как все цифровые файлы) — это просто повторное сохранение JPEG из любой программы для редактирования фотографий после редактирования (или даже обрезки) это добавит деградации изображения. Плюсы: небольшой размер изображения, очень хорошее фотографическое воспроизведение, лучший формат для отправки по электронной почте или публикации в Интернете, совместим практически со всеми графическими редакторами и программами просмотра. Поддерживает метаданные IPTC / XMP (с определенным программным обеспечением — см. «Маркировка фотографий»). Удобный инструмент для определения коэффициента сжатия JPEG — это небольшая бесплатная программа под названием JpgQ.Взгляните на Оценщик качества JPEG (перейдите по ссылке на этой странице к JpgQ — Оценщику качества JPEG). JPEG2000 (JP2, JPF, JPX) это более новая (представленная в 2000 году) версия JPEG, которая включает настройку без потерь. Он сжимает по технологии «вейвлет», а не по блочной технологии, а при 0 сжатии это формат «без потерь». Он сжимает на 25-35% лучше, чем стандартный JPEG, с более высоким качеством изображения. Скорее всего, пройдут несколько лет, прежде чем мы увидим полномасштабную реализацию этого стандарта, поскольку он намного сложнее, чем JPEG, и, следовательно, его труднее реализовать в программном обеспечении для обработки фотографий (поэтому не все программное обеспечение полностью поддерживает и / или правильно реализует его). Он (как JP2) является одним из рекомендуемых стандартов хранения цифровых данных Библиотеки Конгресса США (после TIF, который является их основной рекомендацией). Плюсы: малый размер изображения, очень хорошее фотографическое воспроизведение, есть настройка без потерь. Поддерживает метаданные IPTC / XMP (с определенным программным обеспечением — см. «Маркировка фотографий»). JPEG XR (JXR) это еще одна более новая (представленная в 2009 году) версия JPEG, которая включает настройку без потерь.Он был разработан Microsoft, а XR означает Extended Range. Он поддерживает большую глубину цвета, чем обычный JPEG, и другие функции, такие как мозаичное отображение. Плюсы: малый размер изображения, очень хорошее фотографическое воспроизведение, есть настройка без потерь. Поддерживает метаданные IPTC / XMP. TIF / TIFF — это формат изображения без потерь (при условии, что вы не используете сжатие JPEG в TIF), то есть в изображении не изменяются пиксели.TIFF означает формат файла изображения тега. Обычно это приводит к очень большим размерам изображений (с точки зрения размера компьютерного файла). TIF может быть сжат с использованием LZW или ZIP, оба метода сжатия без потерь. Использование LZW или ZIP сократит изображение TIF без потери данных. Обратите внимание, что некоторые программы также предоставляют возможность сжатия JPEG — если оно используется, это приведет к потере данных (поэтому не используйте эту опцию). Даже сжатые файлы TIF очень большие, намного больше по размеру компьютерных файлов, чем их эквиваленты в формате JPEG.TIF — это фаворит графических дизайнеров, поскольку он был одним из первых стандартов Mac, это формат без потерь и может содержать больше информации о фотографиях, чем изображение в формате JPEG. TIF — это основной формат, рекомендуемый Библиотекой Конгресса США для цифрового хранения. Плюсы: Формат «без потерь» — вся информация об изображении сохраняется. Поддерживает метаданные IPTC / XMP (с определенным программным обеспечением — см. «Маркировка фотографий»). RAW — это формат изображения без потерь, предлагаемый некоторыми цифровыми камерами. Изображение JPEG, созданное камерой, представляет собой изображение, обрабатываемое программным обеспечением камеры, в котором переменные, такие как резкость, контраст, насыщенность и баланс белого, применяются к цифровому изображению в зависимости от настроек камеры. С другой стороны, RAW — это прямое необработанное изображение, видимое сенсором камеры. Он позволяет выполнять пост-обработку изображения с использованием любого из параметров камеры (т.е. резкость, контраст и т. д.). Этот формат обычно предпочитают профессиональные фотографы для своих «негативов» (оригиналов) изображений, поскольку он обеспечивает максимальную гибкость постобработки. Обратной стороной RAW является то, что формат в настоящее время является собственностью производителя камеры и, следовательно, не является хорошим долгосрочным стандартом архивирования (вы должны конвертировать свои RAW в TIF для архивного хранения). Ведется работа по стандартизации формата RAW, но стандарт вряд ли будет установлен, поскольку новые функции (т.е. баланс белого, фокус и брекетинг HDR), добавляемые в цифровые камеры, в конечном итоге становятся частью их данных RAW, и это продолжает меняться по мере появления новых инноваций. Плюсы: Формат «без потерь» — позволяет выполнять полную пост-обработку всех переменных в камере (баланс белого, насыщенность, резкость и т. Д.). PDF — PDF (Portable Document Format) не является типом файла изображения, хотя изображения могут храниться в PDF.Предупреждение здесь заключается в том, что PDF-файлы могут использовать различные типы хранения изображений в PDF-файлах, включая JPEG с потерями. Таким образом, вы должны быть очень осторожны при создании PDF-файла, содержащего желаемое изображение. Создатель PDF, который вы используете, будет иметь настройки по умолчанию, включая тип хранилища изображений в PDF и разрешение, с которым сохраняется изображение. По умолчанию размер файла обычно совпадает с качеством документа. Самое большое, что влияет на размер файла PDF, — это изображения внутри PDF.Текст (чистые шрифты) занимает очень мало места, именно изображения увеличивают размер файла PDF. Так что знайте об этом. Я не рекомендую PDF в качестве основного типа хранения изображений (первыми вариантами будут JPEG и TIF). Плюсы: открытый формат, поддерживаемый широким спектром программного обеспечения. Может включать текст и изображения, что очень удобно для отчетов и тому подобного.
Надеюсь, эта статья дала вам лучшее представление о том, что на самом деле представляют собой распространенные типы файлов цифровых фотографий. Вы увидите десятки других типов файлов в любой данной программе обработки фотографий (например, GIF, PNG, BMP, PSD и т. Д.) — они обычно используются для определенных графических целей (анимация, прозрачность, текст, наложение слоев) и обычно не используются для цифровых фотографии (исключением является использование проприетарного формата программного обеспечения для обработки фотографий, такого как Adobe Photoshop PSD, для сохранения редактируемых слоев в формате без потерь). Общее правило — снимать изображения с максимальными настройками, которые позволяет камера (максимальный размер изображения в пикселях, минимальное сжатие — обычно большое / сверхвысокое). Пуристы будут использовать RAW, если он доступен, но для большинства людей использование большого / сверхвысокого (или аналогичного) JPEG в цифровой камере вполне нормально. Размер файла цифрового изображения Из обсуждения на странице «Что такое цифровая фотография» мы знаем, что «размер» цифрового изображения — это общее количество пикселей, выраженное в мегапикселях.Это отличается от размера файла, который представляет собой количество байтов, используемых для хранения изображения. Даже при одинаковом цифровом размере изображения (например, 3 Мп) размер файла будет меняться в зависимости от типа файла, используемого для хранения изображения, количества цвета в изображении и используемого цветового режима. В качестве примера этой вариации в пределах того же размера цифрового изображения, диапазон файлов JPEG, снятых моей текущей камерой (сохраненных с качеством 96% / Adobe 11), при 18 Мп, варьируется от 4 Мб до 11 Мб — вариант результат цвета и яркости на каждой фотографии.Исключение составляет несжатый TIF, который всегда будет иметь одинаковый размер файла для цифровой фотографии с определенным разрешением Mp и цветовым режимом. В приведенной ниже таблице показаны примеры изображения 3 Мп и изображения 15 Мп (похожие сцены), сохраненные с использованием различных форматов файлов.
Если бы те же самые фотографии были уменьшены до 800 x 600 и сохранены в формате 50% JPEG, они были бы размером около 100 Кб (0,1 Мб) (идеально для отправки по электронной почте). См. Страницу «Изменение размера фото». Принтеры (аппарат) используют другую цветовую схему, называемую CMYK (а не RGB) — подробности см. На странице цветовых режимов.Они предназначены для файлов большего размера и абсолютно не нужны для любого фотографического использования. При печати программное обеспечение принтера будет намного лучше конвертировать из RGB в ту версию CMYK, которую вы можете — поэтому всегда используйте цветовое пространство RGB (как правило, sRGB является лучшим — это то, что используют компьютеры и камеры — некоторые профессионалы будут использовать Adobe RGB. для немного более широкого цветового пространства). Практический результат для большинства людей — не возиться с цветовым пространством, а оставить его так, как это установила камера. Почему Adobe использует шкалу от 1 до 12 для качества JPEG? Мне задавали этот вопрос несколько раз, и, честно говоря, я не знаю — я могу только предполагать.Разработчики программного обеспечения могут свободно внедрять «стандарт» любым способом, которым они хотят (никто не заставляет их придерживаться какой-либо конкретной конвенции, хотя это действительно служит их интересам). JPEG был разработан с «коэффициентом качества» от 0 до 100, где 0 — худшее, а 100 — лучшее. Это не линейная шкала (качество 80 не вдвое лучше, чем качество 40), и это не совсем сжатие, как обычно думают о программном сжатии (например, ZIP, LZW или другие формы неразрушающего сжатия). Первоначально Adobe использовала шкалу от 1 до 10, но 10 на самом деле не было качеством JPEG 100, это было ближе к качеству JPEG 94. Почему бы не использовать стандарт JPEG от 0 до 100? Я не могу читать мысли разработчиков программного обеспечения Adobe, по-видимому, они думали, что от 1 до 10 будет проще. Почему 10 не было равно JPEG 100? Очевидно, это была ошибка, но, по-видимому, считалось, что с нелинейной шкалой JPEG, где 94 не сильно отличается от 100 с точки зрения визуального качества, это было все, что могло понадобиться большинству людей (причина, по которой большинство производителей камер говорят о качестве 96, а не 100 для их JPEG наилучшего качества).Причина, по которой не стоит переходить на 100, заключается в большом скачке размера файла — размер увеличивается с незначительной отдачей в качестве — и это было в те дни, когда жесткие диски были очень маленькими по сегодняшним меркам. В какой-то момент кто-то пожаловался, что Adobe 10 не является JPEG 100, и, должно быть, давил на Adobe, чтобы разрешить вариант JPEG 100 (или, возможно, это были их внутренние разработчики программного обеспечения). Теперь выбор: изменить масштаб от 1 до 10, что будет означать, что старые версии Photoshop не будут соответствовать более новым версиям, или изменить масштаб, чтобы расширить верхний предел (чтобы новый Adobe 10 оставался таким же, как старый Adobe 10 ).Поэтому они сделали хороший выбор (учитывая их первоначальную ошибку), увеличив шкалу до 12, вместо того, чтобы менять шкалу от 1 до 10. В идеале они должны были предоставить эквивалентную шкалу JPEG от 0 до 100 в дополнение к шкале от 1 до 12. Однако Photoshop (по крайней мере, в CS5) остается немного шизофреничным. При сохранении в JPEG предоставляется только шкала от 1 до 12. Однако в их опции «Сохранить для Интернета и устройств» вы получаете коэффициент качества от 0 до 100 (и без шкалы от 1 до 12). Почему это остается загадкой (для меня). В реальных условиях использования Adobe 12 / JPEG 100 по сравнению с Adobe 11 / JPEG 96 или даже Adobe 10 / JPEG 94 нет практически никаких преимуществ. Вы можете посмотреть на диаграмму выше, чтобы увидеть огромный скачок в размере файла, если вы пойдете. |