Онлайн-изменение размера и оптимизация изображений

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

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

Отрегулируйте размер в соответствии с вашим контентом

Всегда изменяйте размер изображений в соответствии с размером контента или его шириной. Например, если ширина области контента ограничена 650 пикселями, то нет необходимости увеличивать размер изображения сверх 650 пикселей, поскольку страница будет отображать только до 650 пикселей. Если размер изображения меньше или больше размера контейнера, качество отображения ухудшится.

Адаптировать разрешение изображения для веб-сайтов

В описании веб-сайта не будет никакого упоминания о «на дюйм». PPI (пиксели на дюйм) и DPI (точки на дюйм) не имеют никакого значения при редактировании или изменении размера изображения для любых целей, таких как отправка по электронной почте, ведение блога или публикация в социальных сетях. За исключением печати и отображения на экране, вы не сможете заметить никакой разницы в характеристиках или качестве изображения.

Это особенно актуально для PDF-файлов : избегайте предоставления PDF-файлов для чтения в интернете, содержащих изображения с разрешением выше 72 dpi. В этом случае ImageRecycle : оптимизируйте PDF-файл с изображениями разрешением 300 dpi, и вы сможете сэкономить 98% размера PDF-файла, сохранив при этом идеальное качество для чтения в интернете.

Наилучшее качество экспорта в формате JPG с помощью ImageRecycle

В Photoshop для веб-публикаций рекомендуется сохранять изображения в формате JPEG с максимальным уровнем сжатия 20%. Вы также можете поэкспериментировать с различными параметрами сжатия JPEG, чтобы найти оптимальный для вас вариант. Применение глобального сжатия — это вопрос баланса между размером и качеством.

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

Имейте в виду: чем меньше сжато исходное изображение, тем лучше будет оптимизация и размер.

В приведенном ниже примере я экспортировал 4 изображения в формате JPG с помощью Photoshop с уровнями качества: 60% | 80% | 90% | 100%.
Затем я оптимизировал изображения с помощью ImageRecycle , вот результат по размеру. Что касается качества, то изображения с уровнем 90%/100% немного лучше, чем два других. Вывод: экспортируйте изображения JPG с минимальным сжатием, ImageRecycle сделает все остальное!

Оптимизируйте итоговые изображения

В зависимости от вашего веб-сайта, одни и те же изображения могут отображаться на разных страницах с разными размерами. Обычно это встречается на сайтах электронной коммерции со слайдером, списком товаров, подробным описанием товаров и т.д.
Изменение размера обычно выполняется с помощью онлайн-библиотеки PHP, например, GD. Убедитесь в качестве и весе ваших ОРИГИНАЛЬНЫХ и КОНЕЧНЫХ пользовательских изображений. Не доверяйте онлайн-библиотекам и генераторам кэша, иначе у вас могут возникнуть проблемы с качеством и размером. Если ваше оригинальное изображение уже оптимизировано на вашей стороне (путем тонкой настройки качества, цветов, сжатия) для экономии трафика и скорости загрузки страницы, то с помощью некоторых библиотек для изменения размера веб-изображений вы можете все это потерять!

Решение:

• Примените оптимизацию к изображению, отображаемому в браузере конечного клиента. Вы можете сделать это вручную для каждого изображения и для каждого размера, или использовать наш API или расширение CMS ImageRecycle , чтобы выбрать папку, где хранятся ваши готовые изображения. Затем запустите автоматическую оптимизацию.
• Используйте наш инструмент для изменения размера оригинальных изображений. Вы сможете сэкономить место на сервере, быстрее обрабатывать изображения, и обычно вам не потребуется изображение шириной более 1600 пикселей для окончательного отображения

Что дальше: HTML5 и...<picture> элемент

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

Он<picture> Элемент HTML5 пытается решить эту проблему. Преимущество оптимизированных для нативного использования графических ресурсов заключается в сокращении времени загрузки, что особенно важно для пользователей с медленным мобильным интернет-соединением.<picture> Элемент позволяет осуществлять реальное динамическое изменение размера, просто передавая браузеру HTML-инструкцию.

Фрагмент кода:

В настоящий момент ограничение заключается в том, что для корректной работы требуется очень новая версия Chrome (39) и некоторый JavaScript. В ближайшем будущем, благодаря использованию этой технологии в сочетании с оптимизатором изображений, можно ожидать наилучшего результата по времени загрузки веб-сайта.