Я пытаюсь предоставить изображения для каждого из apple-touch-icon размеров в моем теге head.Я делаю это так:
// not shown: import all image files: logo57, logo76, etc
<link rel="apple-touch-icon" sizes="57x57" href={logo57} />
<link rel="apple-touch-icon" sizes="76x76" href={logo76} />
<link rel="apple-touch-icon" sizes="120x120" href={logo120} />
<link rel="apple-touch-icon" sizes="152x152" href={logo152} />
<link rel="apple-touch-icon" sizes="167x167" href={logo167} />
<link rel="apple-touch-icon" sizes="180x180" href={logo180} />
Проблема в том, что при визуализации страницы все эти изображения включаются непосредственно в страницу как базовые 64 в URI данных, а не в относительные URL.Вот так:
<link rel="apple-touch-icon" sizes="180x180" href="data:image/png;base64,iVBORw0KGgoAAAA....">
Это проблематично по нескольким причинам.Во-первых, эти изображения нужны только в сценарии с прогрессивным веб-приложением;они не нужны обычным настольным браузерам, и, тем не менее, настольные браузеры вынуждены загружать все эти фрагменты базы 64, замедляя загрузку страниц.Во-вторых, даже в сценарии PWA каждому устройству потребуется только одно из этих изображений, а не все, поэтому время загрузки страницы также там замедляется.
Это документированная оптимизация для изображений <10000 байт,так что может быть незначительной разницей, что они все загружены здесь.Но общий размер исходных файлов png составляет около 27 КБ (о преобразовании в базу 64 я ничего не знаю), и мне кажется, что я бы предпочел не включать эти данные в каждую страницу, если она не нужна. </p>
Я обнаружил, что могу переместить все изображения в папку / static и сослаться на них с помощью href="logo57.png", но затем я теряю проверку на время компиляции, что эти изображения действительно присутствуют в данном href, а такжевключение хэша изображения в имя файла (по причинам кэширования).
Как я могу сказать Гэтсби не вставлять эти изображения непосредственно на страницу как URI данных?