Как автоматически создавать измененные изображения и HTML-разметку для элемента изображения?

Question

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

Я использовал плагин gulp-response для изменения размера столько изображений, сколько я хочу. Тем не менее, это не рабочий процесс, связанный со здоровьем, поскольку мне все равно пришлось бы жестко кодировать HTML <picture> для каждого из них.

Кроме того, я читал об API Cloudinary, которое изменяет размеры и направляет изображения (лучший подход, чем плагин Gulp). Проблема в том, что после прочтения API-документов для Node.js я не мог понять, как автоматически генерировать разметку HTML (как в на этом сайте ) или даже загружать сгенерированные изображения.

Answer 1

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

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

<picture>
  <source srcset="./doge-280w.png" 
          media="(max-width: 310px)">

  <source srcset="./doge-472w.png" 
          media="(max-width: 500px)">

  <source srcset="./doge-626w.png" 
          media="(max-width: 575px)">

  <img src="./doge-1000w.png"
       alt="">
</picture>

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

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

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

Answer 2

Вы можете загрузить ресурс в Cloudinary через API или через пользовательский интерфейс. Если вы используете API, вы получите ответ JSON с URL-адресом ресурса, который можно использовать в HTML. Примерно так: https://cloudinary.com/documentation/image_upload_api_reference#upload_method (читай под примером ответа)

Если вы используете пользовательский интерфейс библиотеки мультимедиа для загрузки ресурса: https://cloudinary.com/console/media_library/folders/all/, то вы увидите URL-адрес, как только откроете изображение (значок «Редактировать» в правом верхнем углу миниатюры) или если на Вы можете нажать на изображение, и оно автоматически скопирует URL изображения.