Как уменьшить размер JPEG и других файлов изображений

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

В этой статье мы рассмотрим ручные методы уменьшения размеров изображений в Photoshop, включая изменение типа файла, изменение размера и сжатие файлов с помощью функции «Сохранить для Интернета». Если те, кто ищет что-то более автоматизированное, мы также рассмотрим некоторые плагины и веб-варианты.

Подпишитесь на наш канал Youtube

Изменение типа файла

«Размер файла» для файла изображения означает количество пикселей на дюйм. Как правило, чем больше пикселей на дюйм, тем больше информации содержит файл, следовательно, тем больше его размер.

Двумя наиболее распространенными типами файлов изображений являются JPG и PNG.

• PNG - Portable Network Graphics - этот тип файлов в основном используется для графических файлов, таких как логотипы, значки, иллюстрации и текст. При редактировании в приложении для редактирования фотографий, таком как Photoshop, эти файлы не теряют много данных, когда вы манипулируете или сжимаете их. По этой причине они называются «без потерь». По этой причине эти файлы, как правило, имеют больший размер.
• JPEG - Joint Photographic Experts Group - это наиболее распространенный тип файлов, который вы найдете для большинства изображений в Интернете. Этот тип файла может управлять миллионами цветов, может быть сильно сжат при сохранении качества. Они называются «с потерями», потому что процесс их сжатия удаляет пиксели из изображения.

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

Вот образец фото. Его исходный формат был как файл JPG.

Я использовал команду «Файл»> «Сохранить как» в Photoshop, выбрал формат PNG и выполнил функцию сохранения.

Когда я изменил тип файла, размер файла увеличился с 646 МБ до 1,3 КБ. Как отмечалось выше, файлы PNG обычно больше, поэтому для этого типа изображения с большим количеством цветов и деталей вам может быть лучше остаться с версией JPEG, чтобы обеспечить более быстрое время загрузки. Если вы знаете, что ваше изображение должно увеличиваться без потери разрешения, выберите версию PNG.

Обратите внимание, что доступно множество других форматов файлов. Я сосредоточился на JPEG и PNG, потому что они самые популярные.

Ручное изменение размера в Photoshop

В Photoshop вы можете использовать функцию «Изображение»> «Размер изображения», чтобы вручную изменить размер изображения. Инструмент выглядит так:

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

По размеру - раскрывающийся список с предустановленными размерами и настройками пикселей.

Если я выберу первый вариант в этом списке для настройки размеров и пикселей на дюйм (ppi), я увижу, как изменится размер файла.

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

Сохранить для веб-функции

«Сохранить для Интернета» отличается от «Сохранить как» тем, что веб-вариант удаляет метаданные (сведения о типе и происхождении изображения) из файла перед сохранением. Эта функция специально предназначена для изображений, которые будут отображаться в Интернете, поэтому это может быть очень быстрый способ изменить размер при сохранении качества.

Найдите параметр «Сохранить для Интернета», перейдя в «Файл»> «Экспорт»> «Сохранить для Интернета»:

Когда откроется окно «Сохранить для Интернета», вы заметите еще одно преимущество этой функции. Если вы выберете вкладку «2-up» вверху, вы сможете увидеть сравнение исходного изображения бок о бок с измененным изображением.

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

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

Инструменты оптимизации изображений WordPress

Photoshop - отличный вариант, если вы хотите сами поворачивать шкалу, чтобы уменьшить размер файла изображения. Если вы ищете что-то более автоматизированное, чтобы помочь с изменением размера ваших изображений, есть большое количество вариантов плагинов WordPress, которые могут помочь. Вот список нескольких популярных вариантов и краткое описание их преимуществ:

Imagify - Оптимизируйте все изображения за один раз, с легкостью изменяйте размер и при необходимости восстанавливайте исходные версии фотографий. Это тоже доступно. Этот плагин можно загрузить бесплатно и включает 20 МБ файлового пространства. Другие варианты: 5 долларов в месяц за 500 МБ и 10 долларов в месяц за неограниченное пространство.

ShortPixel - Отсутствие ограничения на размер файла и один ключ API для нескольких сайтов позволяют эффективно использовать этот плагин. Они также предлагают разовые и ежемесячные планы для гибкости бюджета.

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

Для более полного сравнения этих и некоторых других вариантов см. Эту статью.

Веб-ресурсы для оптимизации изображений

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

Compressjpg позволяет загружать несколько файлов и изменять их размер одновременно. Он также имеет функцию, которая преобразует фотографии формата iPhone HEIC в JPEG. Другие похожие сайты - это Tinypng, а также Image Compressor.

Canva Pro - еще один популярный сайт, который не только изменяет размер, но и позволяет создавать и анимировать изображения, а также форматировать их для использования в Интернете или социальных сетях. Его компоновка интуитивно понятна и проста в использовании.

Заключение

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

Используете ли вы какой-либо из этих методов для изменения размера изображений? Если нет, что, по вашему мнению, вы попробуете в первую очередь? Сообщите нам в комментариях!

Лучшее изображение через Prihanto Edi / shutterstock.com