search

web-standards-ru / new

Новый сайт «Веб-стандартов»
https://new.web-standards.ru/
39 stars 17 forks source link

Отпилить мусор gatsby-resp-image-image #81

Closed pepelsbey closed 5 years ago

pepelsbey commented 5 years ago

Сейчас в gatsby-config.js есть безобидный плагин gatsby-transformer-remark, в котором есть другой плагин (почему бы и нет?) gatsby-remark-copy-linked-files, в котором… да, есть другой плагин gatsby-remark-images. Так вот кажется gatsby-remark-images творит странные вещи с картинками, от чего, в частности, сильно замедляется сборка.

Вот, например, что появляется вместо обычной картинки:

<span class="gatsby-resp-image-wrapper" style="position: relative; display: block;  max-width: 650px; margin-left: auto; margin-right: auto;">
    <span class="gatsby-resp-image-background-image" style="padding-bottom: 52.5%; position: relative; bottom: 0px; left: 0px; background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsSAAALEgHS3X78AAABu0lEQVQozz1SCY7bMAz0X7pJLMuWfOmibt/ebFH0/58pnewWIAiDImeGQxdNVL9adevUvdN3zL2+4Ud/VUphqfIYRFgioBwNxmMw7zaMQqRd5o3ZibllyLkLvlL29nqW9tTrU+/PLq9dnsd16/JUm1AZXyuHKIVKBxx/5Hy2fmnswn1iNuEDzrd26aeDh1nGo887nzbqcmMTg0QhUhOKwa19WKiOZAAyulJGIgPKQ21UhdqkxkTMVGMREPTxVj5cuRj8NqSlc1Pn1xpmajzVDmkxGpU7t7RuoiYT5csB3vXb/52RnUjLrGcQ7z283NIv2yQZLddz7TKPmYXUgC+FKaVDI38Mi4eazhYWnuY2TX2aKmlf8JIIJ9KX2r6GaeEuMOsqCUR7Iv33MDe5tQmrVJsGHHOX2/eXNtyqhpWHrU0ZJ2ttG4Ma8WwGDUP+otap1J6aSCE9Rvjg3ythrqTngGoTlQHb3guirsflqyfKFWP4LdbnuB7tvLMwI2SDWfsPLvDy+vOv3j/Vfor1HPddHkcXFx63xs/Xqbjd2oAXzpUJSI5+/PxnEuErcxEyF2rAK9haQymAmIsWe/4Btz6L8VsRO1oAAAAASUVORK5CYII=&quot;); background-size: cover; display: block; opacity: 0;"></span>
    <img class="gatsby-resp-image-image" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px transparent;" alt="Используем Puppeteer для краулинга страниц сайта и сохранения их в Markdown." title="" src="/static/181b50918c023a2f0c349e2f03dfea3b/ce0d4/1.png" srcset="/static/181b50918c023a2f0c349e2f03dfea3b/a6060/1.png 163w,
/static/181b50918c023a2f0c349e2f03dfea3b/1a895/1.png 325w,
/static/181b50918c023a2f0c349e2f03dfea3b/ce0d4/1.png 650w,
/static/181b50918c023a2f0c349e2f03dfea3b/63d2a/1.png 975w,
/static/181b50918c023a2f0c349e2f03dfea3b/6119f/1.png 1200w" sizes="(max-width: 650px) 100vw, 650px">
  </span>

Помимо инлайновых стилей, там куча непонятного чужого и ненужного сейчас кода.

Мои попытки просто убрать плагин gatsby-remark-images приводят к тому, что картинки вообще не выводятся. Он может просто выводить картинки?