Как сжать фото для сайта


Бесплатные инструменты сжатия изображений для ускорения работы сайта

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



По данным HTTP Archive, средний размер веб-страницы — 2,4 Mb и 64% приходится на изображения. Вы все правильно поняли: средний размер изображений на веб-странице — 1,5 Mb.

Какой размер страниц на вашем сайте?

Если на вашем сайте много изображений или на них приходится значительная доля объема страницы, необходимо их оптимизировать для уменьшения размера. С уменьшением изображений связаны следующие преимущества:

  • уменьшение общего размера страницы;
  • экономия трафика;
  • сокращение времени загрузки страницы и повышение SEO рейтинга.

Есть целый ряд способов оптимизировать изображения, но лучше это делать без ущерба для качества. В статье речь пойдет о трех видах инструментов.
  1. Самостоятельные инструменты: На сайте ничего устанавливать не нужно. Просто зайдите на страницу сервиса, загрузите изображения и получите оптимизированные изображения.
  2. Плагин WordPress: Установите плагин на ваш сайт на WordPress и, в зависимости от выбранных настроек, размер изображения будет сокращаться при загрузке на сайт.
  3. Расширение для Joomla: Установите расширение на ваш сайт на Joomla и изображения будут оптимизированы на вашем сервере с Joomla.

Вы готовы ускорить свой сайт?

Список инструментов


Самостоятельные инструменты:
  1. Tiny PNG
  2. Compressor
  3. Puny PNG
  4. Compress Now
  5. Kraken
  6. Optimi Zilla
  7. JPEG Mini
  8. Imagify

Плагины WordPress:
  1. EWWW Image Optimizer
  2. WP Smush
  3. Optimus
  4. TinyPNG
  5. Short Pixel

Расширения для Joomla:
  1. Imgen
  2. Image Recycle
  3. EIR
  4. Prizm Image

Самостоятельные инструменты


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

1. Tiny PNG


Для уменьшения размера файлов PNG или JPG на TinyPNG используются методы сжатия с потерями. Можно загружать до 20 изображений, размер каждого из которых не может превышать 5 Mb.

2. Compressor


Compressor позволяет сжать изображения с уменьшением объема до 90% и при этом сохранить высокое разрешение. Он работает с JPEG, PNG, GIF и SVG-файлами. Ограничение по размеру — 10 Mb.

3. Puny PNG


PunyPNG подходит для дизайнеров и разработчиков. Не годится для работы, если размеры ваших изображений исчисляются мегабайтами: ограничение по размеру — 500 KB, по количеству файлов — 20 штук. Возможно сжатие JPG, GIF и PNG-файлов.

4. Compress Now


Уменьшите размер изображений с помощью Compressnow. Этот инструмент хорош тем, что вы можете задать процент сжатия.То есть, вы сами решаете насколько сжимать файл.

5. Kraken


При оптимизации Kraken позволяет вам выбирать между сжатием с потерями, без потерь и с возможностью самостоятельной настройки. Файл можно загрузить с компьютера, Dropbox, Google drive или Box.

6. Optimi Zilla


Загрузите до 20 JPEG или PNG-файлов на OptimiZilla. Если вы загружаете несколько файлов, то скачать их все можно одним архивом.

7. JPEG Mini


Избавьтесь от лишних килобайт с помощью JPEG Mini. Возможна обработка исключительно файлов JPG.

8. Imagify


Здесь можно выбрать из нескольких уровней сжатия: нормальным, агрессивным и ультра-сжатием. Файлы хранятся до 24 часов на Imagify, так что их можно скачать позже, если захотите.

Вышеуказанные самостоятельные инструменты помогут вам в уменьшении размера файлов. А теперь давайте рассмотрим плагины для WordPress.

Плагины WordPress:


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

1. EWWW Image Optimizer


EWWW Image Optimizer — один из лучших плагинов для оптимизации. Он позволяет уменьшать размер изображений, а также выбирать файлы, для которых оптимизация производиться не будет. Это очень полезно, если ваш сайт имеет отношение к фотографии, и вы не хотите ухудшать качество определенных снимков.

2. WP Smush


Этот замечательный плагин от wpmudev установлен более 400 тысяч раз. Он позволяет сжимать изображения партиями или в момент загрузки на сайт. В бесплатной версии WP Smush позволяет обрабатывать до 50 изображений подряд. Плагин обрабатывает файлы в форматах JPEG, PNG и GIF.

3. Optimus


Optimus от KeyCDN помогает уменьшить изображения до 70%, но есть ограничение по размеру — 100 kB.
  • оптимизация исходных изображений;
  • оптимизация во время загрузки.

4. TinyPNG


Выполните сжатие файлов в формате JPEG и PNG с помощью TinyPNG. Именно этим инструментом пользуюсь я, и он меня всем устраивает.

5. Short Pixel


Short Pixel сжимает не только изображения, но и PDF. Инструмент совместим с WooCommerce и обрабатывает GIF, PNG, JPG и PDF-файлы.

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

Расширения для Joomla


Следующие расширения бесплатны, так что попробуйте и решите, что подходит именно вам.

1. Imgen


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

2. Image Recycle


Image Recycle — популярное расширение для Joomla, помогающее оптимизировать изображения и PDF-файлы. Можно настроить автоматическое сжатие новых изображений или уменьшить размер уже существующих. Также существует возможность задать уровень оптимизации для отдельных типов файлов.

3. EIR


Easy Image Resizer меняет разрешение загруженных изображений с помощью медиа-менеджера. EIR осуществляет сжатие на базе Optimus.io.

4. Prizm Image


Prize Image помогает удалить метаданные из JPEG, конвертировать прогрессивные JPEG в последовательные и наоборот, оптимизировать PNG и GIF без ущерба для качества. Для сжатия плагин использует Prizm Image API.

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

На HOSTING.cafe всегда можно сравнить предложения виртуальных серверов и хостинга.

Как легко оптимизировать изображения для Интернета (без потери качества)

Знаете ли вы, что оптимизация изображений перед загрузкой в ​​WordPress может иметь огромное влияние на скорость вашего сайта?

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

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

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

Поскольку это исчерпывающее руководство по оптимизации изображений для Интернета, мы создали простую для понимания таблицу содержания:

Что такое оптимизация изображения? (Оптимизированные и неоптимизированные изображения)

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

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

Вот пример оптимизированного и неоптимизированного изображения:

Как видите, при правильной оптимизации одно и то же изображение может быть на 75% меньше оригинала без потери качества.

Как работает оптимизация изображения?

Проще говоря, оптимизация изображений работает с использованием технологий сжатия, таких как «Lossy» и «Lossless», которые помогают уменьшить общий размер файла без какой-либо заметной потери качества.

Что значит оптимизировать изображения?

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

Почему так важна оптимизация изображения? Каковы преимущества оптимизации изображений?

Хотя оптимизация изображений дает множество преимуществ, ниже приведены основные из них, о которых вы должны знать:

  • Быстрее скорость веб-сайта
  • Улучшен рейтинг SEO
  • Более высокий общий коэффициент конверсии продаж и потенциальных клиентов
  • Меньше хранилища и пропускной способности (что может снизить стоимость хостинга и CDN)
  • Более быстрое резервное копирование веб-сайтов (также снижает стоимость хранения резервных копий)

Помимо видео, изображения - это следующий по значимости элемент на веб-странице.Согласно HTTP-архиву, изображений составляют в среднем 21% от общего веса веб-страницы.

Поскольку мы знаем, что быстрые веб-сайты занимают более высокие позиции в поисковых системах (SEO) и имеют лучшую конверсию, оптимизация изображений - это то, что должен делать каждый бизнес-сайт, если он хочет добиться успеха в Интернете.

Теперь вам может быть интересно, насколько действительно важна оптимизация изображений?

Согласно исследованию Strangeloop, задержка загрузки веб-сайта в одну секунду может стоить вам 7% продаж, на 11% меньше просмотров страниц и на 16% снижения удовлетворенности клиентов.

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

Это означает, что оптимизируя изображения для Интернета, вы можете как улучшить скорость сайта, так и повысить рейтинг WordPress в SEO.

Видеоурок

Подписаться на WPBeginner

Если вы предпочитаете письменные инструкции, просто продолжайте читать.

Как сохранить и оптимизировать изображения для повышения производительности в Интернете?

Ключ к успешной оптимизации изображений для работы в Интернете - это найти идеальный баланс между минимальным размером файла и приемлемым качеством изображения.

Три вещи, которые играют огромную роль в оптимизации изображения:

  • Формат файла изображения (JPEG против PNG против GIF)
  • Сжатие (более высокое сжатие = меньший размер файла)
  • Размеры изображения (высота и ширина)

Выбрав правильную комбинацию из трех, вы можете уменьшить размер изображения до 80%.

Давайте рассмотрим каждый из них более подробно.

1. Формат файла изображения

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

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

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

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

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

В WPBeginner мы используем все три формата изображений в зависимости от типа изображения.

2. Сжатие

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

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

Большинство инструментов для редактирования изображений, таких как Adobe Photoshop, On1 Photo, GIMP, Affinity Photo и другие, имеют встроенные функции сжатия изображений.

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

Хотя это немного вручную, эти два метода позволяют вам сжимать изображения перед их загрузкой в ​​WordPress, и это то, что мы делаем на WPBeginner.

Существует также несколько популярных плагинов WordPress, таких как Optimole, EWWW Image Optimizer и другие, которые могут автоматически сжимать изображения при их первой загрузке. Многие новички и даже крупные корпорации предпочитают использовать эти плагины для оптимизации изображений, потому что это просто и удобно.

Мы расскажем больше об этих плагинах WordPress позже в этой статье.

3. Размеры изображения

Обычно, когда вы импортируете фотографию со своего телефона или цифровой камеры, она имеет очень высокое разрешение и большие размеры файла (высоту и ширину).

Обычно эти фотографии имеют разрешение 300 точек на дюйм и размер от 2000 пикселей и более. Эти высококачественные фотографии хорошо подходят для печати или настольных издательских систем. Они не подходят для веб-сайтов.

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

Например, мы оптимизировали фотографию с исходным размером файла 1,8 МБ, разрешением 300 точек на дюйм и размером изображения 4900 × 3200 пикселей.

Мы выбрали формат jpeg для более высокого сжатия и изменили размеры до 1200 × 795 пикселей, а также уменьшили размер файла изображения до 103 КБ. Это на 94% меньше исходного размера файла.

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

Лучшие инструменты и программы для оптимизации изображений

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

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

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

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

Adobe Photoshop

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

Откроется новое диалоговое окно. Справа вы можете установить разные форматы изображений.Для формата JPEG вы увидите разные варианты качества. Когда вы выбираете свои параметры, он также показывает размер файла в нижнем левом углу.

GIMP

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

Сначала вам нужно открыть ваше изображение в GIMP, а затем выбрать опцию File »Export As .Это вызовет диалоговое окно сохранения файла. Дайте вашему файлу новое имя, а затем нажмите кнопку экспорта.

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

TinyPNG

TinyPNG - это бесплатное веб-приложение, в котором используется технология интеллектуального сжатия с потерями для уменьшения размера файлов PNG. Все, что вам нужно сделать, это зайти на их веб-сайт и загрузить свои изображения (простым перетаскиванием).

Они сожмут изображение и дадут вам ссылку для скачивания. Вы можете использовать их дочерний веб-сайт TinyJPG для сжатия изображений JPEG.

У них также есть расширение для Adobe Photoshop, которое мы используем как часть нашего процесса редактирования изображений, потому что оно сочетает в себе лучшее из TinyPNG и TinyJPG внутри Photoshop.

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

JPEG Mini

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

Вы можете использовать их веб-версию бесплатно или приобрести программу для своего компьютера. У них также есть платный API для автоматизации процесса для вашего сервера.

ImageOptim

ImageOptim - это утилита для Mac, которая позволяет сжимать изображения без потери качества, находя лучшие параметры сжатия и удаляя ненужные цветовые профили.

Альтернатива Windows для этого - Trimage.

Лучшие плагины для оптимизации изображений для WordPress

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

Ниже представлен наш список лучших плагинов для сжатия изображений WordPress:

  1. Optimole - популярный плагин от команды ThemeIsle.
  2. EWWW Оптимизатор изображения
  3. Сжатие изображений JPEG и PNG - плагин от команды TinyPNG, упомянутой выше в статье.
  4. Imagify - плагин от популярной команды плагинов WP Rocket.
  5. Оптимизатор изображения ShortPixel
  6. WP Smush
  7. reSmush.it

Использование любого из этих плагинов для оптимизации изображений WordPress поможет вам ускорить работу вашего сайта.

Последние мысли и передовые методы оптимизации изображений

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

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

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

В качестве альтернативы вы можете использовать управляемую хостинговую компанию WordPress, потому что они часто предлагают как кеширование, так и CDN как часть платформы.

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

Как сжимать файлы для мультимедийного сайта без потери производительности

Создание веб-сайта с большим количеством изображений или видео обеспечивает красивый дизайн, но гигантские файлы изображений могут серьезно замедлить время загрузки и негативно повлиять на взаимодействие с пользователем. В прошлом году газета New York Times выпустила инфографику с подробным описанием того, сколько секунд (а также долларов на использование данных) рекламных и редакционных материалов определенных публикаций требуется для загрузки на мобильные устройства.Хотя рекламный контент увеличивает время задержки для любого веб-сайта, именно веб-сайты с большим количеством фотографий, такие как New York Post, загружаются дольше всего.

Но эта проблема не ограничивается редакционными веб-сайтами и, конечно же, не ограничивается только мобильными пользователями. Подумайте о том, сколько изображений появляется на веб-сайте электронной коммерции с сотнями или даже тысячами товаров. Или образовательные веб-сайты с богатым содержанием с изображениями и графикой для помощи в процессе обучения. Эта проблема настолько распространена, что Google даже посвятил этой теме целый раздел своего веб-сайта для разработчиков.

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

Итак, теперь, когда вы осознали проблему, как мы можем ограничить размер файлов изображений, чтобы ваш сайт оставался легким и быстрым?

Сжатие рабочего процесса

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

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

  • Дизайн: По возможности избегайте использования всех оттенков радуги. Ограничение количества цветов, используемых в статическом изображении или GIF, поможет уменьшить размер файла при сохранении качества изображения в дальнейшем. В качестве бонуса использование монохромных фотографий может оказать большее влияние на веб-страницу, если цвет используется выборочно.
  • Development: Рассмотрите возможность использования двух разных файлов, чтобы обеспечить высочайшее качество для дисплеев Retina, не отвлекая пользователей от других типов экранов.
  • Создатели контента: Если вы используете стоковые фотографии, GIF-файлы или видео для иллюстрации сообщения в блоге или оживления веб-страницы, используйте описанные ниже методы сжатия, чтобы уменьшить размер файла перед загрузкой.

Хрустящая фотография Килобайт

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

Шаг 1. Вооружитесь

Для этого вам понадобятся два бесплатных инструмента. Загрузите ImageAlpha и ImageOptim, чтобы начать работу, а затем выберите фотографию, чтобы попробовать их. В качестве примера мы возьмем пиццу с насыщенным цветом. Начальный размер файла нашей пиццы составляет 1 МБ, что немного больше, чем рекомендуется для использования в Интернете.

Шаг 2: Уменьшение количества цветов

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

В нижней панели ImageAlpha вы можете видеть, что, уменьшив исходные настройки изображения до 256 цветов, мы уже сэкономили 54 процента в размере файла! Выберите «Файл»> «Сохранить как», чтобы сохранить эту версию изображения.Но на этом мы не остановимся!

Шаг 3. Продолжайте хруст

Откройте ImageOptim и перетащите файл изображения с уменьшенным цветом в инструмент. Если вы обрабатываете изображения в пакетном режиме, вы можете даже перетаскивать несколько файлов за раз. Сразу же вы увидите, как ImageOptim перебирает файл, экономя дополнительные 5–10 процентов или более в размере файла. Как происходит это волшебство? Инструмент удаляет ненужные метаданные и цветовые профили, связанные с файлом, о существовании которого вы, вероятно, даже не подозревали.

Шаг 4. Почувствуйте себя невесомым

Наслаждайтесь тем фактом, что вы действительно существенно улучшаете производительность в Интернете. В этом примере файл начинался с размера чуть более 1 МБ и был уменьшен до 412 КБ. Неплохо за две минуты работы! Если вы сравните до (слева) и после (справа) ниже, вы можете заметить небольшую зернистость в обновленном файле.

Сжатие в движении

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

Инструменты оптимизации

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

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

Шаг 1. Уменьшите количество кадров

Начальный файл в этом примере имеет колоссальные 84,2 МБ, и когда он открывается в Photoshop, мы видим, что большой вклад в это вносит тот факт, что эта анимация состоит из 450 кадров.Все эти кадры создают GIF длиной более 13 секунд - намного дольше, чем продолжительность концентрации внимания большинства посетителей веб-сайтов!

Первое, что нужно оптимизировать, - это фактическое количество кадров в анимации. В этом случае мы можем полностью удалить кадры 301-450. Затем удалите все остальные оставшиеся кадры (либо все события, либо разногласия). Это снизит плавность анимации, но обеспечит немедленную экономию размера файла. Чтобы компенсировать удаление промежуточных кадров, выберите все оставшиеся кадры и удвойте их временную длительность (в данном случае увеличьте исходное значение 0.От 03 до 0,06 с), поэтому анимация не будет внезапно в два раза быстрее, чем предполагалось.

Шаг 2: Сохранить для Интернета

Выберите «Файл»> «Сохранить для Интернета и устройств». Переключитесь в режим просмотра «2 изображения», чтобы одновременно просматривать исходный файл и новый оптимизированный GIF-файл для сравнения по качеству. Затем мы изменим настройки файла, чтобы уменьшить дополнительный размер. Если ваша анимация имеет простую цветовую палитру, уменьшите число в раскрывающемся меню «Цвета». В этом примере изображения имеют много тонов и теней, а уменьшение количества цветов приводит к неоптимальному качеству изображения, поэтому мы оставим его на 256.Дизеринг помогает улучшить качество сжатого файла путем смешивания соседних цветов вместе, но также может увеличить размер файла. Мы установим это значение на 20 процентов как компромисс между качеством и размером. Точно так же увеличение параметра Lossy означает, что данные файла будут отброшены (уменьшая размер файла), но это также снижает качество изображения. И здесь мы пойдем на компромисс в 20. Наконец, обновите размер изображения, чтобы он соответствовал вашему действительному предполагаемому размеру, чтобы случайно не создать что-то большее, чем должно быть.

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

В этом примере размер исходного файла составлял 84,2 МБ, а оптимизация в Photoshop позволила уменьшить его до 18,9 МБ - экономия 78 процентов!

Быстрая перемотка вперед до скорости

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

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

  • Кодек: Компьютеры просматривают отдельные изображения, составляющие видеофайл, и определяют, какие части изображения действительно движутся, а какие остаются неподвижными.Кодек - это программное обеспечение, которое позволяет этот анализ. High Profile H.264 - один из наиболее рекомендуемых кодеков для видео высокой четкости.
  • Интервал ключевого кадра: Интервал ключевого кадра определяет, как часто кодек устанавливает опорную точку (или «ключ»), чтобы определить, где происходит движение. Очень короткий интервал позволяет кодеку обнаруживать более тонкие движения, но также приводит к увеличению размера файла. Для оптимизации начните с сопоставления интервала ключевого кадра с частотой кадров видео, а затем увеличивайте ключевой кадр, пока не начнете замечать потерю качества.
  • Скорость передачи / скорость передачи данных: Эта скорость измеряется в килобитах в секунду и определяет, сколько данных занимает каждая секунда видео. Использование переменной скорости передачи данных (вместо постоянной скорости передачи данных) будет колебать количество используемых данных посекундно в зависимости от того, сколько движения происходит в файле.
  • Частота кадров: Частота кадров видео - это буквально количество кадров изображения, которые отображаются в секунду. Уменьшение этого числа фактически аналогично удалению кадра вручную, которое мы сделали для оптимизации GIF.Если вы загружаете свое видео в онлайн-плеер, знайте, что некоторые из них автоматически снижают частоту кадров. И Vimeo, и YouTube требуют частоты кадров менее 60 кадров в секунду (FPS), хотя частота кадров 24-30 FPS является обычной для большинства видео.

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

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

Все скриншоты сделаны Эшли Кемпер

Верхнее изображение Makc

.

Узнайте, как сжимать фотографии

Обновлено 21 ноября 2018 г.

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

Сжатие с потерями и без потерь

Чтобы понять, как сжимать фотографии, важно понимать разницу между сжатием «с потерями» и «без потерь». По сути, сжатие с потерями устраняет некоторые несущественные артефакты из исходного файла и сохраняет изображение как файл гораздо меньшего размера. Напротив, сжатие без потерь уменьшает размер файла без удаления каких-либо данных из исходного источника . Хотя сжатие без потерь предпочтительнее для фотографий с высокой детализацией, оно может не понадобиться для менее важных целей.

Для сжатия без потерь наиболее популярным форматом является кодирование длин серий, которое чаще всего используется для простых графических файлов, когда есть длинные потоки идентичных элементов данных. DEFLATE - еще один популярный формат, используемый для изображений PNG. Его также можно использовать в методах сжатия Gzip и ZIP. Для форматов GIF и TIFF Limpek-Ziv-Welch (LZW) использует алгоритм сжатия без потерь, который проводит ограниченный анализ данных.

Методы сжатия с потерями часто комбинируются с формулами без потерь для оптимизации общего сжатия файла.Наиболее распространенный метод уменьшает количество цветов до тех, которые чаще всего появляются в изображении . Этот метод наиболее эффективно используется в форматах GIF и PNG. Подвыборка цветности использует физиологию человеческого глаза, чтобы воспользоваться восприятием яркости, а не цвета. Этот формат чаще всего встречается в изображениях JPEG. Кодирование с преобразованием усредняет общий цвет изображения на небольшие блоки с помощью дискретного косинусного преобразования (DCT), которое создает изображение JPEG с меньшим количеством оттенков цвета, чем исходное.

Ознакомьтесь с нашей полной статьей для всестороннего сравнения сжатия с потерями и сжатия без потерь.

Типы и форматы изображений

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

  • JPEG - Joint Photographic Experts Group (JPEG) - наиболее распространенный формат сжатия изображений с потерями, используемый для быстрой передачи изображений. JPEG предлагает пользователям большой контроль над степенью сжатия, применяемого к изображению.Однако, если в JPEG используется слишком большое сжатие, изображение может отображать пикселизацию в определенных частях изображения. Узнайте больше о разнице между JPG и JPEG.
  • PNG - Portable Graphics Network (PNG) в настоящее время является самым популярным форматом сжатия без потерь, который был создан для замены GIF. Хотя PNG не поддерживает анимацию, как GIF, у него есть явное преимущество, заключающееся в том, что он поддерживает различные параметры прозрачности.
  • GIF - Формат обмена графикой (GIF) поддерживает 8 бит на пиксель, поэтому изображение может содержать до 256 различных цветов RGB.Формат GIF обычно используется для анимированных изображений, которые обычно не поддерживаются в большинстве других форматов.

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

Как сжать фотографию или изображение в Photoshop

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

  1. Выберите изображение, которое вы хотите сжать, и откройте его в программе для редактирования или сжатия фотографий (в этом примере мы будем использовать Photoshop).
  2. Щелкните меню файла и выберите «Сохранить для Интернета».
  3. Выберите формат изображения, в котором вы хотите сохранить. В этом случае мы выберем JPEG.
  4. Выберите желаемое качество сжатия изображения, чем выше уровень качества, тем больше размер изображения. Безопасное значение качества - «80» или очень высокое. Однако это можно изменить в зависимости от ваших требований.
  5. Нажмите «Сохранить», а затем выберите место назначения и имя для нового сжатого изображения.

Важно помнить, что сохранение изображения в формате JPEG может привести к заметной потере качества в зависимости от степени сжатия изображения.

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

  • Optimus - Если вы пользователь WordPress, использование плагина Optimus - удобный способ оптимизировать ваши изображения при загрузке. Кроме того, вы также можете конвертировать изображения в формат WebP, использовать API разработчика и многое другое.
  • Easy Image Resizer - Это бесплатное расширение Joomla позволяет легко изменять размер изображения, а также оптимизировать его.Удобное расширение для пользователей Joomla, которые не хотят оптимизировать свои изображения с помощью сторонней программы / сервиса.
  • Image_optim - основанный на приложении ImageOptim, разработанном для Mac OS, этот инструмент представляет собой набор инструментов командной строки, полезных для сжатия различных типов форматов изображений. Он использует множество программ, объединенных в одну, и довольно эффективен и прост в использовании.

Резюме

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

.

Оптимизация изображений для Интернета: пошаговое практическое руководство

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

Само собой разумеется, что ваши изображения должны быть четкими и с высоким разрешением. Но за это приходится платить. Большие изображения высокой четкости могут иметь файлы огромных размеров.Поместите несколько из них на свой сайт, и эта мгновенная навигация по вашему интернет-магазину может в конечном итоге стать более похожей на плавание через патоку. Это не только приведет к отказу посетителей, но со временем это заметит и Google, и это может повлиять на ваше SEO.

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

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

Готовы оптимизировать изображения?

Параметры типа файла изображения

Есть три основных типа файлов, на которых мы хотим сосредоточиться для сохранения изображений, оптимизированных для Интернета: GIF, JPG и PNG.У каждого типа файла есть свои сильные и слабые стороны, и очень важно знать и учитывать их при сохранении изображения.

Работа с JPG

JPG (также известный как JPEG) - самый популярный тип файлов для изображений в Интернете. JPG идеально подходят для фотографий или сложных изображений, содержащих много цветов, теней, градиентов или сложных узоров. JPG хорошо справляются с изображениями такого типа, потому что JPG имеют огромную цветовую палитру для работы.

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

Пример использования для предпринимателей в области электронной коммерции: JPEG являются наиболее популярным форматом файлов в Интернете и обычно используются для изображений продуктов, фотографий и баннеров / изображений главной страницы.

Работа с PNG

PNG - еще один популярный формат файлов в Интернете. В Adobe Photoshop у вас будет возможность сохранять PNG как PNG-8 или PNG-24.

  • PNG-8 имеет очень ограниченную цветовую палитру из 256 цветов.Хотя размер изображения меньше, это не лучший вариант для сложных изображений и фотографий.
  • PNG-24 обеспечивает гораздо более высокое качество изображения, но за счет большего размера файла.

Самое главное, PNG могут обрабатывать прозрачность. Это одно из самых больших различий между PNG и JPEG.

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

Работа с гифками
GIF-файлы

были более популярны много лет назад, но по-прежнему подходят для изображений небольшого размера, когда требуется всего несколько цветов. Как и PNG-8, файлы GIF могут содержать только 256 цветов. По этой причине нельзя использовать GIF-файлы для фотографий товаров.

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

Правильное сохранение изображений

Как и следовало ожидать, загрузка больших изображений занимает больше времени.Когда мы говорим «большой», мы имеем в виду размер файла, а не размеры изображения, т.е. значение в КБ, МБ, ГБ и т. Д. Видя, что 47% пользователей ожидают, что веб-страница загрузится менее чем за 2 секунды, а 40 % откажется от страницы, загрузка которой занимает более 3 секунд, важно, чтобы ваши изображения были достаточно маленькими, чтобы обеспечить быстрый сайт.

Чтобы правильно оптимизировать изображения для своего интернет-магазина, вы можете сделать три вещи:

Сохраните правильные размеры

Вы должны открыть изображение в Photoshop и просмотреть его на 100%.Это позволяет просматривать изображение в точном размере, который будет отображаться на мониторе компьютера при сохранении изображения для Интернета.

Сохранить изображения для Интернета

Можно уменьшить размер файла без значительного снижения качества изображений. Наш любимый метод уменьшения размера файла без значительного снижения качества изображения - это использование функции Photoshop «Сохранить для Интернета». Откройте изображение в Photoshop и выберите «Файл»> «Экспорт»> «Сохранить для Интернета (устаревшая версия)…».Появится окно, в котором вы сможете выбрать качество экспорта. Мы обнаружили, что качество 60 работает лучше всего, поскольку при этом размер файла уменьшается до менее мегабайта, и нет заметной разницы в качестве.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий