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

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

Для примера я взял одну из своих фотографий. Оригинальный размер: 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 и выбираем удовлетворительное качестро при минимальном размере.

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

Общий вывод:

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

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