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

Метод обрезки

Веб-дизайнеры часто прибегают к методу обрезки для подгонки и оптимизации размера изображений для сайтов. Этот нехитрый способ заключается в «обрезании» холста изображения по краям до необходимого размера:

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

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

Уменьшение с сохранением пропорций

Данный метод используется, когда необходимо уменьшить изображение с сохранением пропорций:

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

Примеры уменьшения «веса» картинки при уменьшении размера в 2 раза

Уменьшение с нарушением пропорций

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

В отношении уменьшения «веса» изображения данный метод не отличается от предыдущего.

Как уменьшить размер картинки в HTML?

Данный метод предполагает использование HTML-атрибутов атрибутов Width и Height тега img, устанавливающих размеры ширины и высоты изображения:

<img src="image.jpg" width="800px" height="600px" />

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

Как уменьшить размер с помощью CSS?

Данный метод предполагает использование следующих CSS-свойств, применяемых к тегу img:

• width,
• height,
• max-width,
• max-height,
• min-width,
• min-height.

В качестве единиц измерения для значений могут применяться не только пиксели, но и проценты от ширины и высоты родительского элемента, а также другие единицы, применяемые в CSS.

Встроенные CSS-правила

<img src="image.jpg" style="width:800px; height:600px" />

Внешние CSS-правила

img{  	max-width:800px;  	min-width:100%;  }

Как уменьшить размер с помощью JS?

Этот способ применяется для интерактивных или других динамических изменений размеров изображений, если это невозможно реализовать с помощью CSS:

// Установка размера картинки посредством jQuery  $('img.class').width(800).height(600);

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

Графический редактор Paint позволяет уменьшать картинки как методом обрезки холста, так и посредством масштабирования с сохранением пропорций или без него:

Как уменьшить размер картинки в Photoshop?

Уменьшить изображение в «фотошопе» можно как обрезкой холста, так и масштабированием.

Инструмент «Рамка»

Данный инструмент редактора Photoshop позволяет уменьшать размер холста картинки в окне редактирования:

1. выберите инструмент «Рамка» («Crop») в панели инструментов (по умолчанию клавиша C)
2. изменяте размер изображения в окне редактирования с помощью рамки

Функция «Размер холста»

Эта функция редактора Photoshop позволяет устанавливать размер холста картинки в модальном окне:

1. в верхнем меню программы выберите Изображение → Размер холста... (по умолчанию клавиши ALT + Ctrl + C),
2. в модальном окне укажите новый размер холста,
3. укажите сторону холста для обрезки в разделе «Расположение»,
4. нажмите ОК.

Функция «Размер изображения»

Позволяет изменять размер картинки посредством масштабирования с сохранением или без сохранения пропорций:

1. в верхнем меню программы выберите Изображение → Размер изображения... (по умолчанию клавиши ALT + Ctrl + I),
2. в модальном окне укажите новый размер изображения и метод ресамплинга,
3. нажмите ОК.

Функция «Сохранить для Web»

Уменьшить размер картинки можно при сохранении с помощью данной функции:

1. в верхнем меню программы выберите Файл → Экспортировать → Сохранить для Web(по умолчанию клавиши ALT + Ctrl + Shift+ S),
2. в модальном окне укажите новый размер изображения и метод ресамплинга,
3. нажмите Сохранить....

Как узнать размер картинки на сайте?

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

Также чтобы узнать исходный и отображаемый размер картинки можно использовать инспектор кода браузера:

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

Оптимальным геометрическим размером изображения является тот, в котором оно отображается на сайте.

Если картинка имеет размер 1000×500 px, а отображается на сайте в размере 100x50 px, то целесообразно уменьшить её до отображаемого размера (при этом количество пикселей уменьшится в 100 раз), что существенно снизит вес картинки и веб-страницы в целом.

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

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

Метод ресамплинга выбирается при использовании функций «Сохранить для Web» и «Размер изображения».