От чего зависит вес фото

Оптимизируем фотографии для сайтов: детальная инструкция

Фотографии или скриншоты — неотъемлемая часть для любой статьи или публикации. Но многие пользователи сталкиваются с проблемой долгой загрузки страниц с медиаконтентом, что вызывает негативные эмоции. Причина тому — отсутствие должной оптимизации контента. Об это в первую очередь должен заботиться руководитель проекта и SEO-оптимизатор. Фотографии и скриншоты на странице должны быть оптимального размера, который бы помещался на странице. Помимо этого изображение должно быть детализированным, иметь нужный формат и размер. Как это сделать? Читайте далее!

Как выбрать правильный размер фото для сайта

Проблема заключается в том, что современная фототехника позволяет делать снимки в высоком разрешении. Соответственно, их размер зачастую превышает 20-50 мегабайт. Несмотря на наличие у большинства пользователей скоростного интернета, объемные по весу страницы хуже индексируются поисковыми систему в виду своей загруженности. А неправильно подобранные пропорции приводят к тому, что при посещении сайта с мобильного телефона все картинки собьются.

Существует два ключевых размерных параметра для всех фото, загружаемых на сайт:

• Вес, который контент занимает в памяти устройства (компьютер или мобильная техника), измеряется в килобайтах и мегабайтах.
• Размер – Px — измеряется в пикселях, обозначает площадь, которую занимает картинка на странице.

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

Что касается веса медиаконтента, то, чем он меньше, тем быстрее будет грузиться страница. Также необходимо позаботится об оптимизации путем сжатия. Главное — не перестараться, иначе ухудшится качество отображения. Оптимальный вес картинки — 200-400 килобайт, в зависимости от размера.

Кадрирование картинок

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

Нужны ли миниатюры?

Однозначно нужны! Для многих страниц на сайте нужны миниатюрные изображения (как и для страниц интернет-магазинов). Оптимальный их размер в пикселях — всего 250 px при весе в 50 килобайт. Достигните этого значения вручную в редакторе. А на сайтах на Ecwid миниатюры создаются автоматически!

Какие пропорции фото нужно добавлять на сайт

Существует перечень пропорций, которые могут быть добавлены на сайт (оптимальные):

• 1:1 (квадрат с ровным сторонами);
• 4:3 (высокий прямоугольник);
• 3:2 (простой прямоугольник);
• 16:9 (низкий прямоугольник).

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

Настраиваем правильную резкость для фото в Photoshop

Размеры картинки и алгоритм уменьшения напрямую влияют на резкость и детализацию. Для правильной настройки нужно использовать встроенную функцию в редакторе Photoshop. За резкость отвечают параметры Bicubic Sharper. Значение Image Size лучше оставить на уровне 1000 px. Чтобы настроить резкость большого снимка, уменьшайте его размер постепенно, каждый раз на 1000 пикселей. После каждого изменения устанавливайте параметр Bicubic Sharper для настройки резкости. Таким образом вы добьетесь нужного результата без необходимости дальнейшей корректировки.

Способ изменения резкости для опытных пользователей

Этот способ подразумевает собой создание двух слоев фото с разным уровнем резкости.

Следуйте такому алгоритму:

1. Уменьшите размер картинки при помощи параметра Image Size, выбрав дополнительно параметр Bicubic Sharper.
2. Добавьте второй слой на фото параметром Duplicate Layer.
3. Сделайте второй слой более резким (параметр Filter → Sharpen → Sharpen).
4. Сделайте первый слой более прозрачным (параметр Opacity в окне Layer).

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

Какой формат картинок лучше всего подойдет для добавления на сайт

Всего выделяют три актуальных формата фото и скриншотов для добавления на страницы:

• JPEG — наиболее актуальный формат, который поддерживает сжатие с потерей качества или без него (зависит от конечного размера);
• PNG — формат, позволяющий получить наиболее детализированную картинку после сжатия;
• GIF — формат, поддерживающий анимационные изображения (максимум — 256 цветов).

Для выбора последуйте советам:

• если изображение имеет много деталей, выбирайте стандартный JPEG;
• если изображение имеет много ровных заливок, выбирайте PNG, так как в формате JPEG сжатие придаст картинке пиксельности, что будет заметно на ровных краях;
• для анимации выбирайте GIF.

Не рекомендован ни в каком случае формат TIFF.

Чтобы уменьшить размер, потеряв при этом МИНИМУМ качества, воспользуйтесь сервисами: TinyPNG или JPEGmini.

Что делать, если нет Photoshop?

Не у каждого есть полноценная версия Photoshop, особенно если дизайн и создание сайтов вашим призванием не является. Есть альтернатива в виде онлайн версии Фотошопа, которая доступна на их сайте. Несмотря на ограниченный функционал, при помощи веб-программы можно отредактировать размер, настроить резкость. А при необходимости можно приобрести базовую версию, цена которой составляет около 10-20 долларов.

Перечень альтернативных бесплатных редакторов фото:

Эта программа легко устанавливается на ОС Windows, Linux и MacOS. В базовый функционал входит работа со слоями, ретушью, коррекцией цвета. Можно редактировать картинки любого популярного формата, рисовать, вставлять текст.

Эта программа используется только в Windows. Многие ее знают, как один из базовых вариантов для упрощенного редактирования картинки. Программа подходит для полупрофессиональной обработки. В инструменты входит работа со слоями, резкость, коррекция цвета.

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

Эта программа частично способна заменить Фотошоп, так как и по пользовательскому интерфейсу, и по функционалу его повторяет.

Все редакторы, кроме Paint.NET, можно установить и на Windows, и на MacOS.

Как видите, существует множество возможностей правильно настроить и оптимизировать медиаконтент для вашего сайта. Сделать это можно без значительного ограничения в качестве.

Сколько весит фото?

Миф гласит:
1. «Чем больше весит фото, тем лучше»
2. «Хорошее фото должно весить не меньше, чем . мегабайт»

Суть мифа в том, чтобы измерять качество фотографии его «весом» в мегабайтах, и считать плохими те, которые весят недостаточно. Величина «достаточно» при этом постоянно растёт.

Истоки мифа:

1. Маркетинг – необходимость постоянного обновления. В случае с камерами – постоянный рост числа мегапикселей. При этом качество фото зачастую увеличивается не так быстро или совсем не растёт, т.к. оно зависит также от других вещей. Но число мегапикселей влияет на количество точек в фотографии и её вес, поэтому вес растёт из года в год. Недавно «хорошее» фото весило 2-5 мегабайт, сейчас 20 Мб не предел.

2. Облачные хранилища. Другие участники индустрии поддерживают этот миф – фото надо где-то хранить. Вам предлагают бесплатную загрузку фото в облако, потом платные тарифы, и т.п.

3. Упрощение. Часто за стандарт принимается использование максимальных настроек на всех этапах, вместо изучения технической стороны.

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

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

Чем легче картинка, тем быстрее она загружается. Вес зависит от двух параметров:
1. Величины в пикселях по ширине и высоте (фотография размером 3000х2000 пикселей тяжелее, чем фото 300х200 пикселей)
2. Содержания самой картинки — чем больше на фото мелких деталей и цветов, тем она больше весит.

Правильнее всего сначала изменить размер изображения, а затем удалить избыточную информацию, чтобы дополнительно уменьшить вес.

Каким должен быть размер изображения?

Все изображения большого размера при загрузке на Тильду автоматически уменьшаются до 1680 px по большей стороне. Картинки меньше 1680 px сохраняют оригинальный размер.

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

Перед загрузкой на Тильду фотографии большого размера сократите как минимум до 1680 px по большей стороне.

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

Чтобы узнать размер изображения, добавьте блок на страницу, включите сетку (в настройках любого текстового блока) и посмотрите, сколько колонок занимает фотография. Одна колонка — 60 px, расстояние между колонками — 40 px.

Как максимально уменьшить вес изображения?

Существуют специальные программы, которые сжимают изображения, объединяя схожие цвета. Они делают это достаточно умно — визуально разницы нет, но вес фотографии сокращается значительно — может доходить до 70%.

• TinyPNG
• Squoosh
• Kraken
• Compressor
• Compressjpeg
• ImageOptim (требует установки на Mac)

Пример оптимизации изображения

Рассмотрим на примере фотографии Christoph Bengtsson Lissalde, скачанной с Unsplash, как оптимизируется изображение.

Исходные размеры файла: 4405×2478 px и 3,5 мб.

Загрузим её на Тильду как есть. Фотография обрежется до 1680×945 px, а ее размер станет 1,2 мб.

Откроем исходный файл в Photoshop, поменяем размеры на 1680×945 px, а затем сохраним, то получим 832 кб.

Загрузим фото в TinyPNG. Фотография уменьшилась до 353 кб.

Сколько должны весить картинки на сайте

Сжатие, при котором изображение будет весить не более 100 Kb и сохранит качество. Это напрямую влияет на скорость загрузки сайта и поведенческие факторы пользователей, которые не готовы ждать. Пользователь не оценит 20 Мб баннер в хорошем качестве, так как покинет страницу раньше, чем дождётся загрузки.

Какой оптимальный вес у изображения

Рекомендуемый вес для веба не должен превышать 100-150 Kb, оптимальный – в идеале не больше 100 Kb. Всё зависит от сайта и качества изображения. Нет универсального ответа на вопрос, так как многие владельцы сайтов преследуют глобальную цель – скорость загрузки страницы, которая в том числе зависит от веса изображения. Главное найти баланс между качеством и весом.

Как лучше совмещать сжатие с потерями и без потерь

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

Советы по оптимизации изображений

Выбирайте изображения в векторных форматах

Качество не зависит от разрешения и масштаба, поэтому они подходят для больших экранов и разных типов устройств.

Минифицируйте и сжимайте SVG-ресурсы

Многие графические приложения добавляют XML-разметку, которая часто содержит ненужные метаданные. Ее можно удалить. Убедитесь, что на серверах настроено GZIP-сжатие для SVG-ресурсов.

Выбирайте наиболее подходящие растровые форматы

Определите необходимые требования к изображениям и выберите нужный формат для каждого ресурса.

Пробуйте разные настройки качеств для растровых форматов

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