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

Что такое масштабированные изображения?

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

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

Поскольку вы не можете увидеть изменения в качестве, дополнительный вес изображений легко не заметить. И поскольку большинство людей не знают, что есть проблема, они не исправляют ее. Когда вы получите замечание “ properly size images” в Google PageSpeed Insights, вы будете знать, что пришло время масштабировать некоторые изображения. В идеале, ваша страница никогда не должна обслуживать изображения, которые больше, чем версия, отображаемая на экране пользователя. Все, что больше … просто приводит к потере байт и замедляет время загрузки страницы. Изображение, которое слишком велико, причиняет вам неприятности несколькими способами.
  • Во-первых, оно отвлекает браузер, заставляя его выполнять дополнительные запросы сервера. Вместо того, чтобы доставить веб-страницу как можно быстрее, он должен остановить и изменить размер изображения. Это занимает время, особенно если ваши веб-страницы тяжелы.
  • Во-вторых, если вы загружаете полноразмерное селфи прямо с вашего телефона, но вы показываете его как маленький Граватар, то вы тратите время и данные, загружая изображение, которое является чрезмерно большим.
Введите масштабированные изображения. Масштабированное изображение — это изображение, размер которого соответствует точным размерам, для которых оно используется. В отличие от обрезки, которая в конечном итоге может изменить пропорции изображения, масштабирование сохраняет размеры. Оптимизаторы скорости сайта, такие как Hummingbird, GTmetrix и Google PageSpeed Insights, рекомендуют масштабировать изображения для повышения производительности.

Разве атрибуты srcset и size не должны заботиться о изменении размера изображения?

И да, и нет. Srcset и size помогут вам приблизиться к идеальному размеру изображения, но не всегда дадут вам точный размер, который вам нужен, и он не будет сокращать избыток на самом большом размере. Атрибут srcset работает, предоставляя URL-адрес для изображения, а затем предоставляя браузеру список изображений на выбор в различных размерах. Этот набор источников для этого селфи сотового телефона, о котором я упоминала ранее, будет выглядеть примерно так:
srcset= “selfie-100×100.png 100w, selfie-200×200.png 200w, selfie-400×400.png 400w”
WordPress говорит браузеру, вы знаете больше о пользователе, чем я, вот изображение, которое вы хотите в 3 разных размерах, выберите то, которое будет работать лучше всего. Когда браузер должен отобразить 75px X 75px Gravatar рядом с комментарием, он выберет первый вариант в наборе и немного изменит его размер. Если у пользователя есть устройство retina, он выберет второй вариант. Но масштабирование позволит вам получить этот дополнительный бит производительности.

Как обслуживать масштабированные изображения в WordPress

Для начала вам необходимо знать размеры изображений, которые будут использоваться на вашем сайте. Я говорю о изображениях баннеров, изображениях в блогах, граватаре и т. д. Мы хотим знать, какой самый большой размер будет отображаться на каждом изображении, поскольку мы знаем, что все, что превышает этот порог, бесполезно. Например, предположим, что я хочу использовать фотографию океана на главной странице моего сайта. Изображение в его неизмененном состоянии составляет 4534px x 3023px. Как правильно оптимизировать изображения в WordPress Для изображения в теле сообщения в блоге вам, вероятно, нужно будет обслуживать изображение в диапазоне 600px-960px, а для изображений, которые охватывают ширину экрана настольного компьютера, вы смотрите на что-то в диапазоне ширины 1600px. Также имейте в виду, что вам нужно будет удвоить эти размеры для размещения экранов retina. Чтобы найти размер для того, чтобы соответствовать идеально, мы будем искать изображение на сайте и открывать инструменты разработчика браузера. Если вы используете Chrome, щелкните правой кнопкой мыши на изображении и перейдите к Inspect (проверить элемент). В Chrome при наведении указателя мыши на URL-адрес изображения вы увидите размер, в котором отображается изображение, с исходным “естественным” размером изображения в скобках. Этот большой файл изображения — это то, что ваши посетители загружают. Изображение более 3000 пикселей слишком велико. Теперь, когда мы знаем, какого размера нам нужно изображение, мы можем изменить размер изображения в WordPress несколькими различными способами.

Обрезка изображений в библиотеке мультимедиа

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

Соотношение сторон

У вас также есть возможность ввести желаемое соотношение сторон для изображения:
Соотношение сторон — это отношение между шириной и высотой. Вы можете сохранить соотношение сторон, удерживая клавишу shift при изменении размера вашего выбора. Используйте поле ввода для указания соотношения сторон, например 1: 1 (квадрат), 4:3, 16:9, и т.д.
Вы также можете щелкнуть и перетащить выбранную область, чтобы переместить ее в ту область, которую вы хотите видеть. Если вы обрезали изображение, выбрав его область с помощью мыши, щелкните значок обрезки над изображением. Как правильно оптимизировать изображения в WordPress Масштабируйте или обрезайте изображение в соответствии с размером, определенным вашей темой. Затем выберите заранее определенный размер изображения, к которому вы хотите применить изменения, в разделе Настройки миниатюр. Эта опция может быть полезна, если вы хотите отредактировать изображение с сохранением миниатюры. Например, вы можете иметь квадратную миниатюру, которая отображает только часть изображения. Когда вы закончите вносить изменения, нажмите кнопку Сохранить под изображением. Вы также можете вручную изменить размер изображений во время редактирования записи или страницы, нажав на кнопку Добавить медиа над редактором. Затем перейдите на вкладку Библиотека мультимедиа и выберите одно из перечисленных изображений. Затем щелкните ссылку Редактировать изображение справа, чтобы получить доступ к тому же интерфейсу редактирования, упомянутому выше.

Как WordPress изменяет размер изображений с настройками мультимедиа?

Если изображения, которые вам нужно изменить вручную, являются размерами по умолчанию, созданными WordPress, вы можете попробовать отредактировать их с помощью настроек мультимедиа панели администратора. Размеры изображений WordPress по умолчанию являются миниатюрами, средними, большими и полноразмерными, однако полноразмерные относятся к исходным размерам загруженных изображений и не могут быть изменены в настройках мультимедиа. Чтобы отредактировать исходное изображение, обратитесь к приведенным выше деталям. Чтобы вручную изменить размер изображения по умолчанию, перейдите в Настройки > Медиафайлы и введите в соответствующих полях максимальную ширину и максимальную высоту, необходимые для соответствующего размера изображения, который требуется изменить. Как правильно оптимизировать изображения в WordPress Если вам нужно изменить размер миниатюры, вы также можете установить флажок, чтобы обрезать миниатюру до точных размеров, которые вы укажете. Обычно эскизы пропорционально редактируются автоматически. Когда вы закончите, нажмите кнопку Сохранить изменения в нижней части страницы. Имейте в виду, что эти размеры могут быть использованы в нескольких местах в вашей теме, так что вы можете в конечном итоге редактировать изображения, которые вы не хотите менять. Вы также можете добавить пользовательские размеры в WordPress. После сохранения изменений установите и активируйте плагин Regenerate Thumbnails, чтобы изменить размер ранее загруженных изображений в соответствии с новыми размерами, которые вы только что установили.

Редактировать файл в Paint

Откройте изображение в Paint, Adobe Photoshop или в любом другом графическом редакторе. Мы будем использовать размеры, которые мы придумали в инструментах разработчика. Как правильно оптимизировать изображения в WordPress В Paint, перейдите во вкладку home. Откроется окно, которое позволит вам ввести новые измерения. Установите переключатель на пиксели и измените горизонтальные размеры. Вертикальные размеры будут автоматически изменены, если установлен флажок поддерживать соотношение сторон. Именно этого мы и хотим. Если флажок не установлен, вам нужно будет сделать вычисления самостоятельно. Когда вы закончите настройку размеров, нажмите кнопку ОК. Затем вы можете сохранить файл в Paint, повторно загрузить в WordPress и заменить изображение новым файлом. Как правильно оптимизировать изображения в WordPress

Оптимизация изображений с помощью Smush

Плагин Smush и Smush Pro могут сэкономить вам много времени, когда вы начинаете оптимизировать свои изображения. Как Smush, так и Smush Pro имеют возможность обнаружения неправильного размера в настройках плагина. Если вы похожи на меня и забываете время от времени изменять размер своих изображений, эта функция поможет вам увидеть, какие изображения замедляют работу вашего сайта WP. Когда вы посещаете свой сайт, изображения, которые являются слишком большими или слишком маленькими, будут отображаться с желтым контуром. Только администраторы увидят выделенное изображение и сообщение об ошибке. Как правильно оптимизировать изображения в WordPress Чтобы включить эту функцию в Smush и Smush Pro, перейдите в настройки плагина и в разделе изменение размера изображения включите обнаружение и отображение изображений неправильного размера. Затем сохраните настройки, чтобы увидеть изображения неправильного размера на передней панели вашего сайта.

Автоматическое Изменение Размера Изображения

В настройках плагина Smush перейдите в раздел изменение размера изображения и включите изменение размера моих полноразмерных изображений. Перед загрузкой изображения в медиатеку, Smush изменит его размер в соответствии с указанными шириной и высотой. Как правильно оптимизировать изображения в WordPress Обратите внимание, как Smush сообщает вам, что изображение самого большого размера на вашем сайте должно быть, а затем удваивает его для устройств Retina. Smush также дает вам возможность сохранить копию исходного изображения. Эта функция существенно сокращает избыток от вашего самого большого изображения. Кроме того, вы можете воспользоваться функцией «Отложенная загрузка» и CDN – загрузкой изображений на быструю CDN от WPMU DEV с функциями многоуровневого сжатия и автоматического изменения размера. Это основной инструмент для улучшений скорости загрузки вашей страницы, с помощью снижения нагрузки на сервер.