Оптимизация картинок для сайта онлайн: 5 онлайн-сервисов для качественной оптимизации изображений
Содержание
5 онлайн-сервисов для качественной оптимизации изображений
Размер изображений на сайте напрямую влияет на скорость загрузки страницы. Прежде чем загружать картинки на сайт, необходимо их предварительно оптимизировать. При каждой загрузке медиафайлов на сайт, подумайте об их весе.
Типичная для многочисленных Интернет-ресурсов проблема: пользователь в первый раз со своего браузера переходит на определенный сайт, и в процессе загрузки страницы наблюдает за плавным “развертыванием” изображений. Для того, чтобы все картинки отображались мгновенно со всеми основными веб-элементами, необходимо корректно сжать их размер и вес.
Самая распространенная проблема при сжатии изображений – качество также уменьшается. Таким образом – администратор сайта при добавлении графической информации, может соблюдать все первоочередные правила – однако результатом быстрой скорости загрузки страниц станет некачественный медиа-контент.
Хорошая новость для начинающих редакторов и контент-менеджеров: В сети уже не первый год пользуются спросом онлайн-сервисы позволяющие быстро и без потери качества оптимизировать изображения для их дальнейшей загрузки на сайт, a мы в свою очередь выделим самые лучшие:
1. Optimizilla
Эффективный оптимизатор изображений, позволяющий сжать изображения JPEG и PNG до минимального возможного размера.
Сервис позволяет загрузить до 20 изображений за каждую обработку. Также по окончании оптимизации, пользователь сможет увидеть на сколько процентов картинка ужалась. Онлайн-сервис также предусматривает возможность настроить уровень сжатия и в дальнейшем загрузить готовое изображение себе на компьютер в виде архива.
2. TinyJpg
Лучший автоматический оптимизатор JPEG файлов сжимает изображения на 40-60%.
Онлайн-сервис позволяет оптимально сжать файл в формате (.jpeg). Конечный результат обработки сравнивается с оригинальной версией и в дальнейшем может настраиваться.
3. ImageOptimizer
Изменяет размер, сжимает и оптимизирует изображения.
Используя этот бесплатный онлайн-сервис, пользователь сможет за одну обработку изменить размер, сжать и оптимизировать файлы изображений.
4. ImageOptim
Сжимает изображения и ускоряет их загрузку без потери качества.
Сервис удаляет метаданные с изображений, экономит дисковое пространство и пропускную способность путем сжатия изображений без потери качества.
5. Compressor
Уменьшает размер фотографий и изображений сохраняя качество.
Мощный онлайн-инструмент для резкого уменьшения размера изображений и фотографий, сохраняя при этом высокое качество.
Онлайн-сервисы для оптимизации изображений — 1C-UMI
Наверняка вы периодически сталкиваетесь с сайтами, которые загружаются так долго, что не хватает терпения дождаться окончания загрузки. Многие покупатели покидают интернет-магазин уже на 3-й секунде, подумав, что сайт попросту не работает. А это реальные потери пользователей, которые могли что-то купить.
Скорость загрузки страниц влияет и на продвижение в поисковиках ― быстрые сайты получают приоритет в поисковой выдаче.
Из-за чего загрузка веб-страницы может тормозить? Чаще всего из-за несжатых изображений ― чем больше весит картинка, тем больше времени уходит на ее полное скачивание. Как решить эту проблему? Оптимизировать изображения при помощи специальных сервисов.
Сжимает изображения без потери качества. Принимаются файлы в форматах PNG и JPEG.
Загрузите в сервис одно или несколько фото, сжатие стартует автоматически. По окончании появятся две миниатюры — «До» и «После» оптимизации, для сравнения и регулировки соотношения качество-вес. Степень сжатия отображается в процентах. Всего сюда можно загрузить до 20 файлов за один раз. Результирующие файлы скачиваются в виде архива.
Оптимизирует графические файлы в форматах GIF, PNG, SVG и JPEG. Есть 2 типа сжатия: с потерей качества и без. Если выбирать без потерь, то значительного уменьшения веса файла можно не ждать. Поэтому советуем выбирать вариант lossy. Потери качества минимальны и на глаз почти не различимы, а вот оптимизация очевидна. К примеру, этот файл был сжат данным инструментом на 50%.
Для загрузки изображения в сервис кликните по кнопке «SELECT FILE», выберите нужный файл и откройте его. После автоматического сжатия можно сравнить оптимизированную версию с исходной, передвигая вертикальную полоску мышкой влево-вправо. Для сохранения на компьютер нажмите на кнопку «DOWNLOAD YOUR FILE». Результат также можно сохранить в облаке Google/Dropbox. Сервис принимает файлы весом не более 10 Мегабайт.
Позволяет сжимать изображения в JPG и PNG форматах. Каждое из них может весить до 5 Мб. За один раз в сервис можно загрузить не более 20 файлов.
Процесс сжатия длится немного дольше, чем в предыдущих сервисах. Но результат радует и своей эффективностью, и красивой подачей, когда панда на рисунке использует хлопушку и повсюду летят конфетти.
К сожалению, превью результата здесь не отображается. Показывается только уровень сжатия. Оптимизированное изображение можно скачать на компьютер или сохранить в Dropbox.
Позволяет не только оптимизировать фотографии, но и устанавливать для них нужное разрешение, добавлять резкость, поворачивать, менять контрастность, оттенок, границы изображения, обрезать его и многое другое. Загрузка файла в сервис выполняется стандартным способом + нужно нажать на кнопку «upload image». Чтобы сохранить оптимизированное изображение, нужно кликнуть ссылку «download this image» под результатом сжатия.
Сжатие также выполняется на очень хорошем уровне. К примеру, наш файл был сжат на 95% и вместо 1,2 Мб стал весить всего 53 Кб.
Простой сервис для компрессии графических файлов в формате PNG/JPEG. Одно загружаемое изображение должно весить не более 10 Мегабайт. Загружать можно до 20 файлов за раз.
Добавьте картинки с помощью соответствующей кнопки или просто перетащите файлы в блок на сайте. Для смены качества оптимизированного изображения нажмите на него и отрегулируйте настройки.
Англоязычный инструмент для оптимизации изображений. Чтобы сжать файл, выберите его на компьютере, укажите качество и разрешение. Выбирайте минимально возможное разрешение, которое нормально смотрится на вашем сайте. Затем кликните на кнопку «Optimize Now!». Результат появится через несколько секунд. Сохраните его, нажав на кнопку «Download to your computer».
Этот сервис поддерживает только формат JPEG. Чтобы загрузить изображение, выберите файл. Затем обозначьте в процентах уровень компрессии и ширину картинки в пикселях. По умолчанию это 65% и 400 пикселей. После открытия файла кликните кнопку «Optimize Photo».
Результат сжатия отобразится на этой же странице. Никаких кнопок для скачивания нет, поэтому нужно кликнуть правой кнопкой мышки по изображению и сохранить его при помощи встроенного в браузер инструментария.
Внизу красной надписью показывается процент компрессии. Как видите, здесь он составил 98,1%, а размер файла теперь составляет 25,6 Кб вместо 1,3 Мб.
Русскоязычный сервис. Способен обрабатывать JPEG-файлы с регулированием многих параметров сжатия. Например, уменьшать размер в пикселях, копировать метаданные, регулировать качество изображения. По умолчанию стоит качество 80%. Можно его таким и оставить.
Чтобы обработать файл, выберите его при помощи соответствующей кнопки, затем укажите параметры компрессии и нажмите «ОК».
Результат появится через доли секунды. Никакого превью здесь нет, однако оптимизированное изображение можно не только скачать на ПК, но и открыть в новом окне браузера.
Как видим на скриншоте, файл был сжат почти на 60%, а произошло это всего лишь за 0,23 секунды.
Если ваш сайт медленно загружается, обязательно оптимизируйте все имеющиеся на нем графические файлы. Это позволит избежать потери клиентов и повысить лояльность целевой аудитории к вашему интернет-магазину, а также поднимет ваш сайт в поисковиках.
Сервисы для оптимизации изображений для сайта
Изображения — те ресурсы, которые часто занимают много места на странице и весят больше всего. Благодаря их оптимизации мы можем значительно уменьшить количество скачиваемых данных и улучшить работу сайта. Чем больше сжато изображение, тем быстрее будут загружаться страницы сайта.
Оптимизация изображений для сайта – один из базовых принципов seo-оптимизации в целом. Чтобы ваш сайт, каталог товаров или интернет магазин занимал более высокие позиции в поисковой выдаче, вам нужно научиться редактировать картинки и фотографии перед загрузкой на сайт. Оптимизация изображений — это одновременно наука и искусство. Мы можем назвать это искусством, потому что никто не может дать определенный ответ, как лучше всего сжать конкретное изображение. Однако это и наука, ведь в нашем распоряжении есть разработанные техники и алгоритмы, которые могут значительно уменьшить размер ресурса.
Почему так важно оптимизировать изображения?
Загрузка страницы сайта зависит от ее размера, который, в свою очередь, формируется из файлов с кодом, картинок, видео и других файлов, необходимых для функционирования сайта. Чем дольше грузится страница – тем выше вероятность того, что вы потеряете посетителя, который не готов тратить свое время на ожидание. Также скорость загрузки страницы влияет на ранжирование, а значит, этому моменту нужно уделить особое внимание. Картинки – первое, что можно сжать в объеме, не потеряв в качестве
Заставьте изображения загружаться быстрее и сохраните пропускную способность. Улучшенное сжатие позволяет вам использовать красивые изображения, не перегружая ваш сайт.
JPEG — самый популярный формат для фотографий на ваших сайтах и в приложениях. Многие файлы JPEG не используют оптимальное сжатие, тратя впустую ценные байты. Равновесие между качеством и небольшим размером файла раньше было трудоемкой задачей, которую могли выполнять только люди. Уже нет.
Мы подобрали для вас самые популярные онлайн сервисы, которые позволяют сжимать изображения в форматах JPEG, PNG, GIF без потери качества.
1. Бесплатный онлайн сервис Optimizilla
Ссылка на сервис: optimizilla.com
Эффективный сервис позволяет быстро изменить размер ваших фотографий без потери качества. Одновременно вы можете загружать до 20 фотографий. Простой и удобный интерфейс не вызовет у вас затруднений.
Но есть некоторые ограничения: исходный размер загружаемого изображения не должен превышать 15 мегабайт или его разрешение – более 6 000 пикселей. Минимальный набор возможных , но для выполнения поставленной перед нами задачи (оптимизировать картинку) вполне хватит. Из минусов — нет возможности уменьшить разрешение изображения и кадрировать изображение.
2. Бесплатный оптимизатор изображений Tinyjpg
Адрес сервиса: tinyjpg.com
Данный сервис по функциональным возможностям практически не отличается от предыдущего: позволяет уменьшить размер без потери качества, работает с PNGи JPG форматами. Разница лишь в том, что tinypng.com ориентирован на изменение формата PNG путем превращения из 24-битного изображения в 8-битное за счет уменьшения количества цветов. Поисковая система заметит разницу, а человеческий глаз – нет.
Вы можете выполнить операцию несколько раз, чтобы уменьшить изображение до минимума. Но в этом случае изображение нельзя будет открывать в фоторедакторах, так как из-за нехватки цветов оно будет отображаться неправильно.
3. Бесплатный онлайн оптимизатор Compressor
Ссылка на сервис: Compressor.io
Compressor — это мощный онлайн-инструмент для значительного уменьшения размера ваших изображений и фотографий при сохранении высокого качества практически без разницы до и после сжатия. Поддерживается 4 формата файла: JPEG, PNG, GIF, SVG. Минимальный размер файла для загрузки: F10 MB
Используется вида сжатия. Поможет сэкономить вам сотни Кб. Из недостатков — не предусмотрена пакетная обработка изображений и нет возможности изменять разрешение изображения
4. Бесплатный оптимизатор изображений Imageoptimizer
Ссылка на сервис: imageoptimizer.net
Простой и удобный онлайн сервис. В этом сервисе, в отличии от предыдущих есть очень важное преимущество — здесь вы можете изменять разрешение изображения. Из минусов — вы сможете загружать и оптимизировать только по одному фото.
5. Онлайн сервис ImageOptim
Ссылка на сервис: imageoptim.com
Если вам требуется регулярная пакетная обработка изображений, рекомендуем сервис ImageOptim. Он отлично подходит для публикации изображений в Интернете (легко сжимает изображения «Сохранено для Интернета» в Photoshop). ImageOptim API удаляет личные метаданные и преобразует изображения в форматы и размеры, оптимизированные для Интернета. Вы получите быстро загружаемые изображения, которые соответствуют вашим требованиям, не обременяя пользователей техническими возможностями или ограничениями размера файлов.
Это платный сервис. Минимальный платеж $12 в месяц, в рамках этого пакета вы сможете обрабатывать до 2000 изображений в месяц. Так же есть бесплатная пробная версия, которая доступна после регистрации на сайте
Важен не только размер, но и название
Помимо размера изображения, важно уделить внимание названию самого изображения (имя файла). Название файла должно соответствовать содержанию самого изображения. Например, если на изображении ночная дорога, в названии файла так и пишем «doroga-nochnaya.jpg». Нужно это для того, чтобы поисковые системы смогли проиндексировать картинку, и на ваш сайт переходили посетители из раздела «поиск по картинкам». Длина названия не должна превышать 30 символов, в названии желательно использовать только латинские буквы, цифры, вместо пробелов лучше использовать знаки «дефис» и «нижнее подчеркивание».
Оптимизация изображений для сайта
Интернет-эксперты говорят, что картинки на сайте увеличивают вовлечение посетителей. Так и есть, но если вы будете использовать не-оптимизированные изображения, они будут замедлять сайт.
Даже если у вас хороший контент, из-за медленной загрузки сайта / не-оптимизированных изображений будет страдать ваш SEO, поэтому сайт получит более низкую позицию в поисковой выдаче.
Большой размер изображений в Пикселях и/или Килобайтах — одна из основных причин медленной загрузки страниц.
Согласно исследованию Strangeloop, 1 секунда задержки в загрузке страницы вызывает:
- 7% падение продаж,
- 11% меньше просмотров страниц,
- Посетители сайта удовлетворены на 16% меньше.
Перед публикацией на сайте картинки нужно оптимизировать, то есть уменьшить их до нужного размера в Пикселях и до приемлемого соотношения размер / качество в Килобайтах.
В этой статье вы узнаете, как оптимизировать изображения для публикации на сайте вручную, с помощью плагинов или с помощью онлайн сервисов в интернете.
Содержание:
Как оптимизировать изображения для сайта
Инструменты для оптимизации изображений
Программы для оптимизации изображений
Плагины оптимизации изображений Вордпресс
Оптимизация изображений онлайн
SEO оптимизация изображений
Как оптимизировать изображения для сайта
Перед публикацией картинки на сайте решите три вещи:
- Физический размер изображения (длина и ширина),
- Формат изображения (jpeg, png, webp или другие форматы),
- Размер изображения (в Килобайтах).
С хорошо подобранными параметрами вы можете уменьшить размер картинки в 5-10 раз по сравнению с первоначальным.
Оптимизируйте длину и ширину изображения
Если вам нужно поместить изображение, которое займет 1/3 экрана, используйте картинку нужного размера, например, 400х300 Пикс.
Не публикуйте картинки бóльшего размера, чем это требуется.
Для каждой загруженной картинки Вордпресс по умолчанию создает несколько картинок меньшего размера и использует их, например, для мобильных устройств.
В зависимости от ваших настроек адаптивности, вместо оригинального размера может использоваться меньший размер.
Выберите подходящий формат изображения
Существует несколько форматов изображений, которые используются для публикации изображений в интернете. Самые популярные — JPEG и PNG.
JPEG — формат, который использует сжатие с потерями (lossy) и не поддерживает прозрачность. В зависимости от степени сжатия, эти картинки можно оптимизировать без потери качества изображения.
PNG — сжатие без потерь (lossless) и поддерживает прозрачность.
Используйте JPEG для фотографий или сложных изображений с большим количеством цветов, градиентом и так далее.
Используйте PNG для простых картинок с текстом, несколькими цветами без градиентов, или если вам нужна прозрачность.
Оптимизируйте размер изображения в Килобайтах
Чем меньше размер изображения в Килобайтах, тем ниже качество картинки.
Для важных изображений используйте более высокое качество, для второстепенных изображений или если вы используете прозрачный слой / оверлей, используйте более низкое качество.
Для картинки размером 400х300 пикселей современные требования Гугл и других сервисов что-то около 20-50 Килобайт.
Инструменты для оптимизации изображений
После того, как вы определились с размером и форматом, выберите способ, которым вы хотите оптимизировать изображения.
- Вы можете сделать это на компьютере с помощью разных программ и загрузить на сайт
- Оптимизировать изображения на сайте с помощью плагина
- Оптимизировать в интернете с помощью специальных сервисов
Многие онлайн сервисы оптимизации поддерживают массовую оптимизацию изображений. На бесплатных тарифах обычно существует ограничение на количество изображений или на объем.
Программы для оптимизации изображений
Фотошоп, Иллюстратор и некоторые другие программы Adobe имеют инструмент оптимизации изображений.
Откройте файл и перейдите File — Export — Save for Web.
Если вы хотите сохранить изображение в формате png, выберите PNG-8, выберите количество цветов изображения и метаданные, которые вы хотите оставить в конечном файле:
Изображение s. salvador с сайта Freepik
Фотошоп — Сохранить для веб — png
Если вы будете сохранять в png, то под выбором формата есть настройки модели. Я использую эти настройки, вы можете попробовать другие:
- No Dither
- Diffusion
- Pattern
No Dither хорошо справляется с разными цветами, но плохо с градиентом. Pattern хорошо с градиентом, но хуже с цветами, на некоторых цветах появляются артефакты.
Подберите свою комбинацию для каждого типа изображений.
Если вы хотите сохранить изображение в формате jpg, то выберите JPEG, выберите качество изображения или готовую настройку и метаданные, которые вы хотите оставить в итоговом файле:
Бесплатные альтернативы Фотошопу — программы GIMP и Paint.net.
ImageOptim
ImageOptim — программа для Mac, которая позволяет сжимать картинки без потери качества. Программа автоматически находит нужные параметры компрессии и удаляет ненужную информацию.
Альтернатива для Windows — Trimage.
JPEG Mini
Jpegmini.com использует технологию компрессии, которая уменьшает размер изображений до 80%, при этом сохраняя оригинальное разрешение и качество картинки.
Вы можете установить триал версию программы на компьютер, или купить плагины для Фотошопа и Лайтрума. После триального периода нужно купить платную версию.
Программа стоит 59$, программа и плагины для Фотошопа и Лайтрума стоят 89$.
Также есть платное подключение по API для разработчиков.
Плагины оптимизации изображений Вордпресс
Для оптимизации картинок на сайте существует несколько популярных плагинов. У всех плагинов из этого раздела есть бесплатная версия, которую можно скачать в официальном репозитарии Вордпресс.
Обычно в бесплатной версии существует ограничение на количество изображений, которые можно оптимизировать в течение месяца, или на объем изображений в течение месяца.
Все плагины подключаются по API, поэтому изображения оптимизируются на серверах плагинов и не нагружают ваш сервер.
Smush Image Compression and Optimization
Плагин создан разработчиком WPMU DEV, регулярно обновляется и имеет более миллиона установок. Оптимизирует jpeg, png и gif форматы. Изображения до 5 Мб оптимизируются бесплатно в любом количестве.
Оптимизирует до 50 изображений за один раз. Автоматически находит изображения, которые замедляют сайт. Плагин может откладывать загрузку изображений до того, как они не появятся в видимой части экрана (lazy load).
В настройках плагина вы можете указать максимальный размер изображения. Если на сайте найдутся изображения большего размера, они будут уменьшены до максимального. У плагина есть интеграция с блоками изображения Гутенберг, в которых показывается статистика оптимизации.
EWWW Image Optimizer
Другой популярный плагин, регулярно обновляется, имеет более 800.000 установок. Плагин бесплатно оптимизирует изображения на вашем сервере или платно на своем сервере.
Работает с форматами jpg, png и pdf. После оптимизации выбирает наиболее подходящий формат для показа на сайте, — jpg, png или gif.
Плагин может автоматически конвертировать jpg и png изображения в формат webp.
ShortPixel
Относительно новый плагин, ставший популярным. Оптимизирует форматы jpeg, png, gif и pdf на своем облаке.
В бесплатной версии позволяет оптимизировать до 100 изображений в месяц. Если нужно оптимизировать больше изображений, нужно купить одну из платных версий. Можно купить подписку на месяц или сделать единоразовую оплату за 10.000, 30.000, 50.000 или 170.000 изображений.
По этой ссылке вы получите еще 100 бесплатных оптимизаций в месяц каждый месяц.
В настройках плагина вы можете указать дополнительные папки, кроме Медиа библиотеки, в которых вы хотите оптимизировать изображения.
TinyPng
Простой и понятный плагин, регулярно обновляется, имеет более 200.000 установок. Подключается по API к серверу TinyPNG, на котором оптимизируются изображения.
В бесплатной версии предлагает 100 оптимизаций в месяц, если вам нужно оптимизировать больше изображений, придется купить одну из платных версий.
Плагин добавляет кнопку оптимизации в медиа библиотеку, с ее помощью вы можете сжать изображения в библиотеке.
Оптимизация изображений онлайн
В интернете есть много сервисов для оптимизации изображений. В этом разделе описание нескольких популярных онлайн сервисов.
TinyPNG
TinyPng — бесплатный web сервис оптимизации изображений, который использует lossy компрессию для уменьшения PNG и JPEG файлов. В бесплатной версии есть ограничение 20 изображений. Каждое изображение не должно превышать 5 Мб.
Перейдите на сайт TinyPNG и загрузите ваши изображения. Сервис оптимизирует картинки и даст вам ссылку на скачивание.
Для разработчиков есть подключение по API для автоматической оптимизации изображений.
Optimizilla
Optimizilla — онлайн сервис оптимизации изображений для сайта. Использует комбинацию алгоритмов оптимизации и lossy сжатия изображений. Уменьшает размер JPEG и PNG форматов до минимально возможного, сохраняя нужный уровень качества изображения.
Можно загрузить до 20 картинок. В сервисе есть настройка для выбора качества изображения после компрессии, и слайдер для сравнения изображений До и После.
Bulkresizephotos
Bulkresizephotos полностью бесплатный сервис массовой оптимизации изображений. Драг-энд-дроп интерфейс, который оптимизирует картинки прямо у вас на компьютере без необходимости закачивать их на сервер Bulkresizephotos.
Сервис уменьшает размер и/или объем изображений, и может конвертировать форматы изображений в JPEG, PNG или WEBP.
SEO оптимизация изображений
После того, как вы оптимизировали размер и объем изображения и выбрали подходящий формат, назовите готовый файл так, чтобы было понятно, что изображено на картинке. Не называйте файл Untitled.jpeg, Без-названия. png или 01.webp.
Закачайте картинку на сайт и добавьте атрибуты Alt и Description. Эти теги говорят поисковым системам что изображено на картинках. Заполните как минимум поле Alt.
Добавьте атрибут Alt и Описание
Описания к картинкам индексируются поисковыми системами и вы можете получить больше переходов на свой сайт из раздела Картинки поисковых систем.
Трафик из раздела Картинки поисковых систем
Также эти теги помогают пользователям с нарушениями зрения, так как их программы чтения с экрана могут читать им теги Alt и Title.
Заключение
Оптимизировать изображения для публикации на сайте можно разными способами.
Фотошоп — самый гибкий инструмент для уменьшения размера изображений, с помощью настроек вы можете выбрать приемлемый уровень оптимизации и итоговый размер изображения, но придется каждую картинку оптимизировать вручную.
Если вы начинаете новый сайт, то оно того стоит.
После оптимизации в Фотошопе картинки имеют маленький размер, так что до-оптимизацию на сайте с помощью плагина можно не делать.
Хороший результат у плагинов TinyPNG и ShortPixel. EWWW Image Optimizer хороший плагин, но его сложнее настроить.
Оптимизированные картинки значительно ускоряют скорость сайта. Качество изображений немного уменьшится, но большинство посетителей этого не заметит.
Еще одна вещь, которую вы можете сделать для ускорения загрузки страниц — подключить сайт к сети CDN. После подключения страницы сайта будут доставляться посетителю из ближайшего сервера.
Читайте также:
- Где брать бесплатные картинки в хорошем качестве для публикации на сайте без нарушения авторских прав
- SEO для Вордпресс. Подробная инструкция
- 12 советов для SEO оптимизации Блога
Надеюсь, статья была полезна. Оставляйте комментарии.
Оптимизация изображений для сайта, как уменьшить размер фото без потери качества ✔ PROject SEO
Нередко встречаются такие ситуации, когда при загрузке сайта «тормозит» проявление изображений. Происходит это потому, что фотографии недостаточно оптимизированы под работу того или иного конкретного ресурса. Устранить проблему можно при помощи оптимизации изображений. Под такие потребности имеется ряд сервисов, удобных в использовании и позволяющих сделать сайт быстрым.
Для чего необходимо оптимизировать изображения
Необходимость в подобной обработке изображений может быть вызвана несколькими причинами:
- с целью улучшения общей привлекательности контента. Многие посетители обращают внимание на графику и общую стилистику сайта. Чем ярче и информативнее изображения, тем больше шансов того, что взгляд посетителя зацепится за нужную информацию. Яркие картинки, которые хорошо оптимизированы, повышают лояльность и интерес посетителей сайта;
- с целью ускорения работы сайта. Обычно качественные изображения сказываются на скорости работы интернет – сайтов. Чем больше по объему картинка, тем медленнее работает ресурс. В интернете клиент не любит ждать, потому медленная загрузка сайта может негативно повлиять на лояльность посетителей.
Чтобы решить подобного рода проблему важно не только иметь подходящий инструмент редактирования фотографий, но и знать критерии, которым должен будет соответствовать итоговый файл.
Общепринятые требования к изображениям на сайтах
В данной категории выделяются три основных пункта, на которые стоит обращать внимание при работе с изображениями:
- качество;
- формат;
- размеры графических файлов.
Для более полного понимания картины стоит разобрать каждый пункт по отдельности с выяснением подводных камней.
Виды форматов изображений
В мире графики существует огромное количество вариантов формата изображений. Каждый из которых оптимизирован под конкретные ситуации. Наибольшей популярностью пользуются следующие варианты:
- JPEG – прекрасный вариант для веб ресурсов, чаще всего применяется для хранения изображения;
- BMP – еще один распространённый вариант хранения для файлов графического типа. В данном формате сжатие изображения отсутствует, потому фото получаются большого размера;
- GIF подразумевает формат фотографии в виде очень короткого видео или слайд – шоу;
- PNG – формат, достаточно востребованный среди сферы дизайна. Из-за наличия прозрачного фона вес файла может увеличиться. Что негативно скажется на оптимизации работы некоторых ресурсов;
- SVG – данный формат чаще всего используется при создании изображений векторного типа.
Стоит отметить, что поисковик Гугл способен идентифицировать все виды вышеуказанных форматов изображений. Поисковая система Яндекс больше всего ориентирована на работу с форматами JPEG, PNG, GIF.
Сегодня с оптимизацией интернета изобретаются новые форматы картинок, не влияющих на скорость загрузки сайтов. Среди новых форматов популярность обрели JPEG-XR, WebP. При выборе новых форматов важно помнить, что пока еще не все браузеры и поисковые системы оптимизируются под работу с новыми форматами.
Качество загружаемых изображений
При работе с изображением важно помнить, что они предназначены для работы с целевой аудиторией сайта. Потому важно сделать их не только яркими и информативными, но еще и качественными. Очень важно обращать внимание на пропорциональность изображений. Оно не должно быть слишком растянутым или сжатым по одной из сторон. На картинках при этом не должны встречаться такие ошибки, как пикселизация, блеклость или мутность.
Нюансы размеров файла
Данный фактор работы с картинками можно рассматривать с двух основных позиций:
- длина и ширина фото, которые обозначаются в пиксельном варианте;
- вес файла картинки, измеряемый в мегабайтах.
С технической стороны вопроса оптимизировать картинки необходимо с целью уменьшения времени загрузки ресурса. Оптимизировать фото по длине и ширине необходимо таким образом, чтобы пропорции совпадали с желаемыми и удобными для клиентов и посетителей страницы. Некоторые современные сервера самостоятельно оптимизируют изображения оригиналов, создавая удобные версии для мобильного и десктопного вариантов.
Инструменты для качественной оптимизации изображений
В сети имеется достаточно широкое разнообразие методов работы с изображениями. На сегодняшний день популярны онлайн сервисы, декстоп приложения, а также программные коды, работающие внутри сайта.
Варианты онлайн инструментов
Данный вариант идеален при отсутствии необходимости кардинального изменения параметров длины и ширины картинки. Преимуществом большинства сервисов является бесплатность и доступность.
Данная платформа позволяет сжимать и оптимизировать бесплатно в месяц до 500 картинок. Данный вариант площадки отличается высокой скоростью работы и понятным интерфейсом. Один прием позволяет загрузить до 20 картинок размером не более 5 Мб. Готовые изображения можно загрузить на площадку Dropbox.
Compressor
Бесплатный удобный ресурс, оптимизированный на обработку изображений как с сохранением, так и с потерей качества. Неудобство в том, что сервис работает исключительно с форматами JPG и PNG. Процент сжатия возможен до 90%, но размеры оригиналов не должны превышать 10 Мб. Для грамотной работы с данным редактором важно усвоить несколько деталей и подводных камней:
- Сначала необходимо выбрать режим работы и загрузить необходимые файлы.
- После автоматической процедуры доступно сохранение файла в удобную папку на компьютере.
Данный ресурс пользуется спросом в случае необходимости быстрого сжатия большого количества файлов.
Image.online-convert
Данный продукт позволяет работать с исходниками в более, чем 120 форматах. Оптимизируются они под 20 наиболее востребованных вариантов. Пользователь может сам выбрать настройки и быстро произвести сжатие.
Оптимизация фотографий на сервере ресурса
Некоторые мастера интересуются вопросом о том, как можно изменить размеры и прочие параметры фотографий, не загружая их по нескольку раз с сайта. На этот процесс уходит иногда гораздо больше времени, чем нужно. Для того, чтобы оптимизировать все изображения на ресурсе, которых может быть очень много, используются специальные плагины.
Минус данного способа в том, что за работу плагинов придется заплатить. Бесплатная версия большинства из них позволяет сжимать меньшее количество файлов, нередко с потерей качества. Большинство сервисов предназначено исключительно для работы на платформе WordPress.
Если такие варианты не подходят, рекомендуется поискать программы с возможностями работы под конкретные потребности владельцев сайтов. Нередко специалисты в таких случаях советуют просто скачать и перезалить уже готовые изображения на сайт, чем тратить время для поисков не всегда подходящих плагинов, например, для малых страниц.
Kraken
Данный плагин считается наиболее популярным для работы с изображениями непосредственно с сайта. После грамотной установки появляется возможность работы со всеми изображениями на ресурсе сразу.
Сначала пользователям дается 100 бесплатных мегабайт для работы с фотографиями, а далее за использование придется заплатить. Однако предоставляемый объем поможет владельцам серверов оценить удобство и необходимость доплаты. В случае некомфортной работы от нее можно отказаться, выбрав другой продукт. Данный сервис дает возможность работать с фотографиями как с сохранением, так и с потерей исходного качества. Уменьшить вес фотографий в Кракене можно с помощью следующего алгоритма действий:
- Для обеспечения связи потребуется предоставление плагину таких данных от сайта, как API Key и API Secret. Они вносятся в настройках в соответствующей строке. После процедуры будут загружены все данные об изображениях на ресурсе.
- После процедуры есть возможность оптимизации как отдельного фото на выбор, так и все файлы единым целым.
Для работы со всеми файлами сразу необходимо поставить галочку в строке File. После обработки изображений они автоматически сохранятся на ресурсе.
Imagify
Данный вариант идеален для сайтов, работающих на платформе WordPress. Помимо того, что он работает со всеми изображениями на ресурсе, также он сразу оптимизирует новые картинки под заданные шаблоны после загрузки. В плагине существует три основных варианта обработки фотографий:
- при нормальном варианте потеря качества не допускается, но и вес при таких параметрах уменьшается не на много;
- форма agressif считается самой востребованной среди пользователей, поскольку снижает вес изображений, при этом максимально сохраняя их качество;
- в режиме ультра происходит максимальный процесс сжатия картинок, качество при этом не сохраняется.
Процесс уменьшения фотографии в данном редакторе происходит при помощи следующего алгоритма шагов:
- После активации и установки плагина пользователю будет доступна стартовая страница ресурса.
- После прохождения всех указанных этапов можно приступать к обработке изображений.
- Необходимо выбрать режим оптимизации, а также при надобности дополнительные функции.
- Далее указать необходимые настройки, нажать сохранить и перейти в Bulk Optimization.
- На данной странице необходимо будет снова указать необходимый режим обработки и запустить IMAGIF’EM ALL.
После завершения процесса плагин сам откроет необходимую пользователю страницу для работы с изображениями.
Варианты декстоп приложений для работы с фотографиями
Данный вариант работы с фотографиями стоит применять лишь в тех случаях, когда необходимо поменять высоту или ширину изображения. В других случаях пользователям обычно достаточно онлайн ресурсов.
Adobe Photoshop
Данный сервис знает каждый дизайнер и разработчик. Его основным преимуществом является быстрота процесса обработки изображений. Необходимо для работы открыть программу, загрузить изображение. После чего пользователю открывается окно с наличием различных функций. Необходимо в подкатегории Изображения выбрать пункт Размер картинок.
Далее прописывается конкретный размер, если нужно обработать изображение до конкретных пропорций. Далее надо нажать галочку в окне «Сохранение пропорций». Если размер изображения допускается нестандартный, можно снять галочку и указать свои предпочтения, после чего сохранить картинку. Если необходимо уменьшить общий вес картинок, можно сохранить их с помощью функции «Сохранить как для web-устройств».
Total Image Converter
При необходимости расширенного функционала выбранной программы можно обратить внимание на этот вариант. Основными преимуществами Total Image Converter клиенты считают:
- понятный интерфейс на русском языке;
- возможность обработки пакетов изображений за один раз;
- конвертация форматов.
Также пользователям предоставляется возможность конвертации форматов под свои потребности. Формат фото в данном редакторе изменяется с помощью двух простых шагов. После запуска программы слева появится окно, где нужно будет выбрать файл для конвертации. Далее в верхней строке указывается необходимый формат, после чего картинка сохраняется.
Как можно убедиться, при помощи современных инструментов можно влиять на ключевые характеристики фотографий, оптимизируя работу сайта под конкретные задачи без потери качества изображений.
16.10.2019
691
Оптимизация изображений для сайта — инструмент увеличения производительности
Google не любит медленные сайты. К счастью, можно уменьшить размер файлов изображений для повышения производительности вашего сайта. Но из-за этого их качество ухудшается. Как решить эту дилемму?
Оптимизация изображений представляет собой процесс уменьшения размера файла с помощью плагина или скрипта. Существует два способа сжатия изображений – с потерями качества и без потерь.
Согласно HTTP Archive, изображения занимают в среднем 21% от общего размера веб-страницы. Процесс оптимизации изображений является самым простым способом повышения производительности сайта. Но при этом большинство владельцев пренебрегают им.
Среднее количество байт на страницу (кБ)
Преимущества оптимизации графического контента:
- Увеличение скорости загрузки страниц.
- Улучшает SEO-показатели сайта. Большие файлы изображений замедляют работу вашего сайта, а поисковики не любят медленные ресурсы.
- Более быстрое создание резервных копий.
- Требуется меньше места на вашем сервере.
Основная задача оптимизации – это получение баланс между наименьшим размером файла и приемлемым качеством изображения. Одним из распространенных способов является простое сжатие файлов перед их загрузкой в WordPress. Для этого используют Adobe Photoshop или Affinity Photo. А также плагины, которые мы подробно рассмотрим ниже.
Существует сразу несколько форматов файлов, которые можно использовать для сжатия изображений:
- PNG– этот формат позволяет получать изображения высокого качества, но при этом размер файла остается большим.
- JPEG– использует оптимизацию с потерями и без потерь качества. Вы можете регулировать уровень качества, чтобы достичь наиболее подходящего баланса.
- GIF – формат поддерживает всего 256 цветов. Это лучшее решение для анимированных изображений. Он использует только сжатие без потерь.
Есть еще несколько форматов, таких как JPEG XR и WebP. Но не все они поддерживаются браузерами. Поэтому лучше использовать JPEG (или JPG) для полноцветных изображений и PNG для простых картинок.
Ниже приведен пример, демонстрирующий, что происходит с изображением при сильном сжатии. К первому изображению применили низкую степень сжатия. Это обеспечило наилучшее качество, но и больший размер файла. Ко второму изображению применили высокую степень сжатия. В результате получили изображения плохо качества с меньшим размером файла.
Примечание: Объем оригинального изображения составляет 2,06 Мб.
Низкая степень сжатия (высокое качество) JPG – 590 Кб
Высокая степень сжатия (низкое качество) JPG – 68 Кб
Размер первого изображения составляет 590 Кб. Это довольно много для одной фотографии. Второе изображение выглядит ужасно, но при этом весит всего 68 Кб.
Применим к изображению среднюю степень сжатия. В результате мы получили хорошее качество при размере файла в 151 Кб. Это почти в четыре раза меньше размера оригинальной фотографии. Для обеспечения наилучшей производительности сайта изображения в формате PNG не должны весить более 100 Кб.
Средняя степень сжатия (отличное качество) JPG – 151 Кб
Оптимизация с потерями – это «фильтр», который убирает некоторые данные и ухудшает качество изображения. Но при этом размер файла изображения существенно уменьшается. Для этого можно использовать такие программы как Adobe Photoshop, Affinity Photo или любой другой графический редактор.
Оптимизация без потерь качества – сжатие данных без снижения качества изображения. Выполнить сжатие без потери качества можно с помощью Photoshop, FileOptimizer или ImageOptim.
Лучший способ – это протестировать различные техники сжатия, чтобы выбрать наиболее подходящую для каждого изображения или формата.
Существует множество инструментов и программ для оптимизации изображений. Лично мы – большие поклонники Affinity Photo.
Сжатие фотографии в Affinity Photo
Ниже перечислено несколько инструментов для оптимизации изображений:
- Gimp
- Paint.NET
- GIFsicle
- JPEGtran
- JPEG Mini
- OptiPNG
- pngquant
- FileOptimizer
- ImageOptim
- ImageResize.org
WordPress, начиная с версии 4.4, поддерживает адаптивные изображения (не уменьшенные с помощью CSS). Движок автоматически создает несколько копий изображения разного размера, загружая их в медиа-библиотеку. Используя атрибут srcset, браузеры теперь могут выбирать для загрузки файл наиболее подходящего размера, исходя из характеристик экрана устройства пользователя.
Пример кода отзывчивых изображений srcset
Медиа-библиотека WordPress создает миниатюры на основе ваших установок. Но при этом она сохраняет оригинальные изображения без изменений. Чтобы изменить размер изображений, не сохраняя оригинальные, можно воспользоваться бесплатным плагином Imsanity.
Настройка медиафайлов в WordPress
Imsanity позволяет установить ограничения для загружаемых в CMS картинок. Плагин начинает работать сразу же после загрузки изображения, еще до того как WordPress начнет его обработку.
Существует сразу несколько плагинов, которые автоматически оптимизируют файлы изображений, когда вы их загружаете. Более того, они оптимизируют даже ранее загруженные изображения.
Но не стоит полностью полагаться на плагины. Например, не следует загружать изображения размером более 2 Мб в медиа-библиотеку WordPress. Это приведет к быстрому расходованию дискового пространства, предоставляемого хостингом.
Плагин Imagify для оптимизации изображений
Плагин Imagify создан авторами WP Rocket, с которым большинство из вас знакомы. В нем доступна функция массовой оптимизации. Вы можете выбрать три уровня сжатия: нормальный, агрессивный и ультра. Если недовольны полученным качеством, то воспользовавшись функцией восстановления, можно будет восстановить исходное изображение. С помощью этого плагина также можно удалять оригинальные изображения, уменьшать размер больших файлов.
Изменение размера файлов в Imagify
Плагин ShortPixel
Бесплатный плагин ShortPixel Image Optimizer позволяет сжимать 100 изображений в месяц. Он работает с множеством форматов, включая PNG, JPG, GIF, WebP и даже PDF. Он выполняет сжатие изображений с потерями и без потерь. Плагин конвертирует цветовую модель CMYK в RGB. При оптимизации создается резервная копия оригинальных файлов, что позволяет при желании восстановить их вручную. Данный плагин также поддерживает массовую конвертацию файлов.
Плагин Optimole
Optimole автоматически уменьшает размер файлов без вашего участия. При этом он выдает идеальный размер картинки для пользователя.
Плагин включает в себя функцию отложенной загрузки и замены изображений при медленном интернет-соединении. Данная функция выгодно выделяет этот плагин из множества других решений. Данный плагин автоматически определяет браузер пользователя и поддерживает формат WebP. Все изображения, которые сжимает плагин Optimole, обслуживаются через быструю CDN- службу.
EWWW Image Optimizer Cloud- облачный плагин для оптимизации изображений
Плагин EWWW Image Optimizer Cloud оптимизирует изображения и повышает скорость работы сайта. Пользователи EWWW IO могут использовать функцию Bulk Optimizer («массовый оптимизатор»), предназначенную для сжатия имеющихся изображений.
Плагин EWWW IO позволяет конвертировать изображения в форматы нового поколения, такие как WebP или подобрать наилучший формат для изображения. Стоимость сжатия начинается от 0,003 доллара за изображение.
Функция ExactDN позволяет выполнять автоматическое сжатие (без необходимости сжатия на сервере), автоматическое изменение размера и обладает всеми преимуществами CDN.
Плагин Optimus Image Optimizer
Плагин Optimus WordPress Image Optimizer использует сжатие без потерь. Он поддерживает WooCoomerce и мультисайты, а также включает в себя функцию массовой оптимизации. Плагин также совместим с плагином WP Retina. Если вы совместите плагин Optimus Image Optimizer с плагином Cache Enabler, то сможете работать с изображениями, сохраненными в формате WebP.
Плагин WP Smush
Плагин WP Smush сканирует изображения и сжимает их по мере их загрузки на сайт. Он также находит и оптимизирует уже сохраненные рисунки. Он позволяет осуществлять массовое сжатие (до 50 файлов за раз). Плагин поддерживает форматы JPEG, GIF и PNG. Размер исходных файлов ограничен 1 Мб.
- Плагин совместим с WP All Import и WPML.
- Оптимизация изображений выполняется с помощью сжатия без потерь.
- У Smush есть функция автоматической установки ширины и высоты для всех изображений.
Плагин TinyPNG
Плагин TinyPNG использует сервисы TinyJPG и TinyPNG для оптимизации изображений в форматах JPG и PNG. Для экономии места плагин конвертирует CMYK в RBG. Он сжимает файлы JPEG до 60%, а файлы PNG до 80% без видимой потери качества изображения. У него нет ограничений на размер обрабатываемого файла.
ImageRecycle- плагин для оптимизации изображений и PDF-файлов
Плагин ImageRecyle – это автоматический оптимизатор изображений и PDF-файлов. Одной из его полезных функций является способность устанавливать минимальный размер файла для сжатия. Например, если у вас есть изображения размером 80 Кб, вы можете автоматически исключить их из процесса сжатия. Данный плагин также включает в себя функцию массовой оптимизации и автоматического изменения размеров изображений.
Мы решили провести свое небольшое исследование, чтобы показать вам как оптимизация изображений влияет на скорость работы WordPress-сайта.
Мы загрузили шесть несжатых файлов JPG на наш тестовый сайт. Размер каждого из них превышал 1 Мб. Общее время загрузки составило 1,55 секунды, а общий размер страницы -14,7 Мб.
Тест скорости передачи данных несжатых файлов JPG
Затем мы сжали файлы JPG с помощью WordPress-плагина Imagify, используя «агрессивные» установки. Взгляните на новые сжатые файлы JPG, которые все еще выглядят прекрасно. После этого мы провели пять тестов, используя Pingdom, и выбрали среднее значение. В результате общее время загрузки сократилось до 476 мс, а размер страницы уменьшился до 2,9 Мб. Общее время загрузки уменьшилось на 54,88%, а размер страницы — на 80,27%.
Тест на скорость передачи данных сжатых файлов JPG
Не существует никакой другой оптимизации сайта, которая позволила бы сократить время загрузки более чем на 50%. Поэтому оптимизация изображений является такой важной. Процесс, показанный выше, был полностью автоматизирован плагином.
Есть еще одна рекомендация – использовать формат SVG. Это масштабируемый векторный формат, который отлично подходит для логотипов, иконок, текста и простых изображений. Преимущества данного формата:
- Файлы SVG автоматически масштабируются во всех браузерах и графических редакторах.
- Google индексирует файлы SVG так же, как и PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
- SVG-файлы отличаются меньшим размером по сравнению PNG или JPG. Это положительно сказывается на скорости загрузки.
Файл JPG (оптимизированный размер: 81,4 Кб)
Изображение JPG
Файл PNG (оптимизированный размер: 85,1 Кб)
Изображение PNG
Файл SVG (оптимизированный размер: 6.1 Кб)
Изображение SVG
Как показано выше, SVG- файл уменьшается в размере на 92,51% по сравнению с файлом в формате JPG. А при сравнении с файлом в формате PNG – на 92,83%.
- Используйте WordPress-плагины, которые сжимают и оптимизируют изображения на внешних серверах. Это снижает нагрузку на ваш собственный сайт.
- Используйте векторные изображения, где это только возможно.
- Используйте CDN для быстрого предоставления изображений посетителям со всего мира.
- Используйте эффекты CSS3 как можно чаще.
- Сохраняйте изображения в подходящем разрешении. При этом помните, что WordPress поддерживает адаптивные изображения для их предоставления без изменения размера с помощью CSS.
- Используйте веб-шрифты вместо текста внутри изображений – они выглядят лучше при масштабировании и занимают меньше места.
- Уменьшайте глубину цвета для использования меньшей цветовой палитры.
- Используйте сжатие с потерей качества, где только возможно.
- Экспериментируйте для поиска наилучших установок для каждого формата.
- Используйте GIF, если вам нужна анимация.
- Используйте формат PNG, если вам требуется высокая детализация и разрешение.
- Используйте формат JPG для фотографий общего вида и скриншотов.
- Автоматизируйте процесс оптимизации изображений.
- Используйте формат WebP в Google Chrome для отображения изображений меньшего размера.
Как только оптимизируете изображения, ваш сайт сразу понравится поисковым системам и будет быстрее загружаться.
Данная публикация является переводом статьи «How to Optimize Images for Web and Performance» , подготовленная редакцией проекта.
Сжать JPG, PNG, GIF изображения онлайн
Зачем сжимать изображения?
Сжатие изображений необходимо для повышения производительности передачи данных по сети и экономии пространства хранилища за счет уменьшения размера файлов. Никому не нравится просматривать медленный или плохо выглядящий веб-сайт. Сжатые изображения могут значительно улучшить время загрузки веб-сайта и, следовательно, удовлетворенность пользователей. При оптимизации изображений следует принимать во внимание правильный баланс между уменьшенным размером файла и приемлемым качеством. Помимо улучшенного времени загрузки веб-сайта, оптимизированные фотографии экономят место на вашем телефоне или устройстве. Сжатые изображения также упрощают их обмен в социальных сетях и отправку по электронной почте.
Сжимайте JPG, PNG и GIF изображения онлайн
Необходимо сжать JPG, PNG или GIF изображение онлайн? Тогда вы в нужном месте! В зависимости от ваших потребностей, выберите оптимизацию или сжатие изображения в КБ/МБ. Интересно узнать как сжать изображение, не теряя качества? Давайте посмотрим.
Сжатие изображений без потери качества возможно благодаря автоматическому режиму сжатия. Он обеспечивает оптимальный баланс между визуальным восприятием и размером файла. При использовании этого инструмента размер сжатых изображений будет уменьшен до 70% без визуальной потери качества. Звучит отлично, не так ли?
Как сжать изображение?
- Загрузите JPG, PNG или GIF изображение, которое вы хотите сжать.
- Выберите опцию автоматического сжатия изображения. После этого нажмите кнопку «Сжать».
- Чтобы получить оптимизированное изображение, перейдите на страницу загрузки и нажмите кнопку «Скачать Изображение».
Бесплатный сжиматель фото
Бесплатный сжиматель изображений ResizePixel предоставляет простой в использовании, безопасный и надежный сервис для сжатия фотографий онлайн. С нашим вниманием к деталям и использованием новейших технологий, приоритет номер один для нас — это соответствие ожиданиям всех, кто посещает этот веб-сайт.
Как оптимизировать изображения для Интернета и производительности 2021
Поверьте, вы не хотите, чтобы Google ненавидел ваш сайт. К счастью, вы можете уменьшить размер файла изображения, чтобы повысить производительность своего сайта. Одна из проблем с их форматированием заключается в том, что модификации часто снижают их качество (что, в свою очередь, может заставить посетителя возненавидеть ваш сайт). Это не плохо, если вы не делаете их уродливыми. Есть несколько приемов и приемов, которые позволяют уменьшить размер файла изображения и при этом сохранить его достаточно красивым, чтобы с гордостью отображать его на своем веб-сайте.Итак, давайте посмотрим, как форматировать изображения, не делая их уродливыми, а также как оптимизировать изображения для Интернета и повысить производительность .
Что значит оптимизировать изображения?
Большие изображения замедляют работу ваших веб-страниц, что создает неоптимальный пользовательский опыт. Оптимизация изображений — это процесс уменьшения размера файла на с помощью плагина или скрипта, что, в свою очередь, ускоряет время загрузки страницы. Обычно используются два метода сжатия с потерями и сжатия без потерь.
Преимущества форматирования изображений
Во-первых, зачем вам форматировать изображения? Каковы преимущества? Оптимизация изображений для повышения производительности дает множество преимуществ. Согласно HTTP Archive, по состоянию на ноябрь 2018 года изображений составляют в среднем 21% от общего веса веб-страницы. Поэтому, когда дело доходит до оптимизации вашего сайта WordPress, после видеоконтента изображения — это первое, с чего вам следует начать!
Это важнее скриптов и шрифтов.По иронии судьбы, хороший рабочий процесс оптимизации изображений — одна из самых простых вещей для реализации, но многие владельцы веб-сайтов упускают это из виду.
Среднее количество байтов на страницу (КБ)
Вот основные преимущества.
- Это улучшит скорость загрузки вашей страницы (см. Наш пример ниже, чтобы узнать, насколько это влияет на вашу скорость). Если ваша страница загружается слишком долго, ваши посетители могут устать ждать и перейти к чему-то другому. Дополнительные сведения об оптимизации времени загрузки страницы см. В нашем подробном руководстве по оптимизации скорости загрузки страницы.
- В сочетании с отличным плагином SEO для WordPress он улучшает ваше SEO. Ваш сайт будет занимать более высокое место в результатах поиска. Большие файлы замедляют работу вашего сайта, а поисковые системы ненавидят медленные сайты. Google также может быстрее сканировать и индексировать ваши изображения для поиска изображений Google. Хотите узнать, какой процент вашего трафика поступает из поиска картинок Google? Вы можете использовать плагин или сегмент Google Analytics для WordPress, чтобы проверить поисковый трафик изображений Google.
- Создание резервных копий будет быстрее.
- Файлы изображений меньшего размера используют меньшую полосу пропускания. Сети и браузеры оценят это.
- Требуется меньше места для хранения на вашем сервере (это зависит от того, сколько эскизов вы оптимизируете)
Изображения составляют в среднем 21% от общего веса веб-страницы. 😮 Оптимизируйте их! Нажмите, чтобы опубликовать твит
Как оптимизировать изображения для Интернета и производительность
Основная цель форматирования изображений — найти баланс между наименьшим размером файла и приемлемым качеством .Практически все эти оптимизации можно выполнить несколькими способами. Один из самых популярных способов — просто сжать их перед загрузкой в WordPress. Обычно это можно сделать с помощью таких инструментов, как Adobe Photoshop или Affinity Photo. Некоторые из этих задач также могут быть выполнены с помощью плагинов, о которых мы подробнее поговорим ниже.
Две основные вещи, которые следует учитывать, — это формат файла , и тип сжатия , который вы используете. Выбрав правильную комбинацию формата файла и типа сжатия, вы можете уменьшить размер изображения в 5 раз.Вам придется поэкспериментировать с каждым изображением или форматом файла, чтобы увидеть, какой из них работает лучше всего.
Выберите правильный формат файла
Прежде чем приступить к редактированию изображений, убедитесь, что вы выбрали лучший тип файла. Вы можете использовать несколько типов файлов:
- PNG — создает изображения более высокого качества, но также имеет больший размер файла. Был создан как формат изображения без потерь, хотя он также может быть с потерями.
- JPEG — использует оптимизацию с потерями и без потерь.Вы можете настроить уровень качества для получения хорошего баланса качества и размера файла.
- GIF — использует только 256 цветов. Это лучший выбор для анимированных изображений. Он использует только сжатие без потерь.
Есть несколько других, например JPEG XR и WebP, но они не поддерживаются всеми браузерами. В идеале вы должны использовать JPEG или JPG для изображений с большим количеством цветов и PNG для простых изображений.
(Рекомендуемая литература: JPG против JPEG: понимание наиболее распространенного формата файлов изображений)
Качество сжатия и размер
Вот пример того, что может случиться, если вы слишком сильно сжимаете изображение.Во-первых, используется очень низкая степень сжатия, что обеспечивает наивысшее качество (но больший размер файла). Во втором случае используется очень высокая степень сжатия, что приводит к очень низкому качеству изображения (но меньшему размеру файла). Примечание. Размер исходного изображения без изменений составляет 2,06 МБ.
Низкое сжатие (высокое качество) JPG — 590 КБ
Высокое сжатие (низкое качество) JPG — 68 КБ
Как видите, размер первого изображения выше составляет 590 КБ. Это довольно много для одной фотографии! Как правило, лучше всего, чтобы общий вес веб-страницы не превышал 1–2 МБ.590 КБ уже будет четвертью от этого. Второе изображение явно ужасно выглядит, но тогда оно всего 68 Кбайт. Что вы хотите сделать, так это найти золотую середину между степенью сжатия (качеством) и размером файла.
Итак, мы снова взяли изображение со средней степенью сжатия, и, как вы можете видеть ниже, качество сейчас хорошее, а размер файла составляет 151 КБ, что приемлемо для фотографии с высоким разрешением. Это почти в 4 раза меньше исходной фотографии с низким уровнем сжатия. Обычно для лучшей производительности более простые изображения, такие как PNG, должны иметь размер менее 100 КБ.
Среднее сжатие (отличное качество) JPG — 151 КБ
Оптимизация с потерями и оптимизация без потерь
Также важно понимать, что вы можете использовать два типа сжатия: с потерями и без потерь.
Lossy — это фильтр, который удаляет часть данных. Это приведет к ухудшению качества изображения, поэтому вам нужно быть осторожным с тем, насколько уменьшить изображение. Размер файла можно значительно уменьшить. Вы можете использовать такие инструменты, как Adobe Photoshop, Affinity Photo или другие редакторы изображений, чтобы настроить параметры качества изображения.В приведенном выше примере используется сжатие с потерями.
Lossless — это фильтр, сжимающий данные. Это не снижает качества, но требует, чтобы изображения были распакованы, прежде чем их можно будет визуализировать. Вы можете выполнить сжатие без потерь на рабочем столе с помощью таких инструментов, как Photoshop, FileOptimizer или ImageOptim.
Лучше поэкспериментировать со своими методами сжатия, чтобы увидеть, что лучше всего подходит для каждого изображения или формата. Если в ваших инструментах есть такая возможность, убедитесь, что вы сохранили изображение для Интернета.Это опция во многих редакторах изображений, которая позволит вам настроить качество, чтобы вы могли выполнить оптимальное сжатие. Вы потеряете часть качества, поэтому поэкспериментируйте, чтобы найти наилучший баланс, не делая изображения некрасивыми.
Инструменты и программы для оптимизации изображений
Существует множество инструментов и программ, как платных, так и бесплатных, которые вы можете использовать для оптимизации ваших изображений. Некоторые предоставляют вам инструменты для выполнения ваших собственных оптимизаций, а другие делают работу за вас.Мы лично большие поклонники Affinity Photo, так как это дешево и дает вам почти те же функции, что и в Adobe Photoshop.
Сжатие фото в Affinity Photo
Вот некоторые дополнительные инструменты и программы, которые стоит попробовать:
Изменение размера изображения для масштабирования
Раньше было очень важно загружать изображения для масштабирования и не позволять CSS изменять их размер. Однако это уже не так важно, поскольку WordPress 4.4 теперь поддерживает адаптивные изображения (не уменьшенные с помощью CSS).По сути, WordPress автоматически создает несколько размеров каждого изображения, загруженного в медиатеку. Включая доступные размеры изображения в атрибут srcset
, браузеры теперь могут выбирать для загрузки наиболее подходящий размер и игнорировать другие. См. Пример того, как на самом деле выглядит ваш код ниже.
Подпишитесь на информационный бюллетень
Хотите узнать, как мы увеличили наш трафик более чем на 1000%?
Присоединяйтесь к 20 000+ другим пользователям, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!
Подпишитесь сейчас
Пример адаптивного изображения
srcset в коде
Таким образом, с появлением все большего количества дисплеев HiDPI в настоящее время может быть хорошо найти золотую середину.Скажем, в 2 или 3 раза больше размера столбца или блока вашего сайта, но все же меньше исходного размера. Браузер покажет правильный вариант в зависимости от разрешения устройства.
Медиабиблиотека WordPress создает эскизы на основе ваших настроек. Тем не менее, оригинал до сих пор сохранился и остался нетронутым. Если вы хотите изменить размер изображений и сэкономить место на диске, не сохраняя оригинал, вы можете использовать бесплатный плагин, например Imsanity.
Настройки мультимедиа WordPress
Imsanity позволяет вам установить предел работоспособности, чтобы все загружаемые изображения были ограничены разумным размером, который по-прежнему более чем достаточно для потребностей типичного веб-сайта.
Imsanity подключается к WordPress сразу после загрузки изображения, но до обработки WordPress. Таким образом, WordPress ведет себя точно так же во всех отношениях, за исключением того, что автор будет масштабировать свое изображение до разумного размера перед загрузкой.
Очистите медиатеку
Если вы ищете инструмент для экономии места и очистки медиатеки, вы можете использовать Media Cleaner для поиска неиспользуемых медиафайлов. Плагин просканирует все ваши медиафайлы и выведет список неиспользуемых на панели инструментов Media Cleaner, чтобы вы могли просматривать и удалять их.
Media Cleaner реализует интеллектуальную систему удаления мусора: когда файлы удаляются, они перемещаются в корзину. Таким образом, вы сможете некоторое время протестировать свой сайт и убедиться, что все в порядке. Если файл или медиафайл отсутствует, вы можете легко восстановить его одним щелчком мыши или просто очистить корзину, если вам все нравится.
Плагины для оптимизации изображений, которые вы можете использовать
К счастью, с WordPress вам не нужно выполнять все форматирование или сжатие вручную.Вы можете использовать плагины для автоматического выполнения хотя бы части работы за вас. Есть несколько плагинов, которые автоматически оптимизируют ваши файлы изображений по мере их загрузки. Они даже оптимизируют уже загруженные вами изображения. Это удобная функция, особенно если у вас уже есть веб-сайт с изображениями. Вот некоторые из лучших плагинов для форматирования изображений для повышения производительности.
Однако важно, чтобы вы не полагались исключительно на сами плагины. Например, вам не следует загружать изображения размером 2 МБ в медиатеку WordPress.Это может привести к очень быстрому израсходованию дискового пространства вашего веб-хоста. Лучший способ — заранее быстро изменить размер изображения в инструменте редактирования фотографий, а затем загрузить его и использовать один из следующих плагинов, чтобы уменьшить его еще больше.
Оптимизатор изображения Imagify
Плагин Imagify Image Optimizer
Imagify создан той же командой, которая разработала WP Rocket, с которым большинство из вас, вероятно, знакомо. Он совместим с WooCommerce, NextGen Gallery и WP Retina. Он также имеет функцию массовой оптимизации, и вы можете выбирать между тремя различными уровнями сжатия: нормальным, агрессивным и ультра.Он также имеет функцию восстановления, поэтому, если вы недовольны качеством, вы можете одним щелчком мыши восстановить и повторно сжать на уровне, который лучше соответствует вашим потребностям. Есть бесплатная и премиум версия. Вы ограничены квотой 25 МБ изображений в месяц с бесплатной учетной записью.
С помощью этого плагина можно также избавиться от исходного изображения и изменить размер больших изображений.
Изменение размера изображений в Imagify
Imagify также сжимает изображения на своих сторонних серверах , а не на вашем, что очень важно, когда речь идет о производительности.Imagify не должен замедлять работу вашего сайта WordPress.
Оптимизатор изображения ShortPixel
Плагин ShortPixel
ShortPixel Image Optimizer — это бесплатный плагин, который сжимает 100 изображений в месяц и сжимает файлы нескольких типов, включая PNG, JPG, GIF, WebP и даже файлы PDF. Он будет выполнять сжатие изображений как с потерями, так и без потерь. Он преобразует CMYK в RGB. Он переносит ваши изображения и эскизы в облако для обработки, а затем возвращает их на ваш сайт для замены оригиналов.Он создает резервную копию исходных файлов, так что вы можете вручную восстановить их, если хотите. Он будет массово конвертировать файлы галереи. Нет ограничений на размер файла.
Optimole
Плагин Optimole
Optimole — это плагин WordPress для оптимизации изображений, который автоматически уменьшает размер ваших изображений без каких-либо дополнительных действий с вашей стороны. Он имеет большое преимущество, когда дело доходит до скорости загрузки вашего сайта, поскольку он полностью основан на облаке и никогда не обслуживает изображения, которые больше, чем должны, иначе говоря, он отображает идеальный размер изображения для окна просмотра и браузера посетителя.
Кроме того, плагин обеспечивает ленивую загрузку и эффективную замену изображений — он снижает качество изображения, если у посетителя более медленное интернет-соединение, — что выделяет его из толпы. Он также автоматически определяет браузер пользователя и обслуживает WebP, если он поддерживается.
Все образы, сжимаемые Optimole, обслуживаются через быстрый CDN. Вы можете попробовать Optimole бесплатно или перейти на премиум-план, если вам нужна дополнительная пропускная способность и пространство для обработки.
EWWW Image Optimizer Cloud
Подключаемый модуль EWWW Image Optimizer Cloud
EWWW Image Optimizer Cloud поможет вам сделать ваши изображения меньше, а ваш сайт работать быстрее и с меньшими хлопотами.Без ограничений по размеру и большой гибкости вы можете использовать настройки по умолчанию или полностью настроить плагин по своему вкусу. Все пользователи EWWW IO могут использовать Bulk Optimizer для сжатия своих существующих изображений или использовать режим списка библиотеки мультимедиа для выбора конкретных изображений для сжатия.
Дополнительные папки можно сканировать, чтобы убедиться, что каждое изображение на вашем сайте должным образом оптимизировано. EWWW IO даже позволяет конвертировать изображения в форматы следующего поколения, такие как WebP, или находить лучший формат изображения с опциями многоформатного преобразования.Сжатие изображений начинается всего с 0,003 доллара США за изображение.
API сжатия премиум-класса позволяет вывести сжатие на совершенно новый уровень без ущерба для качества, что открывает доступ к сжатию PDF и включает удобные 30-дневные резервные копии изображений. Функция ExactDN, стоимость которой начинается с 9 долларов в месяц, обеспечивает автоматическое сжатие (без необходимости сжатия на стороне сервера), автоматическое изменение размера и все преимущества CDN для более быстрых результатов и даже большей производительности для устройств любого размера.
Оптимизатор изображения Optimus
Плагин Optimus Image Optimizer
Оптимизатор изображений Optimus WordPress использует сжатие без потерь для оптимизации ваших изображений.Без потерь означает, что вы не увидите потери качества. Он поддерживает WooCoomerce и мультисайты, а также имеет хорошую функцию массовой оптимизации для тех, у кого уже есть большие медиа-библиотеки. Он также совместим с плагином WP Retina WordPress. Есть бесплатная и премиум версия. В премиум-версии вы платите один раз в год и можете сжимать неограниченное количество изображений. Если вы объедините его с их плагином Cache Enabler, вы также можете погрузиться в изображения WebP, который является новым легким форматом изображений от Google.
WP Smush
Плагин WP Smush
WP Smush имеет как бесплатную, так и премиум-версию. Это уменьшит скрытую информацию из изображений, чтобы уменьшить размер без снижения качества. Он будет сканировать изображения и уменьшать их, когда вы загружаете их на свой сайт. Он также будет сканировать изображения, которые вы уже загрузили, и уменьшать их. Он может одновременно загрузить до 50 файлов. Вы также можете вручную смазать, если хотите. Он сместит типы изображений JPEG, GIF и PNG. Размер файла ограничен 1 МБ.
- Он совместим с некоторыми из самых популярных плагинов медиа-библиотеки, такими как WP All Import и WPML.
- Вся оптимизация изображений выполняется с помощью методов сжатия без потерь, что обеспечивает высокое качество изображения.
- Неважно, в каком каталоге вы сохраняете изображения. Smush находит и сжимает их.
- Smush имеет возможность автоматически устанавливать ширину и высоту для всех изображений, поэтому все ваши изображения будут изменены до одинаковых пропорций.
TinyPNG (также сжатые файлы JPG)
Плагин TinyPNG
TinyPNG использует сервисы TinyJPG и TinyPNG (бесплатная учетная запись позволяет сжимать около 100 изображений в месяц) для оптимизации изображений JPG и PNG.Он автоматически сжимает новые изображения и выполняет массовое сжатие существующих изображений. Он преобразует CMYK в RBG для экономии места. Он сжимает изображения JPEG до 60% и изображения PNG до 80% без видимой потери качества изображения. У него нет ограничения на размер файла.
ImageRecycle
ImageRecycle — плагин для оптимизации изображений и PDF
Плагин ImageRecyle — это автоматический оптимизатор изображений и PDF-файлов. Этот плагин ориентирован не только на сжатие изображений, но и на файлы PDF.Одна действительно удобная функция — это возможность установить минимальный размер файла для сжатия. Например, если у вас есть изображения размером 80 КБ, вы можете автоматически исключить их из сжатия. Это гарантирует, что изображения и файлы никогда не будут слишком сильно сжаты. Он также включает массовую оптимизацию и автоматическое изменение размера изображения. Примечание. У них есть бесплатная 15-дневная пробная версия, но это услуга премиум-класса, и изображения загружаются и сжимаются с помощью их серверов. Они взимаются не за месяц, а за общее количество сжатых изображений, начиная с 10 долларов за 10 000.
Оптимизация изображений для Интернета Пример
Мы решили провести собственное небольшое исследование и тесты, чтобы показать вам, насколько оптимизация изображений для Интернета может повлиять на общую скорость вашего сайта WordPress.
Несжатые JPG-файлы
Сначала мы загрузили на наш тестовый сайт 6 несжатых файлов JPG, каждый размером более 1 МБ. (См. Исходные файлы JPG без сжатия). Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости, общее время загрузки составило 1.55 секунд, а общий размер страницы составил 14,7 МБ.
Тест скорости с несжатыми JPG-файлами
Сжатые JPG-файлы
Затем мы сжимали файлы JPG с помощью плагина Imagify WordPress, используя «агрессивную настройку». (См. Новые сжатые файлы JPG, которые по-прежнему выглядят так же красиво). Затем мы провели 5 тестов через Pingdom и взяли среднее значение. Как видно из приведенного ниже теста скорости, общее время загрузки сократилось до 476 мс, а общий размер страницы — до 2,9 МБ. Общее количество загрузок в раза сократилось на 54.88% Размер страницы и уменьшился на 80,27% .
Тест скорости со сжатыми файлами JPG
Практически нет другой оптимизации, которую вы можете сделать на своем сайте, которая позволила бы вам сократить время загрузки более чем на 50%. Вот почему оптимизация изображений так важна, что весь процесс, описанный выше, был полностью автоматизирован плагином. Это невмешательский подход к более быстрому сайту WordPress. Единственная другая радикальная оптимизация, которую вы могли бы сделать, — это изменить хосты WordPress. Многие клиенты, которые переезжают в Kinsta, видят увеличение скорости более чем на 45%.Представьте себе, что вы переходите в Kinsta и оптимизируете свои изображения!
Оптимизируя изображения с помощью инструмента для редактирования фотографий или плагина WordPress, вы также можете исправить предупреждение «Оптимизировать изображения», которое появляется в Google PageSpeed Insights (как показано ниже).
PageSpeed Insights Предупреждение об оптимизации изображений
Если у вас есть другие предупреждения об оптимизации от инструментов тестирования скорости, обязательно ознакомьтесь с нашим сообщением в Google PageSpeed Insights и нашим подробным пошаговым руководством по Pingdom.
Мы применили наши знания об эффективном управлении веб-сайтами в большом масштабе и превратили их в электронную книгу и видеокурс.Нажмите здесь, чтобы загрузить Руководство по управлению 40+ сайтами WordPress от 2020 года!
Использование SVG
Еще одна рекомендация — использовать файлы SVG вместе с другими изображениями. SVG — это масштабируемый векторный формат, который отлично подходит для логотипов, значков, текста и простых изображений. Вот пара причин, почему:
- SVG автоматически масштабируются как в браузерах, так и в инструментах редактирования фотографий. Это мечта веб-дизайнеров и графических дизайнеров!
- Google индексирует SVG так же, как PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
- традиционно (не всегда) меньше по размеру, чем PNG или JPG. Это может ускорить загрузку.
SVG
Генки написал отличную статью, в которой сравнивает размер SVG, PNG и JPEG. Ниже приведены несколько выводов из его тестирования, в котором он сравнил три различных типа изображений.
JPG (оптимизированный размер: 81,4 КБ)
Изображение JPG
PNG (оптимизированный размер: 85,1 КБ)
Изображение PNG
SVG (оптимизированный размер: 6,1 КБ)
Изображение SVG
Как вы можете видеть выше, SVG — это уменьшение размера файла на 92.51% по сравнению с JPG. А если сравнивать с PNG, 92,83%. Ознакомьтесь с нашим руководством о том, как использовать SVG на своем сайте WordPress.
Лучшие Лрактики
Вот несколько общих рекомендаций по оптимизации изображений для Интернета:
- Если используется плагин WordPress, использует плагин, который сжимает и оптимизирует изображения извне на своих серверах. Это, в свою очередь, снижает нагрузку на ваш собственный сайт.
- По возможности используйте векторные изображения вместе с PNG и JPG.
- Используйте CDN, чтобы быстро предоставлять свои изображения посетителям со всего мира.
- Удалите ненужные данные изображения.
- Обрежьте пустое пространство и воссоздайте его, используя CSS для заполнения.
- Максимально используйте эффекты CSS3.
- Сохраните изображения в нужных размерах. Хотя помните, что WordPress теперь поддерживает адаптивные изображения, чтобы обслуживать их, не изменяя их размер с помощью CSS.
- Всегда используйте формат файла .ico для вашего значка.
- Используйте веб-шрифты вместо размещения текста в изображениях — они выглядят лучше при масштабировании и занимают меньше места.
- Используйте растровые изображения только для сцен с большим количеством форм и деталей.
- Уменьшите битовую глубину до меньшей цветовой палитры.
- По возможности используйте сжатие с потерями.
- Поэкспериментируйте, чтобы найти лучшие настройки для каждого формата.
- Используйте GIF, если вам нужна анимация. (но сжимайте ваши анимированные GIF-файлы)
- Используйте PNG, если вам нужна высокая детализация и высокое разрешение.
- Используйте JPG для общих фотографий и снимков экрана.
- Удалите все ненужные метаданные изображения.
- Максимально автоматизируйте процесс.
- В некоторых случаях вам может потребоваться отложенная загрузка изображений для более быстрой визуализации первой страницы.
- Сохраняйте изображения как «оптимизированные для Интернета» в таких инструментах, как Photoshop.
- Используйте WebP в Chrome для обслуживания изображений меньшего размера.
Не забудьте оптимизировать свои изображения, иначе ваш сайт WordPress может работать медленно. И вы знаете, как неприятно «медленно»! 🐌Нажмите, чтобы написать твит
После того как вы отформатируете изображения для повышения производительности и следуете передовым практикам, ваш сайт будет лучше нравиться поисковым системам, браузерам и сетям, а также будет быстрее загружаться для ваших читателей.О, и обязательно ознакомьтесь с нашим руководством по хотлинкингу, чтобы предотвратить кражу ваших изображений и трафика людьми.
Вы отформатировали изображения для повышения производительности? Вы форматируете их вручную, используете плагин или и то, и другое? Вы бы порекомендовали другой инструмент или плагин? Есть что добавить? Сообщите нам о своих методах и лучших практиках в комментариях ниже!
Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress.Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на автоматическое масштабирование, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими тарифами
4 способа оптимизации изображений для Интернета и повышения производительности
Гиды
Изображения — один из самых важных элементов на современных веб-сайтах.
Изображения больших героев, каталоги, галереи, интернет-магазины, портфолио, посты с избранными изображениями, фотографии команды компании (в большинстве случаев включая непослушную собаку), фото фоны, иллюстрации…
Изображения повсюду.И это здорово, потому что у них действительно много преимуществ:
Они привлекательны.
Они помогают передать идею.
Они рассказывают историю.
Они задают настроение.
Они порождают идентификацию и сочувствие.
Они поддерживают индивидуальность бренда.
Они помогают сделать вещи более реальными.
Но за это приходится платить.
Файлы изображений обычно имеют большой размер, и каждое изображение, которое вы загружаете на свой сайт, влияет на время загрузки сайта. Все очень просто: если на вашем веб-сайте нужно загрузить больше байтов, загрузка займет больше времени.
Что вы можете с этим поделать?
Если ваш сайт полон изображений, если ваш сайт загружается долго, если вы планируете создать сайт, который будет включать изображения, если вы не знаете, что означает оптимизация изображений…
Если вы один из тех, кто фотографирует ваш продукт и загружает его напрямую на свой сайт, если вы один из тех, кто даже не просматривает детали изображения перед загрузкой…
Если вы удивитесь, когда WordPress сообщит вам, что загруженный вами файл превышает допустимый предел…
… Вы можете многое сделать.
Оптимизация изображений Meet
Каждое изображение, которое вы используете на своем веб-сайте, должно быть оптимизировано для Интернета. Это означает, что он должен иметь оптимальный размер, чтобы он не влиял на загрузку вашего сайта или был в наименьшей степени возможным.
Преимущества
✓ Более легкий сайт, меньше места на сервере и меньшая пропускная способность
Оптимизация изображений на вашем веб-сайте означает их легкость и легкость. Когда изображения становятся менее тяжелыми, весь сайт становится светлее.
Более легкие изображения также занимают меньше места на вашем сервере и сокращают объем данных, передаваемых, когда посетитель просматривает ваш сайт.
Следовательно…
✓ Лучшая производительность
Чем легче ваш сайт, тем выше скорость загрузки. Если перед оптимизацией изображений вашему сайту потребовалось несколько секунд для загрузки, теперь это могут быть миллисекунды.
Следовательно…
✓ Лучшее взаимодействие с пользователем
Лучшая производительность означает лучший пользовательский опыт.Если пользователю нужно дождаться загрузки вашего контента, он, вероятно, покинет ваш сайт еще до того, как увидит его.
Кроме того, более быстрый веб-сайт выглядит более профессиональным в глазах пользователя.
Представьте посетителей, которые просматривают страницы с мобильного устройства. Ожидание загрузки веб-сайта может существенно повлиять на их связь с вашим брендом, потому что пользователю нужны не только ответы, которые вы можете ему дать, но и они нужны ему, когда они нужны ему .
И…
✓ Улучшения SEO
Поскольку более быстрый веб-сайт может привести к более высокому ранжированию в результатах Google, более высокая общая производительность также улучшает SEO вашего сайта.
Теперь этот список пойдет:
от более простого к более сложному,
от обязательной к более необязательной задаче,
и в сложной логике — каждый элемент дополняет и увеличивает ценность предыдущего.
Согласно вашему конкретному веб-сайту, выполнения пункта 1 в списке может быть достаточно. Но если вы отвечаете за более крупный сайт с большим количеством изображений и большим объемом трафика, возможно, вы захотите выполнить и пункты номер 3 или 4.
Специальный бонус!
Хотите убедиться, что ваш сайт оптимизирован для ваших посетителей? Загрузите полный контрольный список для веб-сайта WordPress прямо сейчас бесплатно.
1. Уменьшите размер файла перед загрузкой
На размер файла изображения в основном влияют его размер, качество и формат файла. Изменив их, вы сможете значительно уменьшить размер ваших изображений.
Размеры
Первое, что вам нужно сделать, это убедиться, что изображение, которое вы собираетесь использовать, как можно ближе соответствует размеру места, где оно будет находиться.
Вы не хотите загружать изображение меньшего размера, чем нужно, потому что при увеличении оно будет пикселизированным.И вы не хотите загружать изображение намного большего размера, потому что вы можете сэкономить в весе, если уменьшите его размеры.
Профессиональные фотографии обычно имеют ширину около 5000 пикселей. С точки зрения Интернета, это огромная цифра .
Обычно используется больший размер экрана — 1920 пикселей в ширину, а 1366 x 768 — самый распространенный. (Источник: Статистика отображения браузера — W3Schools).
Если вы планируете использовать полноразмерное изображение, я бы сказал, что изменение его размера до диапазона от 1400 до 1600 пикселей будет хорошим балансом между сохранением его большого размера и одновременным уменьшением его веса.
Просто уменьшив размеры изображения, вы уже уменьшите его вес.
Взгляните на этот пример:
Версия 2: 1400 x 933 — 140 КБ
Исходная версия этого изображения имеет размер 4964 × 3309 и вес 2,3 МБ , что очень много.
Если мы просто уменьшим его до 1400 x 933, его вес автоматически упадет до 140 КБ , что составляет примерно 6% от исходного размера.
140 КБ — огромная разница, но все равно недостаточно.
Качество
После настройки размеров изображения необходимо снизить его качество, чтобы оно стало еще светлее.
Если вы не испугаетесь этого, снижение качества означает, что оно не выглядит уродливым и дешевым. Нет. Речь идет о сокращении объема данных, которые мы используем для их представления на веб-сайте.
В основных приложениях для дизайна или редактирования фотографий качество изображения можно снизить со 100% до 0%. Насколько вы фактически уменьшите, будет зависеть от:
- Само изображение — если это изображение с большим количеством деталей и цветов или если оно содержит меньше графической информации.При уменьшении значения качества изображение с большим количеством деталей будет выглядеть хуже для глаза, чем изображение с меньшим количеством деталей.
- Назначение изображения. Если вы собираетесь использовать его на веб-сайте фотографа для продвижения его свадебных фотографий, вы можете пожертвовать размером, но вместо этого получить изображение более высокого качества. Или, если вы собираетесь использовать изображение в большом разделе героя, качество может быть более важным, чем в случае, когда вы используете изображение меньшего размера.
Я обычно использую степень качества от 40% до 50%.
Вот получившееся изображение после настройки качества: теперь оно весит всего 56 КБ .
Версия 3: 1400 x 933 — 56 КБ
Формат файла
Наиболее распространенными форматами изображений в Интернете являются JPEG (или JPG), PNG и GIF.
В большинстве случаев JPEG — это формат, позволяющий получить более светлое изображение. Он сжимает изображение и позволяет вам выбрать степень качества, как я объяснял ранее.
PNG в основном используется, когда вам нужно, чтобы изображение имело прозрачный фон, что не допускает JPEG.Например, при использовании логотипа, иллюстрации и т. Д. Он создает изображения более высокого качества (поскольку он не сжимает изображения, как JPEG), но также создает более тяжелые файлы. Поэтому его чаще всего используют в меньших количествах и для изображений меньшего размера.
Наконец, GIF рекомендуется для анимированных изображений.
В заключение, использование JPEG будет лучшим выбором в большинстве случаев. И используйте PNG, когда вам нужно, чтобы изображение имело прозрачный фон.
Инструменты для всего этого
Теперь, когда мы рассмотрели 3 задействованных фактора, вот как этого добиться.Существует два основных способа управления размерами, качеством и форматом файла:
а. Использование такого программного обеспечения, как Photoshop / Illustrator / Sketch
Конкретные инструкции могут отличаться в зависимости от программного обеспечения, которое вы используете, но все они в основном работают с одной и той же логикой.
Откройте изображение в одном из этих приложений (или в любом другом программном обеспечении для дизайна или редактирования фотографий). Найдите команду Сохранить для Интернета или Экспорт .
После этого вы должны увидеть окно с множеством параметров экспорта, включая размеры, качество и формат.
Выберите формат JPG, уменьшите размеры до 1400 пикселей в ширину и, наконец, отрегулируйте степень качества, чтобы она соответствовала тому, что вы ищете.
Сохранить или экспортировать, и все.
Проверьте, какой сейчас размер вашего изображения.
г. С помощью онлайн-инструмента, такого как «Уменьшить изображения»
Существует множество онлайн-инструментов, которые позволяют загружать изображение и загружать его оптимизированную версию. Я перепробовал много, и это самый полезный.
Reduce Images — это бесплатный инструмент, позволяющий изменять размеры, качество и формат файла любого загружаемого изображения.
Уменьшить изображения — размеры, качество, формат файла.
Это действительно просто в использовании. Просто загрузите исходное изображение и выберите свои предпочтения.
Вот и все. Когда оптимизированный образ будет готов, вы можете его скачать. И вы даже можете создавать новые версии одного и того же изображения, не загружая его повторно.
Идеальный размер:
Мне нравится, когда мои изображения имеют размер около 80–120 КБ, чем меньше, тем лучше.Если это изображение большого героя, может быть, я позволю ему достичь чего-то вроде 180–240 КБ. Но я стараюсь этого избегать.
2. Используйте оптимизатор изображений, например ShortPixel или Imagify
.
В дополнение к ручной настройке размера изображений вы можете использовать инструмент оптимизатора, чтобы сделать их еще светлее.
ShortPixel и Imagify — это онлайн-сервисы, которые сжимают и оптимизируют изображения на вашем сайте. Они еще больше уменьшают размеры изображений, максимально сохраняя их качество.
Как они работают? По сути, они отправляют исходные изображения в свое облако, где они сжимаются.Затем они загружают оптимизированные изображения, которые заменяют оригинальные на вашем сайте.
Они также хранят исходные фотографии, так что вы можете восстановить ваши носители в их исходные версии, когда вам нужно.
У обоих есть специальные плагины для WordPress, и это здорово. И оба предлагают разные тарифные планы, в том числе и бесплатный.
Это плагин для ShortPixel: wordpress.org/plugins/shortpixel-image-optimiser/
А это плагин Imagify: wordpress.org / plugins / imagify /
Используя инструмент оптимизатора, вы сможете выбирать между различными уровнями оптимизации в соответствии с потребностями вашего сайта. От жесткого сжатия, которое сделает ваши изображения намного светлее и с меньшим качеством (что в большинстве случаев на самом деле не заметно человеческим глазом), до более мягких уровней сжатия, которые немного улучшат качество изображений.
Если вы фотограф, вы можете выбрать более мягкие уровни сжатия, но если у вас обычный бизнес-сайт или интернет-магазин, где приоритетом является производительность, более жесткое сжатие будет лучшим выбором.
Если по какой-либо причине вы не сжимали изображения вручную (если вы пропустили пункт 1 в этом списке и все изображения уже загружены на ваш сайт), вы все равно можете использовать инструмент оптимизации, подобный этому здесь. Это тоже будет отличной работой.
Важный совет:
Стоит отметить, что этот вид инструментов обычно предлагает различные планы кредитования, включая определенное количество изображений для сжатия. Как 100 изображений в месяц или 5000 изображений в месяц.
Вы можете подумать, что одно изображение, которое вы загружаете на свой сайт, равно одному изображению для сжатия, но это не совсем так.
Когда вы загружаете изображение на свой сайт WordPress, ваша тема обрезает и изменяет его размер до разных размеров. Это означает, что у одного изображения будет несколько версий, которые тема будет использовать на всем вашем сайте.
Каждая из этих версий рассматривается вашим инструментом оптимизации как отдельное изображение, потому что он должен оптимизировать каждую из них. Итак, если ваша тема создает 4 версии одного изображения, одно изображение, которое вы загружаете, будет представлять в общей сложности 5 изображений или кредитов в вашем плане сжатия.
3. Разместите изображения на CDN
CDN расшифровывается как Content Delivery Network. Размещение ваших изображений на CDN означает настройку CDN для их обслуживания вместо того, чтобы иметь для этого собственный сервер.
CDN — это сети, расположенные по всему миру с мощными веб-серверами, которые заботятся о загрузке файлов вашего сайта посетителю, используя ближайший к нему сервер с географической точки зрения.
Например, если посетитель из Южной Америки прибывает на ваш сайт, CDN будет обслуживать его, используя сервер, расположенный ближе к посетителю, вместо того, чтобы использовать сервер в Европе.Таким образом, данные вашего веб-сайта перемещаются на более короткие расстояния, что влияет на скорость загрузки.
CDN снимает большую нагрузку с вашего сервера. Это не замена вашей услуги хостинга, а способ добавления оптимизированного сервера, который ускорит ваш сайт.
Есть несколько провайдеров CDN. Обычно они предлагают разные тарифные планы с ежемесячной оплатой или использованием данных.
StackPath (ранее MaxCDN) — один из самых популярных сервисов.
Сервисы
CDN обычно предлагают плагин WordPress, поэтому вы можете легко интегрировать его на свой сайт.А если это не так, плагины кеширования, такие как WP Rocket или плагин, например CDN Enabler, позволят вам подключить службу CDN к вашему сайту WordPress.
4. Добавьте плагин отложенной загрузки
Логика, лежащая в основе техники отложенной загрузки, заключается в загрузке изображений на ваш сайт непосредственно перед тем, как они должны появиться в области просмотра браузера. Или, что проще: прямо перед тем, как пользователь увидит их.
При отложенной загрузке изображение в нижней части вашего сайта будет загружаться, когда пользователь приблизится к нижней части вашего сайта, а не во время загрузки сайта.
Если одновременно загружается меньше изображений, это означает огромную экономию полосы пропускания и лучшую производительность. Изображения будут загружаться только при необходимости, когда это необходимо.
Есть много способов применить отложенную загрузку к вашему сайту. Если вы используете одну из наших тем WordPress, они уже делают это во многих частях, например, с избранными изображениями в модулях Blog, Magazine и Display.
Самый простой способ добавить ленивую загрузку в WordPress, не касаясь строчки кода, — это использовать такой плагин, как Lazy Load от WP Rocket.
Если ваш сайт содержит страницы с изображениями, например каталоги, галереи и т. Д., Попробуйте. Просто установите его и следуйте их инструкциям.
Резюме
Если вы используете изображения на своем сайте — в чем, я уверен, — вы обязательно должны оптимизировать их.
Это улучшит производительность вашего сайта, оптимизирует поисковую оптимизацию и сделает его удобнее для пользователей.
Какой из этих методов вы попробуете?
Сравнение 7 лучших онлайн-инструментов для оптимизации изображений (реальные тестовые данные)
В этом посте мы собрали семь отличных онлайн-инструментов для оптимизации изображений, которые позволяют сжимать файлы JPG, PNG и GIF прямо из веб-браузера.
Помимо обмена информацией о каждом инструменте, мы также поделимся реальными тестовыми данными для тестового изображения в формате JPG и PNG, чтобы дать вам представление об экономии размера файла, которую может предложить каждый инструмент.
Тестирование и сравнение семи лучших онлайн-инструментов для оптимизации изображений
Онлайн-инструменты оптимизатора изображений помогают сжимать изображения или изменять тип файла без ощутимой потери качества.
Чтобы дать вам представление о том, насколько возможно сжатие, мы протестировали некоторые онлайн-инструменты оптимизатора изображений.При работе с двумя изображениями — одним JPG (размер файла примерно 238 КБ) и другим PNG (примерно 118 КБ) — вот что мы обнаружили:
Инструмент сжатия | JPG Сжатие файла изображения (исходный размер файла — 238 КБ) | Уменьшение в процентах в файле JPG | Сжатие файла изображения PNG (исходный размер файла — 118 КБ) | Уменьшение в процентах в файле PNG |
---|---|---|---|---|
Оптимизатор JPEG | 79,1 КБ | 66% | NA | NA |
Кракен | 206.59 КБ (без потерь) 69,77 КБ (с потерями) | 11,32% (без потерь) 70,05% (с потерями) | 64,68 КБ (без потерь) 28,56 КБ (с потерями) | 44,06% (без потерь) 75,30% (с потерями) |
Крошечный PNG | 162,9 КБ | 32% | 29,9 КБ | 75% |
JPEG.io | 81,51 КБ | 65% | 85,04 КБ | 17% |
ImageRecycle | 118,88 КБ | 48.97% | 24,78 КБ | 78,57% |
Compressor.io | 122,12 КБ | 49% | 22,80 КБ | 81% |
Ezgif | 119,26 КБ | 48,81% | 60,56 КБ | 47% |
Теперь давайте рассмотрим инструменты более подробно…
1. Оптимизатор JPEG
JPEG Optimizer — одно из первых решений, которое проверяет, все ли вам нужно, это сжимать изображения JPEG.
Большинство из нас должно быть в порядке со сжатием по умолчанию 65, хотя веб-сайт может сжимать изображения где угодно между 0-99. Используя только настройки по умолчанию, я смог уменьшить размер файла на 66%.
При желании вы также можете просматривать данные EXIF (время, дату и производитель камеры) и изменять размер изображений. А затем продолжайте добавлять эффекты, такие как подписи, границы или тени. Как только инструмент сжимает изображение, вы можете скачать его и использовать где угодно.
Степень сжатия:
👉 Сохранение файла изображения JPEG — 66%
2.Кракен
Kraken дает вам выбор режимов сжатия:
- Lossless — без потерь качества.
- Lossy — небольшое снижение качества, но уменьшает размер файла изображения почти на 90%.
Изображения с потерями будут работать нормально для большинства пользователей, но профессионалы, которые хотят сохранить 100% визуальной информации, должны выбрать без потерь (например, фотографы ) .
Kraken позволяет оптимизировать не только JPEG, но также PNG и GIF.Файлы размером до 1 МБ оптимизируются бесплатно, файлы большего размера требуют наличия пакета Pro.
Пакет Pro начинается с 5 долларов в месяц и также предлагает дополнительные функции. Он может получать файлы изображений из нескольких источников, таких как список URL-адресов или zip-архив. Это еще не все, он может возвращать оптимизированные изображения в zip-файле, захватывать все изображения с вашего веб-сайта, организовывать их в папки, изменять размер изображений, сохранять их в облаке Kraken и сохранять статистику ваших оптимизаций. Бесплатный плагин упрощает все для пользователей WordPress.
Степень сжатия:
👉 Сохранение файла изображения JPEG — 11,32% (без потерь), 70,05% (с потерями)
👉 Сохранение файла изображения PNG — 44,06% (без потерь), 75,03% (с потерями)
3. Крошечный PNG
Надежный инструмент Tiny PNG с легкостью обрабатывает сжатие изображений в форматах JPEG и PNG, позволяя массово загружать до 20 изображений за один раз. Размер каждого файла может достигать 5 МБ. Для больших файлов вы должны быть платежеспособным клиентом.
После сжатия изображения можно загрузить на компьютер или сохранить в Dropbox.Tiny PNG также упрощает работу пользователей WordPress с помощью бесплатного плагина. Чтобы сравнить плагины оптимизации изображений для WordPress, посмотрите нашу предыдущую публикацию.
Степень сжатия:
👉 Сохранение файла изображения JPEG: 32%
👉 Сохранение файла изображения PNG: 75%
4. JPEG.io
Чтобы конвертировать изображения любого формата в JPEG, вы можете попробовать JPEG.io. Он обрабатывает больше типов изображений, чем большинство онлайн-инструментов для оптимизации изображений. Чтобы использовать его, вы перетаскиваете и загружаете файлы PNG, GIF, SVG или даже PSD на их веб-сайт.Сначала инструмент конвертирует изображения в JPEG, а затем сжимает их, прежде чем вернуть изображения вам.
Инструмент также может забирать файлы изображений с вашего Google Диска или Dropbox и возвращать вам оптимизированные файлы JPEG в виде zip-архива.
Степень сжатия:
👉 Сохранение файла изображения JPEG: 65%
👉 Сохранение файла изображения PNG: 17%
5. ImageRecycle
Если у вас есть изображения в нескольких форматах, которые нужно оптимизировать, ImageRecycle будет лучшим выбором.Не только PNG или JPEG, этот инструмент поддерживает даже файлы GIF и PDF. Вы можете перетаскивать изображения на веб-сайт и загружать оптимизированные изображения одним щелчком мыши.
Одна полезная вещь в ImageRecycle заключается в том, что он дает вам бесплатный отчет о вашем веб-сайте с подробной информацией об изображениях, которые нуждаются в оптимизации. Просто введите URL своего веб-сайта, чтобы получить этот отчет.
Чтобы получить доступ к таким функциям, как URL или Оптимизатор страниц, вам нужно выбрать их планы единовременных платежей. Вы можете выбрать любую из ценовых категорий: 10 долларов (10 000 изображений), 20 долларов (30 000 изображений) и 50 долларов (100 000 изображений).
Существует 15-дневная бесплатная пробная версия с ограничением в 100 МБ, чтобы помочь вам принять решение. После оплаты вы можете использовать свою квоту в течение года на неограниченном количестве веб-сайтов с любым количеством дополнительных учетных записей. Месячное резервное копирование и восстановление включены. Пользователи WordPress, Magento и Joomla могут полагаться на расширения вместо того, чтобы каждый раз посещать веб-сайт, в то время как пользователи Shopify получают эксклюзивное приложение.
Степень сжатия:
👉 Сохранение файла изображения JPEG: 48.97%
👉 Сохранение файла изображения PNG: 78.57%
6. Compressor.io
Если вам нужен высокий уровень сжатия, который может сэкономить сотни КБ, внимательно присмотритесь к Compressor.io. Это может уменьшить размер файла почти на 90%. Он сжимает изображения JPEG и PNG без потери пикселей, а также сжатие с потерями для других типов файлов. Однако размер файла не может превышать 10 МБ.
Классный слайдер позволяет сравнивать исходные и оптимизированные изображения бок о бок. Вы можете скачать файл и сохранить его на Google Диске или Dropbox.
Степень сжатия:
👉 Сохранение файла изображения JPEG: 49%
👉 Сохранение файла изображения PNG: 81%
7. Ezgif
Хотя название может предполагать иное, Ezgif — это универсальный онлайн-оптимизатор изображений. Вы можете использовать его для работы с вашими GIF, PNG и JPG.
В отделе GIF Эзгиф поднимает планку на новый уровень. Это позволяет вам много повозиться с GIF-файлами, в том числе создавать, изменять размер, обрезать или оптимизировать их. Вы сможете создавать GIF-файлы с использованием изображений JPEG, PNG и других, а также загружать до 2000 файлов, хотя общий размер ограничен 100 МБ.
Кроме того, оптимизация PNG и JPG также довольно эффективна. Вы также можете внести в свое изображение несколько простых изменений перед оптимизацией, например повернуть, обрезать, добавить наложение и многое другое. Что касается самой оптимизации, это неплохо.
Степень сжатия:
👉 Сохранение файла изображения JPEG: 49%
👉 Сохранение файла изображения PNG: 47%
Заключительные мысли о лучших онлайн-инструментах для оптимизации изображений
Согласно нашим результатам, Kraken предлагает самое высокое сжатие для изображений JPG, в то время как Compressor.io победил, когда дело доходит до файлов PNG. Вы можете просмотреть сводку наших результатов еще раз ниже:
Инструмент сжатия | JPG Сжатие файла изображения (исходный размер файла — 238 КБ) | Уменьшение в процентах в файле JPG | Сжатие файла изображения PNG (исходный размер файла — 118 КБ) | Уменьшение в процентах в файле PNG |
---|---|---|---|---|
Оптимизатор JPEG | 79,1 КБ | 66% | NA | NA |
Кракен | 206.59 КБ (без потерь) 69,77 КБ (с потерями) | 11,32% (без потерь) 70,05% (с потерями) | 64,68 КБ (без потерь) 28,56 КБ (с потерями) | 44,06% (без потерь) 75,30% (с потерями) |
Крошечный PNG | 162,9 КБ | 32% | 29,9 КБ | 75% |
JPEG.io | 81,51 КБ | 65% | 85,04 КБ | 17% |
ImageRecycle | 118,88 КБ | 48.97% | 24,78 КБ | 78,57% |
Compressor.io | 122,12 КБ | 49% | 22,80 КБ | 81% |
Ezgif | 119,26 КБ | 48,81% | 60,56 КБ | 47% |
💡 И последнее, но не менее важное: если вы владелец веб-сайта и просто хотите получить эффективный инструмент для оптимизации всех изображений на этом веб-сайте, обратите внимание на Optimole. Это наш оптимизатор изображений по принципу «установил и забыл», который работает на полном автопилоте.
У вас есть вопросы о том, как лучше всего использовать эти онлайн-инструменты для оптимизации изображений? Дайте нам знать в комментариях, и мы постараемся помочь!
Бесплатный гид
5 основных советов по ускорению
вашего сайта WordPress
Сократите время загрузки даже на 50-80%
, просто следуя простым советам.
Оптимизировать изображения | GTmetrix
Обзор
Уменьшите время загрузки страниц, загрузив изображения подходящего размера.
- Уменьшить размер файла в зависимости от того, где будут отображаться изображения
- Измените размер файлов изображений самостоятельно, а не через CSS
- Сохранение файлов в соответствующем формате в зависимости от использования
- Соотношение затрат и выгод: высокое значение
- Требуется доступ
Какова оценка вашего сайта по этой рекомендации?
Что такое оптимизация изображений для Интернета?
Изображения, которые вы создаете в таких программах, как Photoshop и Illustrator, выглядят потрясающе, но часто файлы имеют очень большие размеры.Это потому, что изображения сделаны в формате, который упрощает манипулирование ими различными способами.
Если размер файла превышает пару мегабайт на изображение, если вы разместите эти файлы на своем веб-сайте, загрузка будет очень медленной.
Оптимизация изображений для Интернета означает сохранение или компиляцию изображений в удобном для Интернета формате в зависимости от того, что изображение содержит.
Изображения содержат данные, отличные от пикселей, которые мы видим на экране. Эти данные могут увеличить ненужный размер изображения, что приведет к увеличению времени загрузки, так как пользователь ждет загрузки изображения.
С точки зрения соотношения затрат и выгод оптимизация изображений должна быть в верхней части оптимизации скорости страницы, если вы еще не оптимизировали их.
Как это работает?
Проще говоря, оптимизация изображения заключается в удалении всех ненужных данных, которые хранятся в изображении, для уменьшения размера файла изображения в зависимости от того, где оно используется на вашем веб-сайте.
Оптимизация изображений для Интернета может уменьшить общий размер загружаемой страницы до 80%.
Есть две формы сжатия, которые нам нужно понять: с потерями и без потерь.
Изображения, сохраненные в формате с потерями, в несжатом виде будут немного отличаться от исходного изображения. Имейте в виду, что это видно только при очень близком рассмотрении. Сжатие с потерями хорошо для Интернета, потому что изображения используют небольшой объем памяти, но могут быть достаточно похожи на исходное изображение.
Изображения, сохраненные в формате без потерь, содержат всю информацию, необходимую для создания исходного изображения.По этой причине эти изображения несут намного больше данных и, в свою очередь, имеют очень большой размер файла.
Мы также можем оптимизировать изображения для Интернета, сохраняя их с соответствующими размерами. Изменение размера изображения на самой веб-странице с помощью CSS полезно, но проблема в том, что веб-браузер все равно загрузит весь исходный файл, а затем изменит его размер и отобразит.
Можете ли вы представить, как взять изображение размером с плакат и использовать его в качестве эскиза? Небольшое изображение размером 20 пикселей на 20 пикселей будет загружаться столько же, сколько и исходный постер, тогда как мы могли бы просто загружать изображение размером 20 пикселей все время.
Почему это важно?
Основная причина того, почему так важно оптимизировать ваши изображения, заключается в том, что 90% большинства веб-сайтов зависят от графики и, следовательно, существует много файлов изображений. Если оставить эти изображения несжатыми и в неправильном формате, это может значительно замедлить загрузку вашей веб-страницы.
Как оптимизировать изображения
Полная оптимизация изображений может быть настоящим искусством совершенствования, поскольку существует огромное количество разнообразных изображений, с которыми вы можете иметь дело.Вот наиболее распространенные способы оптимизации ваших изображений для Интернета.
- Уменьшите пустое пространство вокруг изображений — некоторые разработчики используют пробелы для заполнения, что является большим запретом. Обрежьте изображения, чтобы удалить все пробелы вокруг изображения, и используйте CSS для заполнения.
- Используйте правильные форматы файлов. Если у вас есть значки, маркеры или любая графика, в которой не слишком много цветов, используйте такой формат, как GIF, и сохраните файл с меньшим количеством цветов. Если у вас более подробная графика, используйте формат файла JPG, чтобы сохранить изображения и снизить качество.
- Сохраните изображения в нужных размерах. Если вам нужно использовать HTML или CSS для изменения размера изображений, остановитесь прямо здесь. Сохраните изображение в желаемом размере, чтобы уменьшить размер файла.
Чтобы изменить размер ваших изображений, вам нужно будет использовать некоторую форму программы. Для базового сжатия вы можете использовать простую программу редактирования, такую как GIMP. Для более продвинутой оптимизации вам нужно будет сохранить определенные файлы в Photoshop, Illustrator или Fireworks.
Прочтите нашу документацию Lighthouse, чтобы узнать больше об оптимизации изображений.
Какие инструменты использует PageSpeed для проверки этой рекомендации?
Для файлов JPEG: libjpeg-turbo, а для PNG / GIF: OptiPNG.
15 лучших бесплатных инструментов оптимизации изображений для сжатия изображений
, Александра Бейтман, 23 апреля 2021 г.
Хотите сжать изображения перед загрузкой в Интернет? Оптимизация изображений для веб-сайта с фотографиями поможет ему быстрее загружаться. А более высокая скорость загрузки означает лучший рейтинг в поисковых системах! В этом руководстве мы поделимся лучшими бесплатными инструментами оптимизации изображений для сжатия изображений.
Многие программы для редактирования фотографий, например Adobe Photoshop, оптимизируют изображения. Но, в зависимости от вашего бюджета, эти программы могут быть вам не по карману. К счастью, существует множество бесплатных онлайн-инструментов, которые дают потрясающие результаты.
Почему нужно оптимизировать изображения? Полноразмерные изображения значительно увеличивают время загрузки вашей веб-страницы, что раздражает ваших пользователей. Фактически, исследования показали, что пользователи уходят со страниц, если им требуется более 3 секунд для загрузки! Оптимизация изображений значительно поможет ускорить работу вашего сайта, чтобы вы могли удерживать пользователей на своем сайте.
Давайте взглянем на лучшие бесплатные инструменты оптимизации изображений для сжатия изображений:
1. Оптимизатор JPEG
Оптимизатор JPEG позволяет загружать и сжимать фотографии в Интернете. Этот простой инструмент работает, как следует из названия, только с файлами JPEG.
Что хорошего в оптимизаторе JPEG, так это то, что он позволяет изменить размер изображений перед оптимизацией. Изменение размера изображений сэкономит вам еще больше времени на загрузку, а с этой онлайн-платформой вам не придется разбивать рабочий процесс на два этапа.
JPEG Optimizer также позволяет выбрать собственный уровень оптимизации, что позволяет контролировать качество оптимизированного изображения. Эта функция особенно важна для фотографов, поскольку вам нужно найти золотую середину между сохранением качества и экономией места.
2. Optimizilla
Optimizilla позволяет воспроизводить изображения высокого качества с минимально возможным размером файла. С помощью этого инструмента вы можете сжимать как свои фотографии в формате JPEG, так и PNG.
Optimizilla также имеет слайдер, который показывает версию фотографии до и после.Таким образом, вы можете предварительно просмотреть качество изображения, прежде чем продолжить. С помощью ползунка вы можете решить, насколько вы хотите оптимизировать изображение, прежде чем ощутите заметную потерю качества.
Этот онлайн-инструмент отлично подходит для пакетной обработки. Optimizilla позволяет загружать до 20 изображений за раз и устанавливать уровень сжатия для каждой фотографии отдельно.
К сожалению, поскольку Optimizilla работает только с файлами JPEG и PNG, вы не сможете использовать его для оптимизации ваших PDF-файлов.Некоторые другие из этого списка лучше подходят для оптимизации PDF.
3. Kraken.io
Kraken.io — еще один оптимизатор массовых изображений. С Kraken.io вы можете оптимизировать большие объемы файлов JPEG, PNG и анимированных GIF.
В отличие от других оптимизаторов изображений в этом списке, Kraken.io оптимизирует ваши файлы до минимального размера. То есть с Kraken.io вы всегда будете получать наименьшего размера файла версии введенного вами изображения. Затем вы можете загружать сжатые фотографии по одной или в формате.zip формат.
Kraken.io также позволяет экспортировать файлы в Dropbox или импортировать файлы из Box, Dropbox или Google диска.
Если вам нужны более продвинутые функции, Kraken.io предлагает профессиональную версию, которая поставляется с множеством других преимуществ, таких как возможность изменения размера изображения, возможность ввода нескольких источников изображений одновременно, загрузка изображений неограниченного размера и многое другое.
Бесплатная версия позволяет сжимать файлы фотографий размером до 32 МБ каждый и до 100 МБ фотографий.На самом деле, насколько хорошо Kraken.io будет работать для вас, зависит от начального размера изображений, которые вы хотите оптимизировать.
4. Optimole
Optimole — популярный плагин для сжатия и оптимизации изображений, созданный теми же людьми, что и ThemeIsle.
Он может сжимать, изменять размер, отложенную загрузку и размещать ваши изображения на их CDN.
Конечно, услуги SAAS не бесплатны, но есть бесплатный план Optimole, чтобы вы могли начать работу с их системой.
Самое приятное то, что вы можете установить плагин WordPress на свой сайт и легко оптимизировать изображения, не прикладывая особых усилий.
Пусть катится за кадром.
5. ImageRecycle
ImageRecycle сжимает изображения JPEG, PNG, GIF и PDF с впечатляющими результатами. Их интерфейс перетаскивания позволяет перетаскивать фотографии с рабочего стола в оптимизатор для упрощения рабочего процесса.
Сайт также предлагает бесплатный анализ сайта. Когда вы запрашиваете анализ, ImageRecycle возвращает бесплатный отчет, разработанный, чтобы помочь вам понять, какие изображения на вашем сайте выиграют от оптимизации для повышения его производительности.
ImageRecycle имеет плагин WordPress, приложение Shopify, расширение Joomla и расширение Magento. Если вы используете какой-либо из этих сайтов, вы можете использовать расширения ImageRecycle для сжатия изображений вместо перехода на отдельный сайт.
С ImageRecycle вы получаете доступ к 15-дневной бесплатной пробной версии с ограничением в 100 МБ. После этого вы можете выбрать платный план — 10 долларов за 1 ГБ, 20 долларов за 3 ГБ и 50 долларов за 10 ГБ.
6. CompressNow
CompressNow — еще один простой в использовании инструмент оптимизации, который позволяет выполнять массовую загрузку .Просто загрузите изображения JPEG, PNG и GIF со своего компьютера, установите коэффициент сжатия для изображений и загрузите их для использования на своем сайте.
Одновременно можно перетаскивать до 10 изображений. Но, в отличие от Optimizilla, CompressNow применяет один уровень оптимизации ко всем загружаемым вами фотографиям. Если все они требуют одинакового уровня сжатия, CompressNow сделает вашу работу еще проще!
7. Обрезка
Обрезка позволяет пользователям Linux удалять EXIF и метаданные из изображений.Этот инструмент сжатия изображений затем сжимает ваши изображения JPEG и PNG до максимально возможного уровня.
Если вы пользователь Mac или ПК, другие варианты из этого списка лучше подойдут для вашей системы. Trimage лучше всего подходит для пользователей Linux .
8. Онлайн-оптимизатор изображений
Онлайн-оптимизатор изображений, продукт Dynamic Drive, помогает легко оптимизировать изображения всех основных форматов, чтобы ваши фотографии быстрее загружались на ваш веб-сайт.
Этот инструмент также включает функции преобразования изображений, которые могут помочь вам превратить ваши JPEG-файлы в PNG для использования в Интернете.
В отличие от некоторых других оптимизаторов изображений, Online Image Optimizer также позволяет загружать изображения через URL-адрес . Это означает, что вы можете оптимизировать изображения уже на своем веб-сайте! В конечном итоге это сэкономит ваше время и усилия по замене старого образа на оптимизированную онлайн-версию.
Online Image Optimizer позволяет загружать только одно изображение за раз, и это изображение может иметь максимальный размер файла 2,86 МБ.
9. Tiny PNG
Tiny PNG — один из старейших и самых популярных бесплатных инструментов для оптимизации изображений.Этот онлайн-инструмент с множеством возможностей сжатия изображений для вашего сайта отлично подходит для файлов изображений JPEG и PNG.
Позволяет загружать до 20 изображений за один раз и до 100 изображений в месяц. Размер каждого изображения не может превышать 5 МБ, но для большинства это не проблема. После сжатия вы можете загрузить сжатые изображения на свой компьютер или легко сохранить их в Dropbox.
Tiny PNG также предлагает плагин WordPress и расширение Magento, так что вам не нужно уходить с собственного веб-сайта, чтобы сжать изображения.
10. Изменить размер фотографий
Изменить размер фотографий — еще один бесплатный инструмент сжатия изображений для оптимизации изображений. Вы также можете использовать Изменить размер фотографий до , чтобы изменить размер изображений для использования на вашем сайте, в электронной почте или на форумах.
Просто загрузите изображения на онлайн-страницу и установите уровень сжатия от 1 до 100. Затем загрузите сжатые фотографии!
Вы также можете использовать их сайт для применения эффектов изображения из их галереи в процессе оптимизации.Эти эффекты включают подписи, фотоэффекты, границы, отражения, тени и закругленные углы.
11. GiftOfSpeed
GiftOfSpeed предлагает множество инструментов сжатия для оптимизации изображений PNG и JPEG. Он применяет несколько методов сжатия изображений, чтобы минимизировать размеры файлов до минимально возможных.
С помощью GiftOfSpeed вы также можете изменять размер изображений для повышения производительности в Интернете.
Обратной стороной этого инструмента является то, что вы можете загружать несколько файлов только для оптимизации PNG, но не для оптимизации JPG.
12. Compressor.io
Compressor.io гарантирует, что вы не потеряете качество изображения, а также достигнете высоких уровней сжатия.
Это удивительный инструмент, известный своей гибкостью, позволяющий легко оптимизировать файлы JPEG, PNG, GIF и SVG. Compressor.io имеет возможность уменьшать размер файлов до 90% и более!
Еще раз, недостаток Compressor.io заключается в его ограничениях на загрузку. Вы не можете использовать Compressor.io для оптимизации более одного файла изображения за раз.
13.JPEGmini
JPEGmini отправляет ваши изображения на диету! Он уменьшает размер файла ваших изображений, поэтому вы можете наслаждаться максимальной скоростью загрузки изображений в Интернете. У него лучший интерфейс, чем у некоторых других вариантов, с возможностью обновления до версии Pro.
Загрузите изображение, затем используйте ползунок для просмотра версий фотографии до и после. Вы увидите, что JPEGmini сохраняет качество изображения после сжатия.
14. Конвертировать изображение
Конвертировать изображение позволяет сжимать изображения JPEG на ходу.Этот онлайн-инструмент оптимизации изображений позволяет конвертировать фотографии JPEG в другие форматы изображений, такие как BMP, GIF, ICO, PNG и другие. Он даже имеет встроенных настроек , которые могут перевернуть ваше изображение, обрезать, выпрямить изображение и многое другое.
15. PNGGauntlet
PNGGauntlet работает специально с файлами изображений PNG. Это загружаемое программное обеспечение в сочетании с несколькими компрессорами, такими как PNGOUT, OptiPNG и DeflOpt, позволяет сжимать изображения, не влияя на качество изображения . Он также будет работать для преобразования и сжатия файлов JPG, GIF, TIFF и BMP в файлы PNG.
С другой стороны, оптимизация занимает немного больше времени, чем некоторые другие варианты.
Мы надеемся, что это руководство помогло вам найти лучшие бесплатные инструменты оптимизации изображений для сжатия изображений. После того, как вы оптимизировали фотографии своего веб-сайта, вы можете ознакомиться с нашими популярными руководствами по оптимизации:
Или попробуйте наши лучшие статьи для получения дополнительной информации о фотографии и редактировании фотографий:
Если вам понравилось это руководство, подпишитесь на нашу рассылка новостей по электронной почте.Затем подпишитесь на нас в Facebook и Twitter, чтобы получить больше бесплатных советов по фотографии, руководств по редактированию фотографий и ресурсов WordPress.
Используете WordPress и хотите получить Envira Gallery бесплатно?
Envira Gallery помогает фотографам создавать красивые фото и видео галереи всего за несколько кликов, чтобы они могли демонстрировать и продавать свои работы.
8 полезных советов по оптимизации изображений в электронной коммерции
Вы когда-нибудь задумывались, почему изображение вашего продукта не отображается, когда вы выполняете поиск своего продукта в Google?
Интересно, может ли это большое изображение продукта на новой целевой странице замедлить загрузку ваших клиентов?
А как насчет конверсий? Страдают ли ваши веб-конверсии из-за того, что вы не оптимизировали свои изображения?
Неоптимизированные изображения могут отрицательно повлиять на производительность сайта и, следовательно, на конверсии.
А что с удержанием клиентов?
Увеличение удержания клиентов всего на 5% может увеличить прибыль на 95%.
А привлечь нового клиента в 5–25 раз дороже, чем удержать существующего!
Большинство маркетологов не программисты и не дизайнеры. Но это не значит, что вы не должны понимать основы технологии, которая играет такую огромную роль в ваших конверсиях и удержании.
Это означает, что вы должны абсолютно точно знать, как оптимизировать изображение.
Вот почему так важно понимать оптимизацию изображений:
Поскольку на изображения приходится больше байтов, чем на любую другую часть веб-сайта, особенно на сайты электронной коммерции, их размер и сложность могут повлиять на производительность вашей сети.
И это влияет на удержание клиентов и конверсию.
Вот почему оптимизация изображений — один из лучших способов улучшить производительность веб-сайта и повысить рейтинг в поисковой выдаче.
Взгляните на график ниже из архива HTTP.По состоянию на март 2018 года изображения составляют 50% контента веб-сайта.
Как видите, оптимизация изображений должна быть главным приоритетом для любого маркетолога, особенно для маркетологов, стремящихся превратить посетителей в покупателей на своем веб-сайте.
В этой статье я научу вас восьми основным способам оптимизации изображений. Эти приемы оптимизации улучшат ваши конверсии, SEO-рейтинг, удержание клиентов и многое другое.
1. Ознакомьтесь с различными типами файлов
Вы не можете решить, какой тип файла использовать, если не понимаете, какой тип файла — это , верно?
PNG, JPEG, GIF.
Маркетологи знают, что эти типы файлов существуют. И все мы любим хорошие гифки.
Но опять же, маркетологи часто не являются разработчиками или экспертами в области дизайна. И чем больше становится маркетинг, ориентированный на технологии, тем важнее становится знакомство с некоторыми основами.
Цель этих типов файлов — понять, какие из них принесут больше пользы при меньшем объеме места.
Поскольку все дело в сокращении времени загрузки для ваших клиентов, вам необходимо знать, какие типы файлов лучше всего подходят для изображений на вашем сайте.
Давайте рассмотрим некоторые плюсы и минусы трех основных типов файлов.
JPEG или JPG (Объединенная группа экспертов по фотографии)
Файлы JPEG
часто используются для фотографий и изображений, поскольку в них сочетаются синий, красный и зеленый свет, что позволяет отображать миллионы цветов.
Файлы других типов часто не позволяют отображать все цвета в изображении.
Еще одно огромное преимущество файла JPEG состоит в том, что вы можете регулировать размер файла.
Когда вы настраиваете размер файла JPEG, вы также регулируете качество.Чем выше качество, тем больше размер файла. Но часто можно найти хороший баланс качества изображения и размера.
Очень важно, чтобы размеры файлов не были слишком большими. Это приводит к замедлению загрузки, отталкиванию клиентов и увеличению показателя отказов.
Когда следует использовать JPEG?
- Скорее всего на всех изображениях ваших товаров
- Фото изображений
- Многоцветные изображения
Нравится эти фотографии продуктов от Zappos:
GIF (формат обмена графическими данными)
Пару лет назад, когда Apple и Android внедрили GIF-изображения в клавиатуру телефона, крошечные видеоролики стали всеобщим любимым способом самовыражения.
Но GIF-файлы — это больше, чем просто забавные видеоролики — это сжатые версии фотографий или видеороликов. Эти маленькие сжатые видео позволяют отображать на изображении только 256 цветов.
Изображение высокого качества может содержать тысячи цветов.
Это означает, что GIF-файлы не лучший выбор для изображений с большим количеством вариаций цвета. Но GIF-файлы — единственный выбор для анимации, поскольку они позволяют анимацию без огромного размера файла.
Когда следует использовать GIF?
- Для всей анимации
- Маленькие изображения (например, эскизы или значки)
- Изображение, состоящее только из пары цветов (например, ваш логотип)
Нравится для Google:
PNG (переносимая сетевая графика)
PNG новее, чем JPEG и GIF.Обычно они больше по размеру, чем файлы JPEG, но лучше по качеству. Они также обеспечивают некоторую гибкость, поскольку имеют два разных типа файлов:
- PNG-8: файл меньшего размера, который позволяет использовать те же 256 цветов, что и GIF.
- PNG-24: этот тип позволяет использовать миллионы цветов. Это также лучший формат для изображений, где качество важнее размера файла.
Когда следует использовать файлы PNG?
- Когда качество изображения важнее размера файла
Поставьте лайк эти фотографии с сайта Зены Холлоуэй:
Совет от профессионалов: Используйте JPEG для ярких и ярких изображений, используйте PNG для простых изображений.Используйте GIF, когда что-то нужно анимировать.
Маркетологи электронной коммерции почти всегда должны использовать JPEG для фотографий товаров. Просто взгляните на сравнение типов файлов ниже.
JPEG предлагает надежный баланс между размером файла и качеством.
2. Установите нужный размер файла изображения для увеличения конверсии
Между «размером изображения» и «размером файла» огромная разница.
Когда мы говорим «размер изображения», мы имеем в виду размеры изображения, например 852 x 852.
Когда мы говорим о размере файла, мы имеем в виду объем места, необходимый для хранения изображения на вашем сервере.
Чем больше размер файла, тем дольше загружается изображение.
Изображение может иметь большие размеры, но не более 2 МБ.
Размер файла имеет большое значение. Это может повысить или снизить производительность вашего сайта, потому что каждое изображение должно загружаться при каждом посещении вашего сайта.
Ваша цель — сохранить размер изображений от 1 до 2 МБ.Чем меньше размер вашего изображения, тем выше скорость загрузки, что означает меньший показатель отказов и больше довольных клиентов.
Как изменить размер файла изображения, чтобы он был оптимизирован для работы в Интернете:
Если у вас нет фотошопа, не беспокойтесь. Pixlr — это быстрый способ изменить размер файла изображения.
Сначала перейдите в PIXLR и щелкните редактор:
Затем запустите Pixlr Editor или Pixlr Express. Если вы просто делаете быстрое изменение размера, Pixlr Express отлично подойдет.
Затем загрузите изображение в редактор.
Наконец, отрегулируйте размер, сохранив изображение. При переключении полосы качества изображения обратите внимание, что размер файла также увеличивается или уменьшается в зависимости от выбранного вами качества.
Когда дело доходит до выбора файла нужного размера для нужного вам качества, возможно, вам придется немного поэкспериментировать с ним.
Примерьте несколько размеров и выбирайте файл наименьшего размера, который все равно выглядит хорошо.
Как только вы определите соотношение размера и качества, вы можете применить его к похожим изображениям в вашем магазине.
Было бы неплохо записать где-нибудь это соотношение.
3. Назовите файлы правильно, чтобы улучшить SEO
Как вы назовете свои изображения, имеет значение для поисковых роботов.
Многие маркетологи не меняют название изображения на случайное число или код, присвоенный нашими компьютерами или телефонами.
Важно дать вашему изображению описательное и конкретное имя, чтобы поисковые роботы могли понять, что показывает изображение.
Например, изображение щенка слева имеет гораздо лучшее имя, чем изображение справа:
Ничего не противоречит изображению 89374504, но не сообщает нам или роботам Google, что это за изображение.
Отличное имя изображения является описательным, содержит ключевое слово вашего изображения (например, corgis для принятия в Нью-Йорке.
Если вы продаете синие замшевые туфли, то в названии изображения должны быть синие замшевые туфли.
Сделайте это простым и информативным, чтобы получить наилучшие результаты SEO от ваших изображений.
4. Сделайте свой сайт доступным для всех клиентов с помощью тегов alt
Alt-теги — это описания изображения, которое существует в коде вашего веб-сайта. По сути, это означает, что то, что изображено, записано в код вашего веб-сайта.
Alt-теги помогают 3 ключевыми способами:
- Люди с ослабленным зрением, использующие программы чтения с экрана, знают, что это за изображение, благодаря атрибуту alt. Когда они удерживают курсор над изображением, программа чтения с экрана может буквально прочитать им описание атрибута alt.
- Это строка кода, которая сообщает браузеру, что должно быть там, если изображение не загружается должным образом. Это пригодится, если у вашего сайта проблемы с загрузкой.
- поисковых роботов, что помогает улучшить ваше SEO.
Их читают
Например, альтернативный текст для этого ограниченного выпуска Golden Citrus Foaming Hand Wash — «пенящееся средство для мытья рук».
Основная цель атрибутов alt — сделать их описательными, простыми и точными. Очень похоже на имя файла.
Установка альтернативного текста в WordPress
Когда вы загружаете изображение на веб-сайт, размещенный на WordPress, у вас будет возможность присвоить ему как заголовок, так и атрибут alt.
Если вы не создадите свой собственный тег alt, WordPress автоматически сделает тег alt таким же, как заголовок.
Это может быть хорошо или плохо, в зависимости от того, что вам нужно сообщить покупателю с ослабленным зрением.
Например, если имя вашего изображения — blue-boots, вы можете добавить еще несколько деталей к атрибуту alt. Типа, синие-туристические-ботинки-мужские-10-го размера.
Если вы хотите изменить или добавить атрибут alt, просто перейдите к настройкам изображения и переименуйте атрибут.
Альтернативные атрибуты необходимы всем, кто хочет полностью оптимизировать свой веб-сайт.Они улучшают пользовательский опыт, а также помогают с SEO.
5. Используйте карты сайта, чтобы ваши изображения заметили Google
Есть ли в вашем интернет-магазине галереи изображений? А как насчет всплывающих окон, таких как призыв к действию или подписка по электронной почте?
В наши дни потребители любят инфографику, мемы и видео. Угадай, что? Вы также должны добавить их в свою карту сайта.
Карта сайта позволяет оптимизировать эти изображения и видео для алгоритмов Google.
Так что же такое файл Sitemap? Процитирую Google:
«Карта сайта — это файл, в котором вы можете перечислить веб-страницы своего сайта, чтобы сообщить Google и другим поисковым системам об организации содержания вашего сайта.”
Позволяет поисковым роботам, таким как Googlebot, грамотно сканировать ваш сайт.
Другими словами, это файл, содержащий карту всего содержания вашего сайта.
Вот пример карты сайта:
Для видеозаписей необходимо указать:
- Название
- Описание
- URL страницы воспроизведения (расположение)
- URL эскиза
- URL-адрес необработанного видеофайла и / или URL-адрес видеопроигрывателя
Для записей изображений вы должны включить:
- Местоположение (Местоположение или URL-адрес, по которому находится изображение, является обязательным.Все остальные пули необязательны, но рекомендуются)
- Название
- Описание
- Подпись
- Лицензия
Ниже приведен образец карты сайта для видео от Zappos:
Если у вас много изображений и видео, вы можете создать отдельные карты сайта для каждого типа контента.
Файлы Sitemap
необходимы, и вы обязательно должны добавить свои изображения, видео и т. Д., Если хотите, чтобы ваш контент заметили роботы Google, Bingbots и другие сканеры поисковых систем.
Если ваш сайт размещен на WordPress, вы можете использовать Yoast SEO, который автоматически добавит ваш контент (изображения, видео и т. Д.) В карту сайта.
Если у вас еще нет Yoast SEO, его легко установить.
Затем, чтобы Yoast SEO добавил ваш контент в карту сайта, просто убедитесь, что кнопка включения включена, и сохраните изменения:
6. Оптимизируйте эскизы для увеличения продаж
Помните, когда вы купили этот потрясающий чехол для мобильного телефона сразу после обновления?
Вы, вероятно, нашли этот футляр внизу страницы подтверждения покупки сразу после того, как ваш платеж прошел.
Это уменьшенное изображение подкупило вас! Эти изображения — отличный способ рекламировать другие продукты вашим клиентам после того, как они совершили покупку, или когда они просматривают другие продукты.
Узнайте, как Amazon использует эскизы вверху, чтобы побудить клиентов щелкнуть похожие или похожие товары.
Допродажа — это надстройка, обновление или дополнительный продукт, который продавец представляет вам после первоначальной покупки.
Эскизы изображений часто отображаются по несколько одновременно внизу страницы.Как они отображаются в нижней части страницы продукта J.Crew.
Обычно целью является допродажа. Вы должны обязательно размещать сопутствующие товары ниже или выше корзины или страницы покупки и побуждать клиентов щелкать по ним.
Но если эти миниатюры не загружаются, вы упускаете массу потенциальных возможностей для бизнеса.
Как только клиент пришел на ваш сайт, скажем, по рекламе Google, вы уже заплатили за то, чтобы он туда попал. Таким образом, чем больше они покупают, тем ниже затраты на привлечение клиентов.
Итак, только потому, что они крошечные, не игнорируйте миниатюры как менее важные для прибыльности вашего бизнеса.
Они должны быть очень маленькими по размеру файла. Идеально менее 70 КБ.
Лучше всего в формате JPEG или GIF. Используйте Pixlr, если вам нужно изменить размер файлов.
И не забывайте давать названия миниатюрам. Им нужны твердые имена и атрибуты alt, как и на фотографиях ваших продуктов.
Оптимизация этих миниатюрных изображений поможет вам улучшить SEO и, надеюсь, увеличить прибыль, которую вы получаете от каждой веб-конверсии.
7. Сохраняйте технические и эстетические аспекты изображений
Важно понимать как технические, так и эстетические аспекты изображений на сайте электронной коммерции.
1. Технические изображения: Это изображения, на которых вы хотите сфокусироваться на размере изображения, типе файла, разрешении и т. Д. Примерно так:
Вы хотите, чтобы изображения ваших товаров были качественными изображениями в формате JPEG, не слишком большими по размеру файла (как мы обсуждали выше).
2. Эстетические изображения: Это изображения, на которых вы должны сосредоточиться на стиле продукта, цвете фона и т. Д. Возьмите это изображение, например:
Просто взгляните на эффект тени и чистый серый фон.
8. Тестовые изображения A / B для повышения конверсии и удержания
Маркетологи любят хороший A / B-тест, верно? Что ж, ваши изображения не должны быть исключением из правил.
Слишком много изображений, слишком медленное время загрузки или неправильный угол изображения могут снизить продажи вашей компании.
Вот несколько рекомендаций по тестированию изображений:
• Количество : тестируйте от множества до нескольких изображений для каждого продукта, для каждой категории, на странице и т. Д. Вы даже можете проверить, сколько эскизов нужно разместить под каждым продуктом.
Тестирование количества позволит вам определить, что лучше для ваших клиентов.
• Размер файла и качество : вы можете проверить, влияет ли более высокое качество и более медленное время загрузки на конверсию вашего сайта.
Например, если у вас есть более дорогой продукт, например дизайнерские сумки, ваши покупатели могут быть счастливы дождаться загрузки изображения более высокого качества.
Таким образом, они могут увеличивать и уменьшать масштаб и видеть каждую деталь перед покупкой.
• Проверьте, какие изображения нравятся вашим клиентам. : Возможно, ваши клиенты предпочитают видеть верх и сбоку вашей новейшей обуви.
Или, может быть, они обращаются чаще, когда у них меньше углов для изучения. Вы никогда не узнаете, пока не протестируете.
Помните, когда вы проводите A / B-тестирование, важно проверять только одну переменную за раз.
Например, если вы собираетесь проверить количество изображений на странице категории, не проверяйте качество изображения одновременно.
Если вы протестируете сразу несколько переменных, вы никогда не узнаете, какая из них привела к более высоким или низким конверсиям.
Прочтите эту статью, чтобы получить более подробное руководство по A / B-тестированию.
Вот несколько моих любимых инструментов оптимизации изображений
Благодаря всем этим новым хитростям по оптимизации изображений вам понадобятся инструменты, которые помогут вам в достижении ваших целей.
Вот список моих любимых инструментов, которые помогут вам в вашем путешествии.
Размер и качество изображения
Pixlr: как я уже упоминал выше, можно использовать этот бесплатный инструмент для редактирования изображений, а также для увеличения или уменьшения размера или качества файла JPEG.
ImageOptim: уменьшите размер файла за счет сжатия изображений без потери качества с помощью этого инструмента. (Только Mac)
Kraken: загружайте изображения сразу, сжимайте их все сразу и загружайте в виде zip-файла, чтобы сэкономить время.
Плагины WordPress
Yoast SEO: оптимизируйте поисковую оптимизацию изображений и доступность сайта за счет автоматического назначения атрибута alt.
ShortPixel: оптимизируйте размер изображения в WordPress
EWWW Image Optimizer: автоматическая оптимизация изображений при их загрузке на ваш сайт.
Заключение
Легко понять, почему существует множество инструментов для оптимизации изображений. Это может иметь огромное влияние на ваш бизнес.
Компании, занимающиеся электронной коммерцией, в частности, должны обращать внимание на размер своих изображений и имена файлов.
Это связано с тем, что на сайтах электронной коммерции обычно больше изображений, чем на сайтах других типов бизнеса, и они также полагаются на их изображения для получения конверсии.
Начните с описательного имени изображения и атрибута alt, которые сделают ваши изображения доступными для сканирования роботами Google, а также улучшат доступность сайта.
Затем создайте карту сайта, чтобы облегчить доступ сканерам поисковых систем.
Сохраняйте изображения минимально возможного размера без ущерба для качества, чтобы сократить время загрузки и помочь конвертировать больший объем трафика.
Оптимизируйте свои эскизы и используйте их для увеличения продаж ваших клиентов.
Наконец, A / B-тест для улучшения конверсии и удержания клиентов. Но обязательно проверяйте только одну переменную изображения за раз, чтобы знать, какие изменения оказывают влияние.
Внедрите эти восемь приемов по оптимизации изображений, и вы обязательно увидите улучшения в своем рейтинге и доходах.
Какие способы оптимизации изображений лучше всего подходят для вашего бизнеса?
Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт
- SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
- Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
- Paid Media — эффективные платные стратегии с четкой окупаемостью инвестиций.
Заказать звонок
TinyPNG — сжатие изображений PNG с сохранением прозрачности
Что делает TinyPNG?
TinyPNG использует интеллектуальные методы сжатия с потерями, чтобы на уменьшить размер файлов PNG на .За счет выборочного уменьшения количества цветов в изображении для хранения данных требуется меньше байтов. Эффект почти незаметен, но он очень сильно влияет на размер файла!
Почему я должен использовать TinyPNG?
PNG полезен, потому что это единственный широко поддерживаемый формат, который может частично хранить прозрачных изображений . Формат использует сжатие, но файлы могут быть большими. Используйте TinyPNG для сжатия изображений для ваших приложений и сайтов. Он будет использовать меньшую полосу пропускания и будет загружаться быстрее .
Кто-нибудь может отличить?
Отличный вопрос! Позвольте мне провести параллельное сравнение. Ниже представлены две фотографии моего двоюродного брата. Левое изображение сохраняется как 24-битный PNG прямо из Adobe Photoshop. Справа то же изображение, обработанное TinyPNG. Заметили разницу?
Исходный прозрачный PNG
Размер файла 57 КБ vsShrunk прозрачный PNG
Размер файла 15 КБ
Как это работает?
Отличный вопрос! Когда вы загружаете файл PNG (переносимая сетевая графика), похожие цвета в вашем изображении объединяются.Этот метод называется «квантованием». Уменьшая количество цветов, 24-битные файлы PNG можно преобразовать в гораздо меньшие 8-битные цветные изображения с индексом. Также удаляются все ненужные метаданные. В результате лучше файлы PNG с 100% поддержкой прозрачности . Ешьте свой торт и ешьте его тоже!
На изображении выше размер файла уменьшен на более чем на 70% . У меня отличное зрение, но я тоже не вижу разницы! Используйте оптимизированное изображение, чтобы сэкономить трафик и время загрузки, и посетители вашего сайта будут вам благодарны.
Везде поддерживается?
Отличный вопрос! Файлы, созданные TinyPNG, отлично отображаются во всех современных браузерах , включая мобильные устройства . По-прежнему требуется поддержка Internet Explorer 6? Обычно он игнорирует прозрачность PNG и отображает сплошной цвет фона. С TinyPNG фон снова становится прозрачным. Бинарная прозрачность без обходных путей!
Безопасно ли использовать анимированный PNG?
Отличный вопрос! Chrome, Firefox и Safari поддерживают APNG.Только Microsoft Edge пока не поддерживает формат. Если у вас есть браузер Edge, вы можете проголосовать за поддержку APNG на сайте отзывов разработчиков Microsoft.
Apple добавила анимированные стикеры в iMessage с выпуском iOS 10. Если вы хотите создавать и сжимать стикеры размером менее 500 КБ, взгляните на пример стикера iMessage Panda на Github.
А как насчет Photoshop?
Отличный вопрос! Только Photoshop CC 2015, 2017 и 2018 может сохранять изображения как проиндексированные файлы PNG с альфа-прозрачностью.