Какво е това „отзивчиви изображения“?

И каква е ползата от тях?

Нещо като дефиниция

Метод за сервиране на различни източници за едно изображения в зависимост от размера на екрана, неговата разделителна способност, или други фактори.

Превключването на резолюцията


<img src="image.jpg" srcset="image-360x340.jpg 360w, image-800x600.jpg 800w" sizes="(min-width: 840px) 800px, calc(100vw - 40px)" alt="" />

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes

Артистични съображения

<picture>
  <source media="(min-width: 840px)" src="image-800x600px.jpg" type="image/jpeg" />
  <source media="(min-width: 840px)" src="image-800x600px.webp" type="image/webp" />
  <source media="(max-width: 640px) and (orientation: portrait)" src="image-640x800px.jpg" />
  <source media="(max-width: 640px) and (orientation: landscape)" src="image-640x400px.jpg" />
  <img src="image.jpg" alt="" />
</picture>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Ползата

dimitaraleksov.com

десктоп: ~1.6MB
телефон: ~600KB

sibela.eu

десктоп: ~1.2MB
телефон: ~700KB

Как да използваме отзивчиви изображения в WordPress теми?

С какво разполагаме?

От версия 4.4 насам WordPress разполага с доста функции за работа с отзивчиви изображения.

add_image_size(): Казва на WordPress да генерира определен размер изображение още при качване на файла в библиотеката.
wp_get_attachment_image_srcset(): Връща низ със генериран srcset за дадено изобажение от медийната библиотека.
wp_get_attachment_image_sizes(): Генерира стойност за атрибута sizes.
wp_make_content_images_responsive(): Филтрира елементи img в съдържанието на пост и добавя атрибути src и sizes.
max_srcset_image_width: Филтър, чрез който се ограничава максималния размер, включван в srcset.
wp_calculate_image_srcset и wp_calculate_image_sizes: Филтри, с които могат да се променят подразбиращите се атрибути srcset и sizes съответно.

https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

По подразбиране

WordPress генерира сам srcset, като включва всички изображения със същите пропорции като изображението в src.

По подразбиране WordPress генерира sizes="(max-width: [image width]) 100vw, [image width]"

Първата стъпка

Накарайте WordPress да генерира нужните ви размери картинки.

add_image_size( string $name, int $width, int $height, bool|array $crop = false )

https://developer.wordpress.org/reference/functions/add_image_size/

Пример


// header images on big screens
add_image_size( 'header-image-huge', 1920, 453, true );
add_image_size( 'header-image-large', 1650, 390, true );
add_image_size( 'header-image-big', 1366, 323, true );
add_image_size( 'header-image-small', 1024, 242, true );

// header images on medium screens
add_image_size( 'wide-large', 1024, 391, true );
add_image_size( 'wide-big', 800, 306, true );

// header images on small screens
add_image_size( 'square-big', 520, 320, true );
add_image_size( 'square-medium', 360, 222, true );

Основно изображение на постовете

the_post_thumbnail( 'image-medium', array( 'sizes' => '(min-width: 37.5em) calc(50vw - 1.5em), (min-width: 60em) 29.5em, 100vw' ) );

Картинки в съдържанието на пост

function my_image_sizes( $sizes, $size, $image_src, $image_meta, $attachment_id ) {
  // направете някаква магия
  return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'my_image_sizes', 99, 5 );

Ръчно оформен img таг

<?php
  $src = wp_get_attachment_image_src( $image_ID, 'header-image-base', false )[0];
  $srcset = wp_get_attachment_image_srcset( $image_ID, 'header-image-base' );
?>
<img src="<?php echo esc_url( $src ); ?>" srcset="<?php echo esc_attr( $srcset ); ?>" sizes="(min-width: 37.5em) calc(50vw - 1.5em), (min-width: 60em) 29.5em, 100vw" />

Ръчно оформен picture таг


<picture>
  <?php
    $src = wp_get_attachment_image_src( $image_ID, 'image-square', false )[0];
  ?>
 <source media="(max-width: 1024px) and (orientation: portrait)" src="<?php echo esc_url( $src ); ?>" />
 ...
  <?php
    $src = wp_get_attachment_image_src( $image_ID, 'image-medium', false )[0];
  ?>
 <img src="<?php echo esc_url( $src ); ?>" alt="" />
</picture>

Полезни разширения

Manual Image Crop: Позволява ръчно изрязване на изображенията за всеки отделен размер.
Image Regenerate & Select Crop: Позволява ръчно регенерирне на всеки размер, показва детайли за различните размери и др.
Regenerate Thumbnails: Регенерира всички размери изображения.
YoImages: Изрязване на изображения, ръчна замяна на изображението за даден размер и др. (не съм го пробвал още)
EWWW Image Optimizer: Намалява размера на файловете без да намалява качеството локално на вашия сървър.
WP Smush: Намалява размера на файловете без да намалява качеството чрез външна услуга.

Отзивчиви изображения и WordPress

Кой?

Милен Петрински - Гонзо