Пошаговая инструкция: как сжать картинку без потери качества и вставить её на сайт?
Привет, ребята.
Сегодняшняя статья адресована начинающим вебмастерам и блогерам. В ней мы подробно разберём, как сжать изображение для сайта без потери качества. Пошагово покажем весь процесс на примере собственного блога — специально для авторов, которые публикуют материалы на платформе.
Весь процесс делится на три этапа:
- Подбор изображения и создание скриншотов.
- Обрезка под ширину сайта.
- Сжатие веса файла.
Отдельный блок посвящён загрузке готового изображения в статью на WordPress. Вес картинок напрямую влияет на скорость загрузки сайта, поэтому стоит уделить этому вопросу особое внимание.
Подбор изображения для статей
Начнём с обычных фотографий, а затем перейдём к скриншотам. Многие новички допускают ошибку, загружая изображения, размер которых не соответствует макету сайта. Нет смысла размещать картинку 1280 × 720, если в статье она отображается как 640 × 360. Сначала нужно определить, какой ширины будет контент в публикации.
Для примера используем Google Chrome. Нажав клавишу F12, вы откроете панель разработчика, с помощью которой легко измерить ширину контентной области.
Если контент на сайте отображается во всю ширину экрана, изображение стоит уменьшить до размеров, которые полностью помещаются в видимую область монитора. В нашем случае контентная колонка уже, поэтому подбираем размер точнее.
Шаг 1. Откройте любую статью на сайте и нажмите F12 (в браузере Google Chrome). В панели разработчика кликните иконку «Выделить элемент».
Шаг 2. Наведите курсор на любой абзац текста — в подсказке отобразится точная ширина контента.
На скриншоте размер уменьшен, поэтому изображение выглядит менее чётким. В нашем примере ширина контентной области составляет 615 пикселей. Картинки в статьях мы вставляем на 2 пикселя уже — то есть 613 px. У вас значение может отличаться.
Если изображение вертикальное, соотношение сторон нужно уменьшить так, чтобы оно комфортно помещалось на 15-дюймовом мониторе. Высота таких картинок обычно составляет 600–700 пикселей.
Зная нужную ширину, можно переходить к поиску изображений. Выбирайте фотографии хорошего качества шириной больше 613 пикселей — это позволит уменьшить их до требуемого размера без потери качества. Бесплатные варианты можно найти на стоках, либо приобрести на фотобанках.
Обрезка и уменьшение размера картинки
Предположим, вы нашли подходящее изображение. Для примера возьмём фотографию матрёшек размером 2588 × 1232. Чтобы привести её к нужным пропорциям, воспользуемся стандартной программой Microsoft Office Picture Manager.
Откройте файл и нажмите «Изменить рисунки…». При необходимости сначала обрежьте лишние края, затем выберите пункт «Изменение размера».
Укажите требуемую ширину и примерную высоту. Проверьте, чтобы итоговые размеры соответствовали вашим ожиданиям.
Нажмите «ОК» и сохраните файл.
Сжатие веса изображения
Для финального сжатия мы используем два проверенных сервиса:
- TinyPNG
- Kraken.io
Многие авторы предпочитают Kraken.io. Просто перетащите изображение в соответствующее поле — сервис автоматически сожмёт файл, после чего его можно сохранить на компьютер.
В примере изображение уже было оптимизировано — сервис дополнительно сжал его всего на 5,7 %. При обработке скриншотов полного размера степень сжатия нередко достигает 72,7 %.
После сжатия остаётся корректно назвать файл и загрузить его на сайт.
Если вы создаёте изображение в Photoshop
При оформлении картинок в собственном стиле в Photoshop сохраняйте файлы для веб с оптимальными настройками экспорта.
Слишком сильное сжатие может испортить качество, поэтому ориентируйтесь на вес файла. Изображения с большим количеством цветов обычно весят 70–90 КБ, более простые — 30–60 КБ.
В чём разница между JPG и PNG?
Прежде чем перейти к скриншотам, стоит уточнить важный момент. Многие считают, что JPG всегда легче PNG, однако это не всегда так. Иногда PNG сжимается сильнее, а качество при этом остаётся заметно выше.
Если на изображении присутствует много текста (особенно на скриншотах), лучше сохранять его в формате PNG. Программы для создания скриншотов по умолчанию используют именно этот формат — не стоит конвертировать их в JPG, иначе изображение может потерять чёткость.
Создание и сжатие скриншотов
Скриншоты желательно делать сразу в нужном размере, чтобы не пришлось их уменьшать. Если приходится захватывать весь экран, а после уменьшения текст становится нечитаемым, лучше уменьшить скрин до ширины монитора и добавить на сайт возможность увеличения изображения.
В программе Light Shot во время создания скриншота сразу видно его размеры — это удобно для точного выделения области. После создания скриншота сожмите его в Kraken.io, переименуйте и загрузите на сайт.
Как загрузить изображение на сайт WordPress?
После сжатия файлу нужно дать понятное название. Избегайте шаблонных имён вроде FOTO00034 или screen_dfsj39. Используйте осмысленные названия на транслите.
Для транслитерации воспользуйтесь сервисом translit.net: введите русское название, нажмите «В транслит», скопируйте результат и переименуйте файл.
Далее загрузите изображение на сайт, обязательно указав заголовок и атрибут ALT.
Изображение оптимизировано и готово к публикации.
Для дополнительной проверки воспользуйтесь инструментом Google PageSpeed Insights — он покажет, требуется ли дальнейшее сжатие картинок.
Если остались вопросы, пишите их в комментариях. До новых встреч!
Подпишитесь на рассылку
Получайте свежие новости Web3, AI и криптовалют прямо на вашу почту.