Оптимизируем изображения web-сайтов

Есть множество способов оптимизировать изображения в веб. Начиная от самых простых (вместо .bmp использовать .png), заканчивая построением модели человека и изучением значимости артефактов компрессии.

ПрограммыOpenSourceterminal

Есть множество способов оптимизировать изображения в веб. Начиная от самых простых (вместо .bmp использовать .png), заканчивая построением модели человека и изучением значимости артефактов компрессии.

Пока что сильно глубоко погружаться не будем. Остановимся на самом простом способе — как ускорить передачу изображений уже сейчас.

Предположим, что мы более-менее разумные люди, и используем в основном 2 формата данных для изображений: jpeg и png. Опять же, svg и шрифтовые иконки прекрасны, но мы сейчас делаем самое быстрое и простое.

Чтобы оптимизировать jpeg и png нам потребуется установить 2 утилиты:

sudo apt-get install jpegoptim optipng

— одна оптимизирует jpeg, другая — png. Обе без потери качества.

Вариант даю только для Ubuntu / Debian —  ибо подозреваю, что более-менее разумные люди на Windows не хостятся, FreeBSD встретить нынче сложно, MacOS на серверах опять же иметь не много смысла, а пользователя CentOS и прочих Gentoo сами знают, что apt-get надо заменить на yum, emerge и иные пакетные менеджеры.

Оптимизируем все png в текущей директории:

optipng -o2 *.png

Для особо «жадных» можно использовать -o7 — сжимать ещё сильнее. Правда, скорость этого… В районе фото в минуту.

Оптимизируем все jpeg в текущей директории:

jpegoptim *.jpg

Теперь наши jpeg и png файлы оптимизированы!

Фото Расположение элементов на странице
Расположение элементов на странице

Уверен, когда вы делали задание из первого урока, элементы на странице не слушались, наезжали друг на друга, в общем, не хотели стоять так, как хотелось бы вам. Для того, чтобы их укротить нам потребуется понимание того, как браузер расставляет эти самые элементы. Хотя бы базовое.

Фото Время не то, чем кажется
Время не то, чем кажется

Да, наша реальность предполагает наличие такого абстракта как время. Материя + движение = время, время + материя = движение, движение + время… ну вы поняли. Вот такая реальность нам попалась.