Какой лучший способ использовать Избранные изображения для адаптивного веб-дизайна?

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

Я работаю над проектом, который должен реагировать на все устройства, будь то настольный ПК или мобильный гаджет. Поэтому я хочу, чтобы изображения также были адаптивными, а это означает, что мобильные устройства не должны загружать изображения размером более 50 КБ.

Для каждой страницы или записи я могу добавить Избранные изображения, используя Миниатюры сообщений, которые в натуральную величину имеют размер около 950x250 при ~ 60 КБ. Если я загружаю веб-сайт на iPhone / Android, я бы не хотел загружать изображение размером ~ 60 КБ, а вместо этого хотел бы, чтобы на его месте загружалась небольшая миниатюра.

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

Я думал о том, чтобы опробовать адаптивный графический скрипт Filament Group , но я попробовал его, и он не сработал. Один из способов добиться этого - обнаружение пользовательских агентов, но я бы не стал использовать этот метод, поскольку пользовательские агенты могут быть подделаны.

Вот еще один метод изменения размера изображений на лету , но, похоже, это дублирует то, что WordPress уже сделал.

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

Шаг 1:

Определите два пользовательских размера изображения, например:

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

Шаг 2:

Реализуйте выбранные вами средства для определения клиента. Есть несколько способов, и какой метод вы используете, выходит за рамки этого вопроса. Но, если у вас есть метод, который работает для вас, выведите результат в некоторую переменную, такую ​​как$mobile_device = true;

Шаг 3:

В ваших файлах шаблонов выведите изображение условно на основе клиента.

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

Примечание: вы можете повторить if/else(или сделать switch) для нескольких форм-факторов (например, размеры экрана). Просто добавьте несколько нестандартных размеров изображения и выполните условное тестирование для каждого размера экрана, который вы хотите поддерживать.

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

Способ 1: CSS

Добавьте следующий код в ваш файл CSS. Это сделает изображения масштабируемыми в соответствии с размером экрана.

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }

Удаление автоматической высоты и ширины в <img>тегах WordPress

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

Чтобы сделать размеры изображений пропорционально изменяемыми в WordPress, мы должны удалить автоматические значения ширины и высоты, которые WordPress добавляет для < img >тегов.

В качестве примера, мы должны изменить это:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />

К этому:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />

Для изображений, которые в посте или статической странице страницы / шаблона, все , что вам нужно сделать , это добавить выше CSS в style.cssфайл, а затем удалить ‘width’и ‘height’свойство из < img >тега в редакторе WordPress. Это оно!

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

Добавьте следующую функцию в ваш functions.phpфайл.

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\/i’, ”,$string );
}

Затем, когда вы вызываете эти миниатюры постов на странице template.php, замените:

the_post_thumbnail();

С этим:

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );

Вот и все. Перетащите и измените размер браузера, чтобы увидеть ваши отзывчивые изображения WordPress в действии!

---

Способ 2:

Выше не будет работать для некоторых тем.

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

Добавьте следующую функцию в ваш functions.phpфайл.

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

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
    return $html; 
}

Один из способов добиться этого - обнаружение пользовательских агентов, но я бы не стал использовать этот метод, поскольку пользовательские агенты могут быть подделаны.

Это не плохой метод и на самом деле является отраслевым стандартом, хороший WURFL имеет очень высокую оценку точности, те, которые я использовал и тестировал, всегда давали твердые результаты, и независимое тестирование (выше того, что я бы потрудился сделать), кажется, имеет их в диапазон 98% +. Кого волнует, если какой-то хромой бот подделывает пользовательский агент, они все равно не найдутся по уважительной причине.

Для шага 2 я думаю, что любой метод сводится к тому, что на самом деле быстрее, с поддержкой PHP WURFL или CSS медиа-запросов.

Сначала вы должны определить «лучший». Мое определение будет таким: Рендеринг изображения с предполагаемым эффектом дизайнера на любом устройстве или экране. Рендеринг изображения с тем же качеством, что и у оригинала. Потребляет абсолютный минимальный объем системных и человеческих ресурсов (т. Е. Пропускная способность, процессор, время проектировщика / программиста).

Вот подходы, которые я видел до сих пор:

1. Загрузите изображение в полном размере и уменьшите его до размера макета браузера. Определите максимальную ширину изображения как 100% и уменьшите ее по ширине контейнера.

Плюсы: требует практически никаких усилий для реализации, кросс-браузер совместим и поддерживается старыми браузерами.

Минусы: часто загружают больше данных, чем требуется, а затем тратят циклы ЦП на клиенте, уменьшая его (медленно). Вы можете получить изображения очень низкого качества в зависимости от алгоритма масштабирования браузера. Нет возможности для художественного руководства и не может адаптировать изображение для дисплеев типа сетчатки.

2. Используйте медиазапросы, чтобы прочитать свойства клиента и выбрать одно из нескольких настроенных изображений для различных точек останова в вашем проекте. (Предлагается расширение HTML Responsive Images и теги атрибута srcset, которые работают над внедрением этого подхода в спецификацию HTML).

Плюсы: более быстрая загрузка на мобильные устройства. Может обрабатывать дисплеи типа сетчатки. Улучшено качество изображения, поскольку, как мы надеемся, изображения обрабатываются с использованием высококачественного метода. Художественное направление становится возможным.

Минусы: кто-то должен тратить время на обработку, обрезку и управление несколькими версиями одного и того же изображения. Больше кодирования: теперь вам нужно как-то прописать каждую версию изображения и создавать медиа-запросы для всех желаемых макетов. Повторите вышеуказанное для каждого изображения, которое вы обслуживаете. Будет работать только для браузеров, поддерживающих CSS3 Media Queries или новых тегов.

3. Сделайте бэкэнд Оптимизируйте изображения для любого экрана или макета, используя одно исходное изображение на лету. На мой взгляд, это эквивалентно восприятию адаптивных изображений как задачу согласования контента, очень похожую на HTTP.

Плюсы: Дизайнеру не нужно тратить время на обработку изображений и управление несколькими версиями. Изображение оптимального размера отправляется каждый раз. Может работать с дисплеями типа сетчатки и динамически настраиваться на художественное направление (хотя с некоторыми дополнительными усилиями - нужно знать, где сосредоточиться). Никакой специальной или дополнительной разметки не требуется (предостережение ниже). Кросс-браузер совместим и будет работать для старых браузеров.

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