Оптимизация изображений для сайта на WordPress

Tweet Pin it Share

Оптимизация изображений для сайта

В данной статье «Оптимизация изображений для сайта» мы поговорим о работе с изображениями . Так, как  работа с изображениями в WordPress не идеальна, особенно если вам нужно загружать и обрабатывать большое количество . Есть два основных недостатка, которые на сегодняшний день еще не устранены. Эти два:

  1. WordPress не может ссылаться на ваш медиафайл при загрузке изображения. По умолчанию он ссылается на вложение страницы.
  2. WordPress создает миниатюрные изображения для каждого загружаемого вами изображения, даже если они вообще не используются.

Оптимизация изображений для сайта

 Оптимизация изображений для сайта как улучшить ?

Прежде всего, WordPress думает, что вы хотите ссылаться на страницу вложения всякий раз, когда вы загружаете файл, и пытаетесь вставить изображение в свою статью. Это действительно то, что на самом деле мало кому нужно. Ссылка на страницу вложения приводит к тому, что любой читатель увидит ваше изображение в увеличенном виде.

Во-вторых, такое поведение давно исчезло, так как по сегодняшним стандартам почти на всех сайтах есть плагин для галереи, плагин для слайдера или плагин для адаптивного масштабирования изображения, который позволяет легко открывать изображение в полноэкранном режиме. Все эти плагины будут нуждаться в прямой ссылке на медиа-файл для правильной работы. Привязка WordPress по умолчанию для ссылки на страницу вложения блокирует функцию масштабирования практически во всех плагинах, заставляя вас изменить свойство « Ссылка на» в каждом изображении на « Медиафайл».

Проблема в том, что WordPress не сохраняет ваши предпочтения! Таким образом, вместо того, чтобы выбрать ссылку на медиафайл один раз, вы вынуждены делать это каждый раз!

Эскизы

Вторая большая проблема, которая имеется у WordPress, особенно на сайтах с большим количеством изображений. Заключается в том, что по умолчанию WordPress  создает уменьшенные версии  (эскизы) каждого изображения, которое вы загружаете в WordPress, даже если они вообще не используются. Это плохо из-за 2 вещей:

  • Это замедляет загрузку изображений в вашем блоге.
  • Это занимает ненужное место в вашей учетной записи хостинга.

Первая проблема, которая возникает из-за того, как WordPress обрабатывает изображения, частично связана с  конфигурацией темы . WordPress  читает форматы мультимедиа для темы, которую вы используете в настоящее время, и использует ее для определения всех размеров изображения, которые должны произойти. Поскольку темы обычно имеют много различных размеров  изображения в зависимости от типов сообщений, это означает, что для каждого загружаемого изображения WordPress создает  как минимум еще 10 уменьшенных  файлов эскизов. Это также означает, что для простой галереи из 10 изображений, которую вы создаете, у вас будет около 100 файлов, добавленных в вашу учетную запись хостинга WordPress. Теперь умножьте это на тысячи фотографий, которые есть в вашем блоге, и вы начнете понимать, почему это серьезная проблема.

Другим важным моментом, который следует учитывать, является то, что все это уменьшение происходит  в режиме реального времени до того, как изображение становится доступным в вашей медиагалерее WordPress, что означает, что  это сильно замедлит загрузку  изображения.

Оптимизация изображений для сайта — Решение

К счастью, я здесь, чтобы помочь, так как я научу вас, как правильно снять эти ограничения и улучшить функциональность WordPress по управлению мультимедиа, выполнив 2 действия:

  • Принуждение WordPress к созданию изображений изменяет размеры  только тогда, когда они действительно необходимы , что экономит вам  массу места.
  • Принуждение WordPress всегда ссылаться на медиа-файл, а не на страницу вложения .

Существует плагин для первой проблемы с миниатюрами изображений под названием «Прекратить создание размеров изображений», который отключает создание ненужных размеров изображений по адресу https://wordpress.org/plugins/image-sizes/.

И для второго пункта существует плагин: «Обновление для Unattach и повторное вложение медиа-вложений»
https://wordpress.org/plugins/upgrade-for-unattach-re-attach-media-attachments/

Создайте свой собственный плагин

Для решения этих двух задач можно создать свой плагин .Первое, что мы сделаем, это создадим необходимую функцию WordPress для выбора медиа-файла по умолчанию, это делается путем добавления следующего кода в ваш  файл functions.php в вашей  теме.

function my_gallery_default_type_set_link( $settings ) {
$settings = ‘file’;
return $settings;
}add_filter( ‘media_view_settings’, ‘my_gallery_default_type_set_link’);

Но , чтобы не копаться в файле  functions.php , мы объединим этот файл с  показанным ниже в один. И создадим свой плагин .

Используя код ниже . Код не мой и доступен в сети.

add_filter( ‘image_downsize’, ‘ml_media_downsize’, 10, 3 );
function ml_media_downsize( $out, $id, $size ) {$dims = null;
$crop = false;if( is_array( $size ) ) {
// don’t handle these for now. but if you want on-the-fly sizes, comment out
// the return statement
return false;
$dims = $size;
// create custom image size name consisting of widthXheight
$size = sprintf( «%dx%d», $size, $size );
}// If image size exists let WP serve it like normally
$imagedata = wp_get_attachment_metadata( $id );
if ( is_array( $imagedata ) && isset( $imagedata ) )
return false;// Check that the requested size exists, or abort
if ( $dims === null ){
global $_wp_additional_image_sizes;
if ( !isset( $_wp_additional_image_sizes ) )
return false;
}// Make the new thumb
if( $dims ){// we got passed custom width/height as array…
if ( !$resized = image_make_intermediate_size(
get_attached_file( $id ),
$dims,
$dims,
$crop ) ) {
return false;
}} else {if ( !$resized = image_make_intermediate_size(
get_attached_file( $id ),
$_wp_additional_image_sizes,
$_wp_additional_image_sizes,
$_wp_additional_image_sizes ) ) {
return false;
}}// Save image meta, or WP can’t see that the thumb exists now
$imagedata = $resized;
wp_update_attachment_metadata( $id, $imagedata );// Return the array for displaying the resized image
$att_url = wp_get_attachment_url( $id );
return array( dirname( $att_url ) . ‘/’ . $resized, $resized, $resized, true );

}

add_filter(‘intermediate_image_sizes_advanced’, ‘ml_media_prevent_resize_on_upload’);
function ml_media_prevent_resize_on_upload( $sizes ) {
// Removing these defaults might cause problems, so we don’t, though you could
// probably set them to all be the same dimensions and rely on custom image sizes
// for everything else
return array(
‘thumbnail’ => $sizes,
‘medium’ => $sizes,
‘large’ => $sizes
);
}

Выглядеть это будет так:

<?php
/**
* Plugin Name: Link Image to Media
* Plugin URI: https://savelev-sergey.ru
* Description: Force WordPress to always link to the media file and rescale on the fly when needed
* Author: Savelev Sergey
* Author URI: https://savelev-sergey.ru
* Version: 0.1.2
*/add_filter( ‘media_view_settings’, ‘my_gallery_default_type_set_link’);
function my_gallery_default_type_set_link( $settings ) {
$settings = ‘file’;
return $settings;
}add_filter( ‘image_downsize’, ‘ml_media_downsize’, 10, 3 );
function ml_media_downsize( $out, $id, $size ) {$dims = null;
$crop = false;if( is_array( $size ) ) {
// don’t handle these for now. but if you want on-the-fly sizes, comment out
// the return statement
return false;
$dims = $size;
// create custom image size name consisting of widthXheight
$size = sprintf( «%dx%d», $size, $size );
}// If image size exists let WP serve it like normally
$imagedata = wp_get_attachment_metadata( $id );
if ( is_array( $imagedata ) && isset( $imagedata ) )
return false;// Check that the requested size exists, or abort
if ( $dims === null ){
global $_wp_additional_image_sizes;
if ( !isset( $_wp_additional_image_sizes ) )
return false;
}// Make the new thumb
if( $dims ){// we got passed custom width/height as array…
if ( !$resized = image_make_intermediate_size(
get_attached_file( $id ),
$dims,
$dims,
$crop ) ) {
return false;
}} else {if ( !$resized = image_make_intermediate_size(
get_attached_file( $id ),
$_wp_additional_image_sizes,
$_wp_additional_image_sizes,
$_wp_additional_image_sizes ) ) {
return false;
}}

// Save image meta, or WP can’t see that the thumb exists now
$imagedata = $resized;
wp_update_attachment_metadata( $id, $imagedata );

// Return the array for displaying the resized image
$att_url = wp_get_attachment_url( $id );
return array( dirname( $att_url ) . ‘/’ . $resized, $resized, $resized, true );

}

add_filter(‘intermediate_image_sizes_advanced’, ‘ml_media_prevent_resize_on_upload’);
function ml_media_prevent_resize_on_upload( $sizes ) {

// Removing these defaults might cause problems, so we don’t, though you could
// probably set them to all be the same dimensions and rely on custom image sizes
// for everything else
return array(
‘thumbnail’ => $sizes,
‘medium’ => $sizes,
‘large’ => $sizes
);

}

Чтобы создать свой собственный плагин, это то, что вам нужно сделать:

  1. Создайте папку с именем  Link Image to Media (такое название у меня ) .
  2. Создайте  php-  файл с тем же именем вашей папки плагинов: Link Image to Media.php .
  3. Создайте стандартный заголовок для WordPress, чтобы правильно прочитать плагин.
  4. Вставьте свой код.
  5. Сожмите содержимое папки  с именем папки внутри .
  6. Загрузите его в свой WordPress, как любой обычный плагин.
  7. Наслаждайтесь своим новым умением!

Для работы с файлами я настоятельно рекомендую вам использовать Notepad ++, с которым очень удобно работать и бесплатно. Вы, при желании можете используя данную программу : изменить данные заголовка и указав свое имя и адрес сайта автора и т. Д. Если , всю оставите в оригинале буду только благодарен.

Это избавит вас от необходимости добавлять код в functions.php вашей темы и позволит вам установить этот плагин на столько сайтов, сколько вы хотите, без необходимости касаться не одной строки кода в вашей теме. Скачать плагин можно прямо у меня с сайта : здесь

Загрузите его и активируйте .И вот как это выглядит на странице плагинов:

Оптимизация изображений

Теперь, когда плагин активен, ваш WordPress активно использует медиа-файл в качестве вложения по умолчанию для всех изображений. Он также загружает изображения без больших файлов  и создает их только при необходимости, экономя массу места и увеличивая скорость загрузки изображений.

razdelitelnaya-liniya

ВажноЕсли статья  «Оптимизация изображений для сайта»  вам понравилась, то стоит поделиться с друзьями? Тогда, нажмите одну (можно и больше) из кнопок.