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

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

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

Адаптируйте размер в соответствии с вашим контентом

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

Адаптируйте разрешение изображения для Интернета

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

Это особенно актуально для PDF- файлов. Не делайте доступным для чтения в Интернете PDF-файл, содержащий изображения с разрешением выше 72 точек на дюйм. В этом случае может помочь оптимизатор PDF 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 сделает все остальное!

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

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

Решение:

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

Что дальше: HTML5 и элемент

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

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

Отрывок кода:

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