Первое, что можно сделать для оптимизации, — уменьшить размер растровой картинки. Так они будут быстрее передаваться по сети. Есть два способа:
- Уменьшить непосредственно размер.
- Сжать изображение.
Рассмотрим каждый из них подробнее.
- Уменьшить размер картинки.
Иногда изображения, которые вы находите для статьи или страницы, значительно больше, чем может «вместить» окно. На большинстве сайтов ширина контентной области — 600-800 пикселей.
Поэтому не нужно загружать графические элементы размера 1200×800 пикселей. Система уменьшит картинку самостоятельно, но с сервера будет загружаться оригинал, это будет дольше.
Узнайте, какого размера окно для изображения, и обрежьте его самостоятельно.
Что еще можно сделать, чтобы уменьшить размер? Вставить на сайт кликабельную миниатюру в 200—300 пикселей в ширину. Если кликнуть на нее, она раскроется в полном размере.
Миниатюры занимают меньше места — загрузка страницы ускоряется.
Сделать такое можно через плагины. Например, в WordPress — это Lightbox.

У такого подхода есть неочевидное преимущество. Не всегда изображение 600-800 пикселей передает детали, особенно, если это инфографика, инструкция, скриншот. В подобных случаях выручит кликабельная миниатюра. Нажав на нее, пользователь раскроет картинку в полном размере и изучит каждую деталь.
Если ранее мы говорили про уменьшение размера картинки, то сейчас перейдем к уменьшению веса. Это следующий этап оптимизации. Сжатие позволяет «сделать изображение легче» без потери качества.
Если для читабельности картинки не нужна широкая цветовая палитра, можно уменьшить количество цветов до 256. Это вдвое сократит вес изображения.
- Применить дельта-кодирование пикселей.
Соседние пиксели графического элемента часто похожи по цвету: человеческий глаз не всегда способен заметить незначительные различия между ними. Используя дельта-кодирование, можно записывать разницу между соседними пикселями вместо их абсолютных значений. Если пиксели имеют схожие цвета, дельта будет равна нулю: это сократит вес пикселя до 1 бита.