Улучшение восприятия производительности: изменение размера изображения по требованию

Улучшение восприятия производительности: изменение размера изображения по требованию

От автора: для чего нужно изменение размера изображения по требованию? Мы создаем шаблонное приложение — блог галереи с несколькими изображениями — для тестирования производительности и оптимизации. На этом этапе наше приложение обслуживает одно и то же изображение независимо от разрешения и размера экрана, на котором оно выполняется. В этом уроке мы изменим приложение, чтобы оно обслуживало версию изображения с другим размером в зависимости от размера экрана.

Статья входит в серию по созданию шаблонного приложения — блога галереи с несколькими изображениями — для бенчмаркинга и оптимизации производительности. (Репозиторий по ссылке).

Задача

Для этого улучшения необходимо:

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

Нам нужно добавить в приложение логику изменения размера. Суть в том, чтобы создавать измененное изображение «на лету», поскольку оно требуется. Это приведет к тому, что непопулярные изображения засорят наш жесткий диск, и он будет следить за тем, чтобы популярные изображения при последующих запросах удовлетворялись в оптимальных размерах.

Бесплатный курс по PHP программированию

Освойте курс и создайте динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

Адаптивные изображения?

Вместо простого старого <img src=»mypic.jpg»> у нас теперь есть что-то сумасшедшее:

Комбинация srcset, picture и sizes необходима в сценарии, в котором вы сомневаетесь, если вы используете одно и то же изображение для меньшего размера экрана, основной объект изображения может стать слишком маленьким по размеру. Вы хотите отобразить другое изображение (более ориентированное на основной объект) в другом размере экрана, но все же хотите отображать отдельные файлы одного и того же изображения на основе соотношения пикселей устройства и хотите настроить высоту и ширину изображения на основе вьюпорта.

Поскольку наши изображения — это фотографии, и мы всегда хотим, чтобы они находились в заданной по умолчанию позиции DOM, заполняющей максимум своего родительского контейнера, нам не нужен picture (который позволяет нам определить альтернативный источник для другого разрешения или поддержки браузера — например, пытаться отобразить SVG, затем PNG, если SVG не поддерживается) или sizes (который позволяет нам определить, какую часть вьюпорта должно занимать изображение). Мы можем избавиться от использования только srcset, который загружает версию другого размера одного и того же изображения в зависимости от размера экрана.

Добавление srcset

Первое место, где мы сталкиваемся с изображениями, находится в home-galleries-lazy-load.html.twig , частичном шаблоне, который отображает список галерей домашнего экрана.

Мы видим здесь, что ссылка изображения извлекается из фильтра Twig, который можно найти в файле src/Twig/ImageRendererExtension.php. Он принимает идентификатор изображения и имя маршрута (определенное в аннотации в маршруте serveImageAction ImageController) и генерирует URL-адрес на основе этой формулы: /image/{id}/raw -> замените {id} указанным идентификатором:

Давайте изменим это на следующее:

Теперь все URL-адреса изображений будут иметь —x как суффикс, где x — их размер. Это изменение мы применим и к нашему тегу img, в форме srcset. Давайте изменим его на:

Если мы обновим домашнюю страницу сейчас, мы заметим, что новые размеры srcset перечислены:

Улучшение восприятия производительности: изменение размера изображения по требованию

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

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

В templates/gallery/single-gallery.html.twig мы применяем те же исправления, что и раньше. Мы имеем дело с эскизами, поэтому давайте просто сжимаем файл, добавляя параметр размера в наш фильтр getImageUrl:

И теперь перейдем к реализации srcset, наконец! Представления отдельных изображений отображаются с помощью модального окна JavaScript в нижней части одного и того же вида галереи:

Есть вызов append который добавляет элемент img в тело модального окна. Именно здесь будет наш атрибут srcset. Но поскольку наши графические URL-адреса динамически генерируются, мы не можем действительно вызвать фильтр Twig из script. Один из вариантов заключается в том, чтобы добавить srcset в миниатюры, а затем использовать его в JS, скопировав его из элементов превью. Но это не только заставит загружать полноразмерные изображения на фоне эскизов (из-за широкого вьюпорта), но будет также вызываться фильтр 4 раза для каждой миниатюры, замедляя работу. Вместо этого давайте создадим новый фильтр Twig в src/Twig/ImageRendererExtension.php, который будет генерировать полный атрибут srcset для каждого изображения.

Не нужно забывать регистрировать этот фильтр:

Бесплатный курс по PHP программированию

Освойте курс и создайте динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

Мы должны добавить эти значения в пользовательский атрибут, который мы будем называть data-srcset для каждой отдельной миниатюры:

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

Улучшение восприятия производительности: изменение размера изображения по требованию

Последним шагом является обновление JS, чтобы воспользоваться этим:

Добавление Glide

Glide — это библиотека, которая делает то, что мы хотим — изменение размера изображения по требованию. Давайте установим его.

Затем давайте зарегистрируем его в приложении. Мы делаем это, добавляя новую услугу в src/Services со следующим содержимым:

Служба расходует уже заявленную службу FileManager, которая автоматически вводится из-за нового подхода к автоматической подстройке Symfony. Мы объявляем как входной, так и выходной путь в качестве uploads dir, даем выходному каталогу суффикс cache и добавляем метод для возврата сервера. Сервер — это в основном экземпляр Glide, который выполняет изменение размера и возвращает изображение с измененным размером.

Нам нужно сделать метод getUploadsDirectory в FileManager общедоступным, так как он в настоящее время private:

Наконец, давайте изменим метод serveImageAction в ImageController, чтобы он выглядел так:

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

Для демонстрационных целей мы используем более длинный путь и генерируем файлы вручную, добавляя их размер и сохраняя их в папке uploads. Следует отметить, что вы также можете использовать метод outputImage из Glide для прямого вывода изображения, и он будет обслуживаться непосредственно из папки cache, а не сохранять его с суффиксом в основной папке upload. Вы также можете использовать метод makeImage, чтобы просто создать изображение и позволить старой логике получать изображение. Это подход, который мы выбрали ниже:

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

Тестирование

Как только мы обновим домашнюю страницу, которая будет немного медленнее, изображения начнут генерироваться в папке var/uploads. Давайте проверим, не прокручивая вторую страницу.

Улучшение восприятия производительности: изменение размера изображения по требованию

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

Улучшение восприятия производительности: изменение размера изображения по требованию

Да, наше изображение сформировано из оригинала. Но как насчет мобильных устройств? В современных браузерах достаточно легко включить мобильный режим. Попробуем открыть изображение галереи в мобильном режиме и затем проверить папку с изображением.

Улучшение восприятия производительности: изменение размера изображения по требованию

Что, если мы изменим ориентацию и проверим папку?

Улучшение восприятия производительности: изменение размера изображения по требованию

Успех, мобильный размер нашего изображения был успешно сгенерирован, а полноэкранное изображение было повторно использовано, потому что экран нашего «мобильного устройства» в альбомном режиме большой. srcset по требованию был успешно реализован! Приложение с этими обновлениями было помечено как этот релиз.

Заключение

В этой статье мы рассмотрели процесс оптимизации изображений для доставки на фото-ориентированный сайт. Мы сохранили миниатюры с фиксированным размером для достижения наилучших результатов, и с полноэкранными изображениями мы сосредоточились на внедрении srcset — простого дополнения к любому современному веб-сайту — в тандеме с Glide, пакетом для изменения размера изображения по требованию, который может выполнять тяжелую работу за нас.

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

Автор: Bruno Skvorc

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Бесплатный курс по PHP программированию

Освойте курс и создайте динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

Хотите изучить ООП PHP?

Прямо сейчас посмотрите курс по объектно-ориентированному программированию на PHP (ООП PHP)!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree