Как оптимизировать дальше? Использовать ли base 64 для изображений?

Question

[Stadinov Denis]

Всем привет! Встал вопрос как оптимизировать дальше?
Есть 5-7 спрайтов на сайте, наверное 4 точно загружаются на 1 странице.

Начал пробивать тему с base64, но что-то не совсем однозначно. Файлы изображений вырастают на 30%. Но мы начинаем экономить на подключениях, которые возможно критичны если ты с мобильного.

Расскажите по подробнее, очень интересно в каком случае нужно точно кодировать, в каком не очень. И как сейчас обстоят дела с очередью подключений в браузерах? Знаю что раньше было в районе 5-7 за раз в зависимости от браузера.

Answer 1

[Александр Таратин]

Файлы изображений вырастают на 30%.

gzip должен компенсировать.

Comments

[Stadinov Denis]

Спасибо за ответ и прошу прощения, что так поздно отвечаю.
Т.е. вы за то что бы использовать base64 + gzip наверное это единственный нормальный вариант.

Answer 2

[Назар Мокринский]

1) gzip
2) Не паковать в base64 большие изображения и делать их по возможности как прогрессивный jpeg (не всегда возможно, иногда есть вариант использовать SVG)

Comments

[Stadinov Denis]

Привет, спасибо, что поделился опытом и прощу прощения, что отвечаю с запозданием.
Но почему не стоит большие файлы конвертировать в base64?

[Назар Мокринский]

Stadinov Denis: Самое главное - файл CSS становится слишком большим, что тормозит рендер страницы, а ещё может стать проблемой в IE, там по-моему какое-то ограничение есть как на файл, так и на объем встраиваемого base64. Так что большие картинки лучше подключать отдельно - у вас загрузится сначала весь каркас со всеми основными картинками, а уже потом большие картинки, которые скорее контент, чем структура. Таким образом вы не заставите пользователя ждать слишком долго. А кэширование с правильными заголовками отлично работает как для стилей, так и для картинок.

[Stadinov Denis]

Назар Мокринский: спасибо. Отличный вариант разделить основу от контента, только в моём случае нет контента (:

Answer 3

[Alexander Tartmin]

Когда-то на работе эксперимента ради делали лендинг на котором всё было встроено в страницу: JS-код, стили, картинки в base64. Да, трафик мы немного економили как и нагрузку на сервер, но "на глаз" увидеть разницу между таким способом подключения всего и обычным через link&src не увидели. Это так, на поразмыслить =)

Comments

[Stadinov Denis]

Спасибо за ответ.
Экономия тут как и заметность загрузки актуальна только для медленного интернета.

Answer 4

[Mastrix 0160]

Обычные спрайти так и использовать, если есть возможность по тех требованиям и потребность в х2 х3 для hdpi девайсов, то советую SVG но не спрайтом если есть анимация запчастей от иконки.
Также существуют компрессоры для изображений:
https://compressor.io/
https://tinypng.com/
Для картинок постов, тамбнейлов юзера обязательно использовать.

Comments

[Stadinov Denis]

спасибо за ответ, компрессор.ио используем )