Элемент изображения: мне нужно установить полный путь в каждом атрибуте scrset?

Адаптивные изображения, варианты использования и новый HTML5 picture Элемент объясняется довольно хорошо в этой статье.

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

Показанные примеры являются просто именами файлов (без пути), на практике это будет более многословно, например:

<picture>
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="wp-content/uploads/2015/03/opera-fullshot-200.webp 200w,
            wp-content/uploads/2015/03/opera-fullshot-400.webp 400w,
            wp-content/uploads/2015/03/opera-fullshot-800.webp 800w,
            wp-content/uploads/2015/03/opera-fullshot-1200.webp 1200w,
            wp-content/uploads/2015/03/opera-fullshot-1600.webp 1600w,
            wp-content/uploads/2015/03/opera-fullshot-2000.webp 2000w"
    type="image/webp">
<source
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="wp-content/uploads/2015/03/opera-closeup-200.webp 200w,
            wp-content/uploads/2015/03/opera-closeup-400.webp 400w,
            wp-content/uploads/2015/03/opera-closeup-800.webp 800w,
            wp-content/uploads/2015/03/opera-closeup-1200.webp 1200w,
            wp-content/uploads/2015/03/opera-closeup-1600.webp 1600w,
            wp-content/uploads/2015/03/opera-closeup-2000.webp 2000w"
    type="image/webp">
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="wp-content/uploads/2015/03/opera-fullshot-200.jpg 200w,
            wp-content/uploads/2015/03/opera-fullshot-400.jpg 400w,
            wp-content/uploads/2015/03/opera-fullshot-800.jpg 800w,
            wp-content/uploads/2015/03/opera-fullshot-1200.jpg 1200w,
            wp-content/uploads/2015/03/opera-fullshot-1600.jpg 1800w,
            wp-content/uploads/2015/03/opera-fullshot-2000.jpg 2000w">
<img
    src="wp-content/uploads/2015/03/opera-closeup-400.jpg" alt="The Oslo Opera House"
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="wp-content/uploads/2015/03/opera-closeup-200.jpg 200w,
            wp-content/uploads/2015/03/opera-closeup-400.jpg 400w,
            wp-content/uploads/2015/03/opera-closeup-800.jpg 800w,
            wp-content/uploads/2015/03/opera-closeup-1200.jpg 1200w,
            wp-content/uploads/2015/03/opera-closeup-1600.jpg 1600w,
            wp-content/uploads/2015/03/opera-closeup-2000.jpg 2000w">
</picture>

Установка полного пути каждый раз кажется неудобной.

Я предпочитаю это:

<picture pathset="http://example.com/wp-content/uploads/2015/03/">
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="opera-fullshot-200.webp 200w,
            opera-fullshot-400.webp 400w,
            opera-fullshot-800.webp 800w,
            opera-fullshot-1200.webp 1200w,
            opera-fullshot-1600.webp 1600w,
            opera-fullshot-2000.webp 2000w"
    type="image/webp">
<source
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="opera-closeup-200.webp 200w,
            opera-closeup-400.webp 400w,
            opera-closeup-800.webp 800w,
            opera-closeup-1200.webp 1200w,
            opera-closeup-1600.webp 1600w,
            opera-closeup-2000.webp 2000w"
    type="image/webp">
<source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="opera-fullshot-200.jpg 200w,
            opera-fullshot-400.jpg 400w,
            opera-fullshot-800.jpg 800w,
            opera-fullshot-1200.jpg 1200w,
            opera-fullshot-1600.jpg 1800w,
            opera-fullshot-2000.jpg 2000w">
<img
    src="http://example.com/wp-content/uploads/2015/03/opera-closeup-400.jpg" alt="The Oslo Opera House"
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="opera-closeup-200.jpg 200w,
            opera-closeup-400.jpg 400w,
            opera-closeup-800.jpg 800w,
            opera-closeup-1200.jpg 1200w,
            opera-closeup-1600.jpg 1600w,
            opera-closeup-2000.jpg 2000w">
</picture>

КСТАТИ для читабельности и логики программирования Я предпочитаю отзывчивый материал в пути, а не в имени файла. Вы можете сделать это

<picture pathset=/pathtoimages/>
 <source fileset=opera-fullshot.webp
      sizes="(min-width: 640px) 60vw, 100vw"
...
    srcset="200w/ 200w,
            800w/ 800w,
            1200w/ 1200w,
            1600w/ 1600w,">
...
<source fileset=opera-closeup.webp
...
    srcset="200w/ 200w,
            800w/ 800w,
            1200w/ 1200w,
            1600w/ 1600w,">
</picture>

Если вы откажетесь от поддержки определенной ширины, просто удалите каталог.

Но главное, нам нужно довольно много кода для 1 изображения.

Итак, чтобы ограничить это (без какого-либо решения JS):

Могу ли я установить что-то вроде атрибута pathsrc или базового элемента области действия?

Источник

2 ответа

Решение

Нету.

Очевидная идея использовать синтаксис шаблона в srcset. На самом деле это была часть самого раннего проекта srcset. Однако URL-адреса могут содержать и не содержат ничего, и не всегда сопоставляются с шаблоном (например, сгенерированными GUID для разных изображений), поэтому он не работает.

Теоретически вы можете использовать XHTML и xml:base, На практике вы не используете XHTML, и xml:base поддержка удаляется из браузеров.

Я бы порекомендовал не беспокоиться о повторении, просто убедитесь, что вы используете gzip.

Источник

Отказ от ответственности это не решение вашего вопроса. Но решение для адаптивных изображений

SVG

Элемент высоко поддерживается.

Вот пример адаптивного изображения SVG:

circle {
  fill: firebrick;
}
svg {
  border: 1px solid black;
}
<svg width="100%" height="100%" viewBox="0 0 100 100">
  <rect x="10" y="10" width="50" height="50" fill="DarkOrange" />
  <rect x="40" y="40" width="50" height="50" fill="SeaGreen" />
  <circle cx="50" cy="50" r="30" />
</svg>

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

CSS

Или вы можете просто использовать изображение, которое правильно масштабируется:

body {
  width: 100%;
}
.container {
  width: 100%;
}
.container img {
  display: block;
  max-width: 100%;
  height: auto;
}
<div class="container">
  <img src="http://i.ytimg.com/vi/4rY4PlSCy48/maxresdefault.jpg" />
</div>

Источник
Другие вопросы по тегам