Косячим: Изображения

Я обращаю внимание, что зачастую вебмастера и контент-менеджеры очень наплевательски относятся к изображениям на сайте. Это заключается в том, что они берут фотографию и вставляют ее на сайт в исходном варианте. Потом ставят ширину (или высоту или и то и другое) и всё. Фотография на сайте вроде небольшая по размеру, но «вес» значителен, что неблагоприятно сказывается на скорости загрузки страницы.

Попытаюсь поставить таких людей на путь истинный.

Для примера я взял одну из своих фотографий. Оригинальный размер: 2816 × 2112, размер файла 2.6 MB. Много, не правла-ли? Попробуем вставить ее на сайт вышеупомянутым «рукотазым» методом.

<img src="original_photo.jpg" width="640" height="480">

Все нормально, фото небольшое, но весит так-же как и раньше — 2.6 MB. Этого доспускать нельзя. Открываем графический редактор и меняем размер фото, потом сохраняем как JPG.

Размер изображения 640x480, размер файла 603 kb.

Возможно вы обратили внимание, что эта картинка открылась не сразу. Это потому, что размер файла все-равно велик. Уменьшаем дальше с потерей качества:

Размер изображения 640x480, размер файла 79 kb (качество JPG: 40).

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

Размер изображения 640x480, размер файла 49 kb (качество JPG: 10).

Неважный результат, много артефактов, размер файла небольшой, а может попробовать формат GIF а не JPG:

Размер изображения 640x480, размер файла 288 kb (256 цветов).

Хороший результат, качество нормальное, но размер файла бОльший, нежели мы делали JPG с таким-же качеством изображения, попробую… нет, пробовать не буду, а просто вам покажу пример в GIF, чтобы размер файла был не выше 100 kB:

Размер изображения 640x480, размер файла 105 kb (16 цветов).

Плохо. Качество никудышное, и размер файла все-равно больше 100 kB, но хуже уже только нецветное фото.

Вывод: уменьшаем размер фоток, далее экспортируем их в формат JPG и выбираем удовлетворительное качестро при минимальном размере.

Вроде пора и закончить, но возьмем не фотографию, а табличку, схему и т.д.

Размер изображения 480x640, размер файла 126 kb.

Уменьшаем с потерей качества:

Размер изображения 480x640, размер файла 52 kb (качество JPG: 50).

Отлично. А можно еще меньше?

Размер изображения 480x640, размер файла 39 kb (качество JPG: 10).

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

Размер изображения 480x640, размер файла 32 kb (256 цветов).

Отлично, это лучшее качество GIF 256 цветов, и при этом размер файла меньше чем самый плохой JPG. Пробуем уменьшить кол-во цветов:

Размер изображения 480x640, размер файла 25 kb (64 цвета).

Отлично. Пробуем еще уменьшить:

Размер изображения 480x640, размер файла 11 kb (2 цвета).

Ерунда. Предыдущий вариант идеален.

Вывод: уменьшаем размер схем, таблиц, графиков, далее экспортируем их в формат GIF и выбираем удовлетворительное качестро при минимальном размере.

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

Цветная картинка
КачествоРазмер файлаОптимизация
JPG (Качественный показатель — коэффициент сжатия)
90189 kB-60%
80132 kB-72%
70108 kB-77%
6094.6 kB-80%
5085.7 kB-82%
40 Лучший результат 77.3 kB-83%
3068.7 kB-85%
2058.9 kB-87%
1047.5 kB-90%
GIF (Качественный показатель — кол-во цветов)
256281 kB-41%
192257 kB-46%
160245 kB-48%
128227 kB-52%
96206 kB-56%
64172 kB-64%
32138 kB-71%
16102 kB-78%
869.1 kB-85%
443.8 kB-90%
224.2 kB-94%
Схема
КачествоРазмер файлаОптимизация
JPG (Качественный показатель — коэффициент сжатия)
9071.5 kB-29%
8061.7 kB-38%
7056.8 kB-43%
6053.4 kB-47%
5051.2 kB-49%
4048.7 kB-51%
3046.0 kB-54%
2042.6 kB-57%
1037.6 kB-62%
GIF (Качественный показатель — кол-во цветов)
25631.1 kB-69%
19224.8 kB-75%
16024.8 kB-75%
12824.8 kB-75%
9624.8 kB-75%
64 Лучший результат24.8 kB-75%
3220.1 kB-80%
1620.1 kB-80%
815.4 kB-84%
415.4 kB-84%
210.2 kB-89%

Общий вывод:

  • Фотографии надо уменьшать в размерах (пиксели). Руками в фотошопе или автоматически в специальной утилите.
  • Фотографии надо сжимать. Сжимать до такой степени, чтобы они выглядели еще хорошо, но размер был меньше. По опыту скажу, автоматические утилиты — дрянь, т.к. на одном фото сжатие наполовину дает отличный результат, а на другой — плохой. Поэтому если вам важно — то работайте индивидуально с каждой фотографией.
  • Используем разные форматы GIF для таблиц, схем и т.д., JPG — для фотографий. (про PNG тут не говорил, но их используют если нужна прозрачность)
  • Где можно обойтись без картинки (видел я сканы прайс-листов) — обходимся без картинки
  • Если картинка изначально хреновая — то выкидываем ее. Всякие «улучшатели» — не более чем развод.
  • Ну и читать всякие умные статьи дядек и тетек про подобное.

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

7 comments
Могу посоветовать отличный сервис — www.jpegmini.com/main/shrink_photo, коим пользуюсь сам. Сжимает jpg и jpeg файлы без потери качества. Причем сжимает реально. Лучшей альтернативы не нашел. На счет тамошней рекламы не знаю конечно, но в два и три раза он сжать может запросто. Это притом, что фотка уже весит около 500-900кб. Быстро и качественно. PNG сжимаю тут www.punypng.com/, если вдруг надо картинку оставить без фона. Конечно если вставляешь фотку с определенным размером нет смысла ее делать больше, а потом просто указывать размер. Смысла в этом нет.
jpegmini потестил — отличный результат. Фото с автомобилем сжал до 138 kB. Но для статейных картинок это все-равно много. А вот для организации фотогалереи — наверно будет супер, причем у них там написано, что регистрируйтесь и загружайте свои фотки, делайте галереи.По опыту, для статей, только руками в фотошопе и каждую фотку по отдельности надо. У меня были 2 фотки почти одинаковые, в духе «найди 10 отличий», короче на одной был синий предмет, на другой красный. Одна фотка на качестве 49 была хорошая, а на 48 — уже появлялись артефакты. Я экспортировал в 49 и вторую неглядя тоже в 49. Потом удивился, что вторая фотка с артефактами. Открыл заново экспорт — от те на… только на 52 артефакты исчезли. Спасибо за ссылки.
Скачал декстопное приложение jpegmini…
Там вроде только на мак у них… Я довольствуюсь вэб версией ;)
Все же немало причин у появлений артефактов того, или иного изображения… Не думал, что настолько элементарных — другой цвет.