Миниатюра

Фотография с камеры весит несколько мегабайт и имеет ширину в тысячи пикселей, а в карточке товара её показывают размером со спичечный коробок. Если отдавать в такую карточку оригинал и уменьшать его через CSS, браузер всё равно скачает полный файл. Каталог из 30 товаров превратится в загрузку на сотню мегабайт. Поэтому из каждого исходника заранее нарезают версии нужных размеров, а оригинал открывают только по клику.

Миниатюры бывают не только у картинок: превью ролика, первая страница PDF, скриншот сайта в закладках браузера. Принцип везде один: показать лёгкую копию для узнавания, а тяжёлый файл грузить по запросу.

Как это сделано в WordPress

При загрузке картинки в медиатеку WordPress сам создаёт несколько копий: thumbnail (по умолчанию 150×150 с обрезкой), medium, large и служебные размеры. Тема может зарегистрировать свои:

add_action( 'after_setup_theme', function () {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'catalog-card', 400, 300, true ); // с обрезкой
} );

// в шаблоне карточки
the_post_thumbnail( 'catalog-card' );

Новый размер появится только у картинок, загруженных после изменения. Для старых файлов копии пересоздают командой WP-CLI wp media regenerate или плагином. Не путайте размер thumbnail с изображением записи: второе — это картинка, назначенная записи, и её можно вывести в любом размере.

В 1С-Битриксе для списков элементов инфоблока есть отдельное поле «Картинка для анонса», а уменьшенные копии на лету делает CFile::ResizeImageGet(), кэшируя результат в папке /upload/resize_cache/.

Частые ошибки

• Одна миниатюра на все экраны. На экранах высокой плотности она выглядит мыльной — нужна версия в 2 раза крупнее и атрибут srcset, который WordPress добавляет автоматически.
• Нет размеров у тега img. Пока картинка грузится, блок имеет нулевую высоту, и вёрстка прыгает.
• Все миниатюры грузятся сразу, даже далеко внизу страницы. Для длинных галерей помогает ленивая загрузка. Вес картинок — одна из первых вещей, которые проверяют при ускорении сайта.