Вопрос или проблема
У меня есть личный сайт на WordPress, который я использую как блог. Недавно я решил создать несколько фотогалерей, используя плагин NextGEN gallery. Я наивно загрузил оригинальные изображения, и поскольку все они имеют размер 2592×1944 и весят хотя бы 1 МБ, загрузка фотографий происходит очень медленно.
Самым простым решением было бы запустить скрипт, чтобы изменить размер всех изображений до чего-то более приемлемого, возможно, 1280×1024 или что-то в этом роде. Конечно, это слишком большой размер для некоторых мобильных пользователей и слишком маленький для некоторых пользователей настольных компьютеров. Единого разрешения, подходящего для всех, не существует.
Похожая проблема существует для потокового видео, и стандартным решением в индустрии является потоковое вещание с адаптивным битрейтом. По сути, дистрибьюторы контента перекодируют видео несколько раз, возможно, с 3 HD битрейтами и 3 SD битрейтами. Клиент знает, какое разрешение имеет его дисплей, и может легко определить скорость своего соединения, чтобы выбрать лучший поток для данного дисплея и соединения.
Я хочу, чтобы решение для фотогалереи с собственной хостингом делало то же самое. Я хочу иметь возможность загрузить множество изображений с высоким разрешением, после чего бэкенд преобразует их в несколько различных форматов. Фронтенд должен иметь логику, которая автоматически извлекает “правильное” изображение с сервера.
Существует ли что-то подобное? Или это что-то, что мне придется строить самому? Я провел небольшое исследование, но трудно найти то, что я ищу, так как я не уверен, как эта функция называется в мире обмена фотографиями.
Спасибо!
Меньшие версии статических изображений обычно называются миниатюрами. Современные браузеры позволяют указать несколько источников изображений, и будет использован первый подходящий:
<picture>
<source media="(max-width: 720px)" >
<source media="(max-width: 1920px)" >
<img src="tree-uhd.jpg" alt="A tree.">
</picture>
<img src="tree-sd.jpg" alt="A tree.">
Похоже, что WordPress уже делает это.
Если вы не хотите тратить пространство и трафик на альтернативные копии фотографий, используйте прогрессивный JPEG и частичную загрузку, так как я сомневаюсь, что браузеры делают это самостоятельно.
Ответ или решение
Оптимизация загрузки изображений на вашем сайте может стать важным фактором, особенно если вы работаете с большим количеством высококачественных фотографий. Вот несколько решений, которые помогут вам реализовать "адаптивную скорость передачи" для вашей галереи изображений в рамках WordPress, используя NextGEN gallery или другие инструменты с открытым исходным кодом.
Определение проблемы
Вы обнаружили, что исходные изображения большого размера (2592×1944 пикселей, не менее 1МБ) замедляют загрузку вашего сайта. Различные устройства и скорости Интернета требуют разных разрешений изображений для оптимального отображения, и вы хотите, чтобы ваш сайт автоматически предлагал подходящую версию файла каждому пользователю.
Решения проблемы
1. Использование формата <picture> и атрибута srcset
HTML-разметка позволяет вам предложить браузеру несколько разрешений изображений для выбора в зависимости от размера экрана. Пример:
<picture>
<source media="(max-width: 720px)" >
<source media="(max-width: 1920px)" >
<img src="tree-uhd.jpg" alt="A tree.">
</picture>Либо использовать srcset с изображением:
<img src="tree-sd.jpg" alt="A tree.">Это позволит браузерам выбирать наиболее подходящее из доступных изображений.
2. Автоматическая генерация адаптивных изображений
WordPress имеет встроенные механизмы для работы с адаптивными изображениями. Вы можете загрузить исходное изображение высокого разрешения, и WordPress автоматически создаст меньшие версии. Для улучшения этой функции можно добавить или настроить плагины, которые помогут с оптимизацией изображений:
- Smush или Imagify для сжатия изображений без потери качества.
- ShortPixel для сжатия и генерации множественных размеров изображений.
3. Интеграция сторонних библиотек
Если штатный функционал WordPress ограничен для ваших нужд, вы можете рассмотреть интеграцию с библиотеками для управления изображениями, такими как:
- ImageMagick или GD Library для создания масштабируемых изображений с различными разрешениями на сервере.
4. Использование прогрессивных JPEG
Вы можете также использовать прогрессивные JPEG. Это изображения, которые "проявляются" постепенно при загрузке, что создает иллюзию более быстрой загрузки. Тем не менее, для полной загрузки прогрессивного JPEG может потребоваться столько же времени или больше, чем для базового изображения.
Заключение
Реализация адаптивной скорости передачи изображений требует сочетания эффективных техник сжатия, кода HTML для создания адаптивной разметки и поддержки серверных технологий для управления изображениями. Чтобы облегчить пользователям взаимодействие с вашей галереей, обратите внимание на автоматизацию процесса с помощью плагинов и скриптов для масштабирования изображений. Безусловно, правильное управление изображениями требует планирования и анализа, но эти усилия обеспечат качественное взаимодействие пользователей с вашим сайтом.