5 сервисов для оптимизации изображений
Подборки
Использование полноразмерных файлов увеличивают время загрузки страницы. В среднем, пользователи закрывают страницы, которые грузятся более 3 секунд. Оптимизация графических файлов ускорит работу сайта и поможет удержать пользователей. Есть много способов оптимизировать картинки, как вручную (бесплатно), так и с помощью сервисов, которые оптимизируют все изображения. И в этом посте я расскажу о самых популярных сервисах.
- 1. Kraken io
- 2. Tiny JPG и Tiny PNG
- 3. ImageRecycle
- 4. Google PageSpeed Insights
- 5. GTmetrix
- 6. Советы по оптимизации изображений для вашего сайта
1. Kraken io
Kraken.io — это оптимизатор и компрессор изображений, который использует одни из лучших алгоритмов. Они оптимизируют изображения и ускоряют работу сайтов.
Чаще всего Kraken используют в виде плагина, который перехватывает изображения из загрузчика мультимедиа, прежде чем они будут сохранены на сервере, и оптимизирует их. Плагин также позволяет оптимизировать существующие изображения в вашей медиатеке, которые не были сжаты. Сервис поддерживает экспорт файлов в Dropbox или импорт файлов из Box, Dropbox и Google диска.
Сжатие:
- JPEG — 11,32% без потерь, 70,05% с потерями).
- PNG — 44,06% без потерь, 75,03% с потерями).
Tiny JPG и Tiny PNG
Сервисы позволяют загружать до 20 файлов за раз и до 100 в месяц. Размер одного файла не может превышать 5 МБ. Можно скачать файлы на устройство или перенести в Dropbox.
API подойдёт для автоматического преобразования изображений, а для начинающих есть удобный WordPress-плагин. Для тех, кто часто редактирует картинки и публикует их на своём сайте, предусмотрено расширение для Adobe Photoshop, которое сжимает файлы во время экспорта из программы.
Сжатие: JPEG — 32%, PNG — 75%.
3. ImageRecycle
Одна из самых полезных функций в ImageRecycle — подробный отчёт о вашем веб-сайте с информацией об изображениях, которые нуждаются в оптимизации. Просто введите URL веб-сайта, чтобы получить этот отчёт.
У этого сервиса есть WordPress-плагин, приложение в Shopify, расширения для Joomla и Magento. Если вы работаете с этими веб-ресурсами, вам будет удобно использовать ImageRecycle для сжатия графических файлов.
Сжатие: JPEG — 48,97%; PNG — 78,57%.
4. Google PageSpeed Insights
GPI анализирует сайт по нескольким критериям — от размера изображений до степени сжатия кода. В итоге вы получаете полную картину того, в каком направлении вам стоит двигаться для того, чтобы ускорить ваш сайт. Чтобы сжать изображения, используйте сторонние программы и сервисы.
5. GTmetrix
GTmetrix — это бесплатный инструмент, который используется для анализа производительности вашего сайта. С помощью Google Pagespeed (о котором я упомянула выше) и YSlow плагин GTmetrix даёт действенные рекомендации по устранению проблем, которые обнаружит в ходе анализа.
Вы сможете использовать самые разнообразные настройки для анализа вашего сайта:
- Выбор местоположения, в котором вы хотите протестировать свой URL;
- Выбор используемого браузера/устройства;
- Моделирование различных типов соединения, чтобы увидеть, как они влияют на загрузку страниц;
- Просмотр того, как влияет реклама на общее время загрузки.
Среди всего обилия настроек есть отличный плагин для оптимизаторов. Он поможет автоматически сжимать изображения, изменять их размер и обеспечивать их легкость и быструю загрузку.
Как найти изображения большого размера на сайте с помощью Netpeak Spider
Netpeak Spider позволяет проверить сайт и найти изображения большого размера — более 100 Кбайт. Чтобы найти такие картинки на сайте, в программе:
- Отметьте такие параметры на боковой панели: «Код ответа сервера», «Изображения» и «Content Length».
- Поместите адрес сайта в поле «Начальный URL» и нажмите на кнопку «Старт».
- По окончании сканирования откройте отчёт по ошибкам на боковой панели и посмотрите, есть ли среди списка ошибка «Макс.размер изображения».
- Чтобы выгрузить список URL, где была найдена ошибка, нажмите на эту ошибку, а затем на кнопку «Экспорт» слева над таблицей.
Вы можете менять значение, которое Netpeak Spider считает ошибкой, в настройках программы «Ограничения»:
6. Советы по оптимизации изображений для вашего сайта
Визуальный контент должен быть оптимизирован для ваших посетителей и поисковых систем. Это позволяет улучшить пользовательский опыт, сократить время загрузки страницы и даёт ещй ряд других преимуществ → об этом читайте в посте на блоге «Как оптимизировать изображения». Далее я перечислю советы, которые помогут добиться максимальной скорости и удобства поиска.
6.1. Выберите лучший тип файла
Существует три распространенных формата для публикации изображений в Интернете: JPEG, GIF и PNG:
- JPEG (или .jpg) — стандартный формат для фотографий, рисунков и других графических файлов. Такие файлы не занимают много места и позволяют сохранять изображения в высоком качестве.
- GIF (.gif) — этот формат поддерживает только 256 цветов из основной палитры, поэтому в нём лучше сохранять логотипы или рисунки. Такие файлы уступают по качеству изображения JPEG файлам, но они оптимально подходят для сохранения анимированных изображений. Сжатие происходит без потерь качества.
- PNG (.png) — этот формат приобрёл популярность, он позволяет сохранять изображения с большим количеством цветов. В отличие от JPG файлов, повторное сохранение в большинстве случаев не приводит к потере качества.
JPEG или JPG форматы больше подходят для сохранения изображений с богатой цветовой палитрой, а PNG идеален для простых изображений.
6.2. Сжимайте изображения
Для повышения скорости важно минимизировать размер всех файлов. Используйте программы и сервисы, описанные выше, чтобы ваши изображения занимали меньше места. Веб-страница не должна занимать больше 1-2 МБ. Главное— избегайте максимального сжатия. JPEG можно сжать с 700 КБ даже до 10 КБ, но качество значительно ухудшится. В среднем изображения стоит сжать до 150-200 КБ, чтобы сохранить приемлемое качество.
6.3. Создавайте уникальные изображения
Поисковые системы охотнее помещают ресурсы на первые места в выдаче, если на них размещены уникальные изображения. Если вы не уверены в том, что изображение нигде больше не используется, воспользуйтесь поиском по изображениям от Google. Вы увидите все идентичные или похожие изображения в сети.
6.4. Назовите свои изображения правильно
Яндекс и Google анализируют название изображения — оно должно соответствовать тому, что изображено на картинке. Перед загрузкой изображений на онлайн-ресурс необходимо их переименовать, можно добавить ключевые слова.
Google плохо распознает кириллические названия. Избегайте автоматически сгенерированных названий наподобие IMG0095933.png, а пишите словами — apple-iphone-11-pro-max.jpg
6.5. Сделайте изображения удобными для смартфонов
Последнее время большая часть людей заходит в интернет со смартофонов и планшетов. Поэтому важен еще один нюанс — оптимизация картинок под мобильные устройства. Дело не только в размере (для смартфона он должен быть еще меньше), но и в самом изображении.
Смартфоном пользуются чаще всего в вертикальном положении и поэтому обилие горизонтальных фотографий на странице сделают использование вашего сайта очень неудобным. Возьмите пример с Instagram, где в большей мере пользуются форматом 1х1.
Подводим итоги
Оптимизация и сжатие изображений позволит ускорить загрузку страниц, а также улучшить восприятие сайта посетителями. В этом посте я перечислила самые популярные сервисы для сжатия изображений без потери качества:
- Kraken io,
- Tiny JPG и Tiny PNG,
- ImageRecycle,
- Google PageSpeed Insights,
- GTmetrix.
Буду рада, если поделитесь своей подборкой любимых сервисах в комментариях!
