WordPress и тайные картинки по srcset

Когда переносил блог на новый сервер, обратил пристальное внимание на загруженные картинки. Их стало больше, чем я предполагал. По одной простой причине, разработчики WordPress внедрили очередную неуправляемую простым юзером (читай — из админки галочкой), а следовательно неотключаемую фичу.

wp_get_attachment_image_srcset()

и

wp_get_attachment_image_sizes()

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

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

<img src="http://avolab.eu.org/wp-content/uploads/ezra-grills.jpg" 
alt="sw ezra" w-t="" het="" 
class="aligncenter size-full wp-image-12100" 

srcset="http://avolab.eu.org/wp-content/uploads/ezra-grills.jpg 1280w,
http://avolab.eu.org/wp-content/uploads/ezra-grills-768x432.jpg 768w" 
sizes="(max-width: 1280px) 100vw, 1280px" />

Таким образом, WordPress без моего участия создает уменьшенную копию любого загруженного изображения с параметром 768 пикселей по ширине. Высота может быть какой угодно. Все бы ничего, но я обнаружил гигантский баг. Который сводит на нет эти благие намерения разработчиков насильно осчастливить человечество. Если вставлять PNG, малая картинка весит очень сильно больше большой.

Вот наглядно, первый PNG сверху, 46 килобайт оригинала, против 301 (sic!!!) уменьшенной копии.

Я очень тщательно подхожу к оптимизации png в векторном редакторе или при создании скриншотов. И как правило, мои картинки весят немного (если размер превышает энный психологический барьер, я перехожу на jpg). При уменьшении png по любому алгоритму как бы нарушается начальная четкость, унаследованная от вектора: точки интерполятивно «расплываются» и от этого появляется необходимость кодировать, описывать появившуюся информацию. Поэтому размер растет. Это ухудшение похоже на, простите старика, перезапись с кассеты на кассету. Копия всегда хуже оригинала.

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

Второй путь — отрубить эту фичу. Я очень люблю файлик functions.php в любой шкуре вордпресса, который позволяет, не нарушая файлы самого движка, очень много добавлять и убавлять.

У меня есть там очень стройная колонка отключения всякой ненужной ерунды, которую вордпресс сует в страничку без моего ведома, например, эти дурацкие смайлы emoji (без возможности спокойно отключить, каждый раз движок вставляет в код довольно объемный java-script для этих смайлов! И каким бы серьезным ваш ресурс ни был, если вы вдруг поставите раз в жизни двоеточия со скобкой, вам в публикацию влезет тупая желтая рожа! ЭТО НЕ ОТКЛЮЧАЕТСЯ! Нонсенс!)

Вот и приходится собирать по крупицам информацию — и по сусалам, по сусалам вордпресс!

add_filter( 'max_srcset_image_width', create_function( '', 'return 1;' ) );

Этот код может отключить означенную в этой публикации фичу. При том, что идея полезная и srcset это замена src обычному в самом недалеком будущем. Сложно.

То есть: мы можем в одной строке, в одном «поле вызова» задать несколько параметров картинки, которая будет отображаться в зависимости от этих параметров. Если бы не топорное автоматическое решение разработчиков wp, этим можно было бы пользоваться, если бы была наглядная настройка. То есть при загрузке картинки через драг-эн-дроп, в редакторе все это можно было тонко настроить, вплоть до того, что отдельно самостоятельно подготовить любовно оптимизированную картинку для разных экранов и, не отходя от кассы, загрузить два или три своих правильных варианта, не полагаясь на автоматику движка.

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

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

[ОТКЛЮЧИЛ]

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

!Важное дополнение = как отключить все, в том числе и генерацию доп картинок!!!