Резервная копия для отсутствующих изображений srcset

Содержание

Вопрос или проблема
Ответ или решение
1. Проверка и генерация изображений
Шаги по генерации изображений:
2. Установка фоллбеков на уровне разметки
Пример решения:
3. Использование JavaScript для динамической корректировки
4. SEO-оптимизация и производительность
Заключение

Вопрос или проблема

Я пытаюсь оптимизировать адаптивные изображения на нашем сайте. Мы используем WordPress. Не все миниатюры изображений генерируются, потому что соотношение сторон должно быть пропорционально оригинальному изображению.

Некоторые из наших изображений не отображаются в Chrome, где он выбирает изображения шириной 400w. Но в Firefox и Safari всё работает нормально, там выбираются изображения шириной 500w.

Вот PHP код

<img class="responsive-images"
     
     
     src="https://wordpress.stackexchange.com/questions/339192/<?php echo $image[0]; ?>"
     alt="responsive-image">, кто говорит на HLTH">

Вот HTML код, сгенерированный в браузере

<img class="responsive-images"
     srcset="https://wordpress.stackexchange.com/example.com/img-200.png 200w,
             https://wordpress.stackexchange.com/example.com/img-350.png 350w,
             https://wordpress.stackexchange.com/example.com/img-400.png 400w,
             https://wordpress.stackexchange.com/example.com/img-500.png 500w,
             https://wordpress.stackexchange.com/example.com/img-700.png 700w,
             https://wordpress.stackexchange.com/example.com/img-800.png 800w,
             https://wordpress.stackexchange.com/example.com/img-1000.png 1000w"
     
     src="https://wordpress.stackexchange.com/questions/339192/example.com/img.png"
     alt="responsive-image">

Я благодарен за помощь.

Спасибо

Мы нашли обходной путь для этой проблемы. Если вы используете плагин, такой как Regenerate Thumbnail, попробуйте сначала деактивировать некоторые плагины, которые могут повлиять на ваши изображения, когда вы регенерируете новые миниатюры изображений, такие как ewww image optimizer. Убедитесь, что ширина оригинального изображения больше, чем размер изображения, который вы установили в настройках медиа, чтобы избежать пропуска размеров, когда WordPress генерирует список миниатюр.

Но всё же мы хотели бы знать, есть ли обходной путь, если отсутствует URL-адрес srcset изображения, который мог бы предотвратить отсутствие изображений в браузере.

Ответ или решение

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

1. Проверка и генерация изображений

Первое, что стоит сделать, это убедиться, что все необходимые миниатюры и размеры изображений были корректно сгенерированы. Иногда плагины, такие как Regenerate Thumbnails, могут столкнуться с конфликтами с другими расширениями, такими как EWWW Image Optimizer. Деактивация подобных плагинов при регенерации изображений может решить многие проблемы.

Шаги по генерации изображений:

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

2. Установка фоллбеков на уровне разметки

Если изображения отсутствуют в srcset, вы можете применить подход использования фоллбеков. Например, вы можете использовать атрибут alt или дополнительные параметры в коде для обработки отсутствующих изображений.

Пример решения:

<img class="responsive-images"
     
     
     src="<?php echo $image[0] ?: 'https://example.com/default-image.png'; ?>"
     alt="responsive-image - fallback image" />

В этом примере атрибут src будет ссылаться на изображение по умолчанию в случае, если $image[0] не установлен. Это создает путь к запасному изображению, которое будет загружено, если основной источник отсутствует.

3. Использование JavaScript для динамической корректировки

Если вам требуется более динамичное управление изображениями, вы можете использовать JavaScript для проверки наличия изображений в srcset и соответствующего изменения атрибута src:

document.querySelectorAll('img.responsive-images').forEach((img) => {
    img.onload = () => {
        console.log('Image loaded: ', img.src);
    };

    img.onerror = () => {
        img.src = 'https://example.com/default-image.png';
    };
});

Такой подход поможет вам загрузить изображение по умолчанию, если основное изображение не может быть отрендерено.

4. SEO-оптимизация и производительность

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

Используйте релевантные альт-теги для всех изображений (в том числе запасных).
Убедитесь, что изображения имеют оптимальные размеры, соответствующие их разрешению, чтобы избежать медленной загрузки страниц.

Заключение

Таким образом, вам необходимо следовать нескольким ключевым шагам для решения вопроса отсутствующих изображений в srcset. Запуск регенерации миниатюр, использование фоллбек-изображений в HTML-коде и динамическое управление с помощью JavaScript позволят наладить стабильную работу изображений на вашем сайте. Не забывайте об оптимизации изображений с учетом SEO для достижения лучших результатов.