Я работаю с графикой для web с тех бородатых времен, когда случайное нажатие кнопки wap на телефоне могло привести к инфаркту и моментальному списанию всех средств на счете. В погоне за мобильной доступностью цифровых продуктов в те времена приходилось исхитриться каждый раз и делать это по новому. Сегодня, специалисты в вэб — как спецы в геймдеве «оптимизация? не не слышал» для игр у тебя должна быть 5090, в для сайтов 5g и гигабит, 2026 ведь на носу.

Я решил поделится теми «привычками» оптимизации контента/графики, которые  уже 20 лет в моем арсенале и остаются актуальными и по сей день.

1. Онлайн сервисы

Доведено до автоматизма — открывая проект в tilda, открываю tinypng в соседней вкладке. Нашел изображение в сети, выгрузил его из figma — сразу тащи в tinypng, иначе потом забьешь.

Чем пользуюсь из онлайн сервисов по оптимизации:

tinypng.com — отлично сжимает растровую графику

ezgif.com/optimize — лучший при работе с gif, спасает когда не хочется открывать ps или ae
svgoptimizer.com — для иконок пару бит сократит, но для схем планировок будет уже незаменим

2. Не ленись, расайзни

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

3. Пере-используй ассет

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

Здесь придется заморочиться с пропорциями при сохранении и позиционированием файлов, но дополнительно будет влиять и на следующий пункт

4. Форматный микс

Например, ты делаешь анимацию, где объекты выезжают на фоне центрального, при этом форма центрального объекта имеет изгибы (не прямые линии). Тогда центральный объект сохраняй в png, а объекты на фоне в jpg.

5. Разделяй

Можно пойти еще дальше. Центральный объект не движется, поэтому ему никчему целостность, центральную его часть сохраняем в jpg а кнопки отдельно в png. А там где элементы на ноне заходили на скошенные уголки, делаем их менее, до начала скругления центрального объекта.

6. Дорисуй

Если так подумать, зачем нам вообще png здесь. Кинь прямоугольник градиентом кодом или нарисуй его в зероблоке.

7. Перепечатывай

Текст видишь? И я не вижу!

Зато вижу сложную последовательность закодированных пикселей. Если на растре — это не так критично, то svg файлы с текстом переведенным в кривые будет весить много. Эту проблема ты встретишь в логотипе Самолета и планировках квартир.

В одной «шестерке» больше углов и направляющих, чем во всем контуре квартиры. Поэтому, когда у тебя нет возможности вставить нормально вставить svg, текст выноси из изображения и печатай его отдельно текстом (например в зероблоках тильды).

8. Вставляй svg правильно

Если ты заморочишся, и вставишь svg правильно, то текст в svg у тебя останется текстом. Вот например у Пика так.

9. Вообще не вставляй SVG

Сэкономь 10 килобайт — набери логотип, отрисованный фирменным шрифтом, шрифтом заданным в стилях (скорей всего это один и тот же шрифт). 

Это здесь 10 килобайт, а сколько ты сэкономишь в блоке «партнеры», «бренды» или «нам доверяют». Люди считаю логотипы корректно, даже если их шрифты будут не совсем фирменными, а похожими. Да и выглядеть они будет аккуратнее.

10. Делай в два раза больше SVG

В Пике все же работает крутой чел, который работал с оптимизацией графики. Посмотри, слева изображение квартир в плитке, справа изображение квартиры на отдельной странице.

А разница в том, что на изображениях в плитке, на планировках нет цифр указывающих площади.

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

Готовь для разных мест отображения, 

разные варианты изображения.

11. Не ретина

Да, да качество превыше всего. Но только когда оно загрузится и при условии, что пользователь этого дождется. Сохранять все изображения в размере x2 можно, если у вас из 3-4. А если 50?

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

Если у вас композиция, то не все объекты должны быть x2. Центральное может быть x2, а для фоновых или боковых будет достаточно 1,5.

12. Не ретина 2

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

А если вспомнить пункты 7 «перепичатывай». 3 «переиспользуй» и 4 «форматный микс», то можем получить «четкий» для восприятия результат с меньшим весом. 

Контур телефона x2 и текст будут давать резкость. центральное изображение с фортретом в 1,5 - будет достаточно для фокуса внимания, и доп экраны на фоне в x1, но вписанные в рамку x2 будут смотреться хорошо при беглом считывании из за центрального изображения. 

13. Маскируй

Если это не лендинг на Тильде, то ты можешь воспользоваться умением фронтендера обрезать jpg по маске, вместо того, чтобы отдавать ему png.

А если это лендинг на тильда, но тебе нужны просто скругленные углы, то задаешь радиус скругления. И не парься, что твое скругленные по радиусу, не такое «естественное», как суперэллипсы эпла. Людям с твоим лендингом не жить, воспользуются раз и забудут. 

14. Сохраняй все что можно в JPG

Если у тебя изображение «на вылет», та ни в коем случае не сохраняешь его в png. Ты сохраняешь и карточку и центральный объект единым изображением с фоном сайта.

15. А может лучше в PNG?

Всегда проверяй, что весит меньше jpg или png. Может статься, что png на «сложных» изображениях с большим количеством деталей будет весить меньше. И проверяй это после сжатия в tinypng)

16. PNG 8

256 цветов — наше все! Нужен тебе альфа канал в изображении, но вес png кусает — открой старенькую машинку на core2duo с виндовс xp, залей на флешку свое изображение, открой старенький афтер эффектс и конвертируй в восьмерку. 

Ну или сделайте это онлайн тут

На сайте henderson отличные примеры работы со сниженной цветовой палитрой в изображениях

Выдают такие извращения — тени.
Но вы их не увидите ввиду следующего пункта

17. Забудь о сглаживании

Gif был хорош всем, кроме бинарных вариантов в альфа канале (и весе). Но для анимации долго не было альтернатив. Формат aPNG — не прижился, зато теперь есть webp. И при всем при этом можно смело «булить» тени. Потому, что вы все равно будете сохранять изображение x1,5 - x2. и антиалиасинг возьмет на себя браузер. 

Собственно сайт Handerson’а тому подтверждение.

18. Webp

После всех манипуляций и оптимизаций jpg и png, в обязательном порядке конвертируй все в webp, если этого не делает сервер проекта. Можно здесь. 

19. Целочисленный SVG 

Магия «облегчения» SVG заключается в минимизации узлов, направляющих и (барабанная дробь) их целых значениях. Если у тебя вершина стоит по координате X в значении 1 — то это один байт (условно), а если значение 1,1234 — то это 6 байт. Если угол направляющей 45% — то это 2 байта, а если ты решил его сделать 34,0435 — 7 байт.

Подробно об этом уже писал ранее.

20. Дели, а не множ SVG»

В пункте 10 «делай в два раза больше SVG» я рекомендовал делать изображения под конкретное место использования, если объединить это с пунктом 3. «Пере-используй ассет», то можно будет еще больше оптимизировать svg. Почему это отдельный пункт? — потому, что кодирование цвета в SVG (например) в градациях серого можно потом задавать полупрозрачностью. И на каждую отдельную кривую ты получишь кодирование #000 или f2f2f2. 

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

Подробно об этом уже писал ранее.

21. JPG вместо SVG

Если у тебя SVG гигантские (детализированные), а ты изображения хочешь выводить плиткой по 20-40 штук, выводи JPG’и. В некоторых ситуациях это действительно «облегчит» жизнь. 

Подробно об этом уже писал ранее.

22. Вообще ничего не выводи

Если у тебя есть список, в котором для картинки отведено пикселей 80x80, и тебе нужно вывести туда планировки — ну нужно тебе туда выводить планировки. Это будет не читаемое месиво, которое сложно будет как то идентифицировать, особенно при списке однотипных квартир.

См как я сделал однажды, и никто не умер, зато конверсия подросла. 

23. Фреймируй

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

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

1,3 метра для большинства аудитории, которые смотрят либо с fullhd, либо с ретины на 13 дюймовом ноуте — класс.  

Фреймирование позволит тебе избежать таких моментов. Если не хочешь фреймирование для ноутбуков сделай как эппл — да, большие изображения, но все равно фреймированы

24. Адаптивь наоборот

Есть такие проекты, трафик которых составляет 90% пользователей с мобильных устройств. Если ваше решение не поддерживает вариативную выдачу изображений, то представьте, что вы будете отдавать гигантское изображение, которое отлично смотрится на горизонтальном экране, в портретный режим мобильного телефона. оно либо порежется по краям, либо займер ¼ экрана. И вместо 70 килобайт вы закинете пользователю 1,3. Для лендингов на tilda — это почему-то норма жизни. 

Решение очень простое — сделай мобильную версию, прикинь оптимизацию графики, и только потом, с небольшим запасом по «безопасным» полям изображений, приведи десктоп версию в удобоваримому виду. И шут с ней, что она не будет выглядеть настолько хорошо, как если бы изначально проектировалась под большие экраны. Скорость и трафик решают.