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

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

Кой?

Гонзо Виелицата

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

http://greatgonzo.net

@gonzomir

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

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

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

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

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


<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
Снимка на екрана на лаптоп на dimitaraleksov.com
телефон
~600KB
Снимка на екрана на телефон на dimitaraleksov.com

sibela.eu

десктоп
~1.2MB
Снимка на екрана на лаптоп на sibela.eu
телефон
~700KB
Снимка на екрана на телефон на sibela.eu

Как да използваме отзивчиви изображения в 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
Намалява размера на файловете без да намалява качеството чрез външна услуга.

Полезни статии

Вашите коментари?