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

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

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

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

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

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

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

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

Лучшее качество экспорта JPG с ImageRecycle

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

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

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

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

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

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

Решение:

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

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

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

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

Выдержка из кода:

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