Домашняя страница
- 28 марта 2018 г. Сегодня мы поговорим о близкой моему сердцу теме — сжатии изображений! Я полушучу, но есть что-то странно приятное в том, чтобы сократить огромный процент размера файла изображения без ухудшения качества.
Вдохновением для создания этого поста послужил очень популярный пост в группе Beaver Builders в Facebook. Я только что снял видеоурок о включении и использовании нового алгоритма Guetzli от Google в ImageOptim и был шокирован всеми остальными опциями, с которыми я ранее не был знаком. В этой статье мы поговорим о некоторых советах и инструментах для сжатия изображений для Интернета.
Прежде чем мы углубимся, давайте установим некоторую общую терминологию.
JPEG, PNG, SVG — это три самых популярных типа файлов изображений в Интернете. В этом уроке мы в основном сосредоточимся на форматах JPEG и PNG, поскольку они больше всего выигрывают от сжатия и оптимизации.
JPEG обычно лучше подходит для изображений высокой четкости, таких как фотографии и веб-графика, которые не имеют прозрачности.
PNG отлично подходят для таких вещей, как значки и логотипы, а также для всего, что требует прозрачности. PNG также можно значительно оптимизировать после того, как они появятся в Photoshop или выбранном вами инструменте графического редактирования.
Без потерь и с потерями — это методы сжатия. Сжатие без потерь означает, что ваше изображение не потеряет качества. Буквально вообще никакого. Это включает в себя удаление метаданных из изображения или всего, что не влияет на качество.
Lossy означает, что алгоритм сжатия снизит качество вашего изображения. Вы получите лучшие результаты сжатия, но пожертвуете качеством изображения. Большинство инструментов сжатия с потерями имеют процентный ползунок, позволяющий выбрать соотношение качества и размера файла.
Совет: для больших фоновых изображений я часто немного размываю изображение или добавляю непрозрачный цветной слой поверх фотографии. Уменьшение детализации и/или нормализация цвета — хороший эстетический выбор, который значительно уменьшает размер файла. Вы можете увидеть это в действии на нашей странице вакансий.
Целью сжатия изображений является максимальное уменьшение размера файла без ущерба для качества. Это скорее искусство, чем наука, и уровень «приемлемого качества» будет варьироваться в зависимости от ситуации.
Фотостудия, скорее всего, захочет подчеркнуть свою работу в самом высоком качестве, тогда как веб-сайт недвижимости может пожертвовать качеством в обмен на отображение большего количества изображений на странице.
Большинство программ для редактирования изображений позволяют экспортировать изображения различного качества. Хотя, если вы используете специальный инструмент сжатия изображений, иногда лучше предоставить этому программному обеспечению максимально возможное качество и позволить его алгоритмам сжатия работать оттуда.
Как я недавно обнаружил, недостатка в инструментах и сервисах для сжатия изображений нет.
Я начал с ImageOptim и до сих пор предпочитаю его. ImageOptim доступен только в OSX, но поддерживает сжатие с потерями и без потерь для файлов JPEG и PNG. Его также можно настроить на использование относительно нового алгоритма сжатия Google Guetzli. Guetzli в среднем может уменьшить размер файлов на 20-30% больше, чем другие алгоритмы.
ImageOptim — это программа, которая находится в Dock вашего Mac, и вы можете просто перетаскивать изображения на значок программы, и она сжимает их. Я склонен оптимизировать одно или два изображения одновременно, поэтому это решение мне отлично подходит. Но если вы работаете с большим количеством изображений или изображений с файлами большого размера, некоторые другие варианты могут оказаться лучшим выбором для больших задач.
Smush — это бесплатный плагин WordPress от WPMU Dev, который можно настроить для оптимизации существующих изображений в вашей установке WordPress и/или при их загрузке в WordPress. Smush великолепен, потому что тяжелую работу выполняют серверы WPMU Dev, которые одновременно оптимизируют и изменяют размер изображений.
Если вы создаете веб-сайты для клиентов, особенно для тех, кто любит загружать многомегабайтные изображения прямо со своей цифровой камеры, Smush — отличный вариант, который можно установить и забыть.
TinyPNG — это веб-компрессор изображений. Вы можете загрузить свои изображения (до 5 мб) и скачать сжатую версию. Это потребует использования полосы пропускания, поэтому это может быть не лучший вариант, если у вас медленное или платное подключение к Интернету. Он поддерживает типы файлов JPEG и PNG. Это бесплатно. Похоже, он не обеспечивает никакого контроля над уровнем качества сжатия.
Поигравшись с TinyPNG, я думаю, что все еще предпочитаю ImageOptim, но это будет отличный вариант для пользователей Windows, быстрых разовых заданий или пользователей, которые специально ищут веб-компрессор. Или, если вы пытаетесь перенести обработку в облако, а не на локальный компьютер.
Imagify — это еще один веб-вариант SASS, который предоставляет специальный плагин WordPress для оптимизации и изменения размера изображений при их загрузке или непосредственно из области администрирования WordPress. Плагин Imagify WordPress может похвастаться впечатляющей средней оценкой в 4,5 звезды, и во многих обзорах отмечается, что качество изображений, достигнутое с помощью Imagify, лучше, чем у альтернатив.
У Imagify есть бесплатный план, который позволяет загружать и оптимизировать изображения размером менее 2 МБ. Оптимизированная версия изображений будет доступна для загрузки с их серверов в течение 24 часов.
JPEGMini — это сервис SASS, который должен понравиться людям, ищущим «рабочее решение». Представьте, что вам поручено оптимизировать десятки тысяч изображений продуктов в высоком разрешении для магазина электронной коммерции. JPEGMini позволит вам перенести всю эту обработку на их, предположительно, быстрые и оптимизированные облачные серверы.
ShortPixel — еще один веб-SASS. Если вы хотите перенести сжатие изображений на облачный сервер, это отличный вариант. Их бесплатный план позволяет оптимизировать до 100 изображений в месяц, а также есть премиум-планы стоимостью от 5 долларов в месяц и больше. У ShortPixel также есть плагин WordPress, и он является фаворитом среди остальной команды BB.
воображать
Если вы посетите исходную ветку Facebook, которая вдохновила вас на этот пост, вы увидите несколько других вариантов и людей, которые предпочитают тот или иной по разным причинам. Нам не хватает вашего любимца? Дайте нам знать, что это такое и почему вам это нравится в комментариях.
Кроме того, если вы из тех, кто ест, спит и дышит производительностью, это интервью с Джоном Брауном о современных передовых практиках производительности, вероятно, вам понравится.
30 апреля 2018 г., 11:35Хаха. Да, большинство компаний, у которых есть талисман-животное, довольно солидны.
28 марта 2018 г. в 16:30У Tinypng также есть плагин для Wordpress https://wordpress.org/plugins/tiny-compress-images/, и их API удобен для работы, если вам нужно что-то настроить на стороне сервера.
28 марта 2018 г. в 20:45Великолепно. Я только начал использовать ShortPixel. хорошо спроектирован, удобен для плагинов (включить замену носителя) и экономически эффективен.
Очень хотелось бы увидеть статью об интеграции S3 Offload с Beaver. Кэширование bb-плагина особенно усложняет эту задачу.
29 марта 2018 г. в 9:02Я использую EWWW. Для сайтов с множеством изображений лицензируйте безлимит с CDN. Для 10 одновременно используйте https://ewww.io/online-image-optimizer/
29 марта 2018 г. в 10:51Я протестировал все плагины сжатия/оптимизации изображений WordPress для своих более чем 20 сайтов WordPress, некоторые из которых содержат пользовательский контент (например, огромные изображения), и для меня лучшим вариантом на сегодняшний день является ShortPixel. Я обнаружил, что их сжатие имеет лучшее в своем классе соотношение качества и размера, а их модель ценообразования является справедливой. Плюс — я не ограничен размером файла, и они полностью оптимизируются, даже если вы используете бесплатный план.
31 марта 2018 г. в 23:05Я все это время использую TinyPNG, они, кажется, раздувают изображение после загрузки, а затем сжимают его (я могу ошибаться, но после загрузки я вижу, что размер изображения больше, чем фактический размер). Никогда не знал об ImageOptim, выглядит очень удобным инструмент.
4 апреля 2018 г. в 5:58 Хороший обзор. Перед загрузкой я использую webresizer.com как альтернативу TinyPNG. Они дают вам хороший контроль над конечным продуктом. У них есть функция массового изменения размера/сжатия, но ее лучше всего использовать с несколькими изображениями, которые должны быть одинакового размера.
Я обнаружил, что на нашем сайте Imagify работает хорошо.
10 апреля 2018 г. в 10:17Эти услуги великолепны, спасибо за составление этого списка.
Хочу отметить, что если вы уже использовали Photoshop, вы также можете сделать это через Photoshop. Вместо «Сохранить как…» перейдите по ссылке:
Файл -> Экспорт -> Сохранить для Интернета (устаревшая версия)
Затем в предустановке измените сжатие на JPEG High, JPEG Medium или JPEG Low. Затем нажмите «Сохранить». Это дает тот же результат, что и вышеуказанные услуги.
10 апреля 2018 г., 15:11Удивительно, но многие из этих инструментов и сервисов уменьшают размер файлов лучше, чем Photoshop.
2 мая 2018 г., 3:07Я делаю то же самое с Photoshop, но считаю, что ImageOptim и Smush еще больше уменьшат размер файла без заметной потери качества.
11 апреля 2018 г. в 7:56 утраЯ думаю, что людям следует более серьезно относиться к инструментам оптимизации контента, таким как IMGIX и Cloudinary.
15 апреля 2018 в 8:56Лучше используй компрессман! Он не использует Интернет и работает только на веб-сайте.
19 апреля 2018 г. в 6:52 утраМы обычно используем Smush и Short Pixel для наших клиентов. Короткий пиксель обеспечивает лучшее сжатие, но Smush тоже хорош, установите и забудьте об этом.
23 апреля 2018 г., 7:25Я большой поклонник использования ImageOptim на OSX! Я использую его для каждого изображения, которое отправляю в Интернет, независимо от того, на какой платформе оно будет отображаться!
26 апреля 2018 г., 19:10Что касается изменений настроек в ImageOptim, оставляете ли вы уровень оптимизации по умолчанию «Дополнительный»?
30 апреля 2018 г., 11:34В большинстве случаев да.
26 апреля 2018 г. в 21:56Я удивлен, что никто не упомянул Kraken.io (https://kraken.io/). Его можно использовать через веб-интерфейс или как плагин WordPress.
3 мая 2018 г., 10:07Я использую Chromebook, и это выглядит хорошей альтернативой. Я использую http://guetzliconverter.linuxadm.hu/
29 апреля 2018 года в 6:06 утраЛучшая библиотека для PNG, которую я нашел, — это PNGQuant, но мне не удалось заставить ее работать локально. Итак, теперь я запускаю все свои изображения через http://compresspng.com/, который использует PNGQuant. Огромное улучшение по сравнению с ImageOptim.
2 мая 2018 г., 3:05Я использовал ImageOptim и бесплатную версию Smush. Особенно мне нравится Смуш. Есть ли какие-либо другие преимущества при обновлении до платной версии, кроме возможности оптимизировать больше изображений одновременно?
3 мая 2018 г., 10:04На мой взгляд, это оптимизирует гораздо лучше, чем Smush.
26 октября 2018 в 2:07Спасибо за список.. сейчас использую Smush от WPMU Dev, и он работает отлично..
21 ноября 2018 г., 20:01Я знаю, что я, вероятно, уже устарел, но с помощью Fireworks я получаю отличный контроль над сжатием изображений. По моему скромному мнению, лучшая растровая/векторная программа.
22 ноября 2018 г. в 13:09Фейерверк был или остается отличной программой. Я не использовал его уже много лет, однако, возможно, пришло время открыть его снова и увидеть, как сильно я по нему скучаю.
18 декабря 2018 г., 22:46Спасибо за эту хорошую статью! Я использую плагин Image Optimizer для своего сайта.
Наш информационный бюллетень пишется лично и рассылается примерно раз в месяц. Это ни в малейшей степени не раздражает и не является спамом.
Мы обещаем.
Наш голос за Tinypng. Нам нравится их плагин, который может оптимизироваться при загрузке на ваш сайт. Нам тоже нравится Panda! Мы также рассмотрим ImageOptim, поскольку используем Mac. Отличный список, ребята.