http404ntfnd
@http404ntfnd
junior front-end developer

Как правильно работать с картинкой?

Доброго время суток.

Нужен дельный совет как поступать с размещением картинки и что делать с её размером.
Оригинальная картинка в формате .png весит 7 метров, если эту картинку пропустить через различные минификаторы + через галп таск imagemin её размер будет составлять 175КБ

Картинка выполняет функцию бекграунда и вёрстке задана через background-image. При 1920 пикселях она занимает 50% ширины, при ширине < 1280px она занимает 100% ширины.
Столкнулся с проблемой в том что, если использовать эти картинку с размером 175КБ качество ужасное, более того при ширине <1280px картинке не хватает собственной ширины для заполнения экрана и background-repeat: round просто усугубляет ситуацию ещё больше.

Кстати, картинка - фотография форума, соответственно есть люди и её масштабирование в большую сторону вызывает дикую рвоту.

Что делать?
1) Может подгружать разные картинки для разных ширин?
2) Что делать с качеством и размером (КБ) картинки?

Буду благодарен за любой совет, спасибо
  • Вопрос задан
  • 70 просмотров
Решения вопроса 2
@vardoLP
Ват ю сэй эбаут май мама?!
ну вообще, такие моменты надо обсуждать с заказчиком. Если ему нужно супер качество, ставьте на загрузку страницы прелоадер (не забудьте напомнить заказчику. что это влияет на скорость загрузки), если среднее, прогоните ее через фотошоп "сохранить для web"
Ответ написан
Комментировать
rul22rus
@rul22rus
Frontend&Backend Web Developer
Можно перевести картинку в jpg и сделать 70-80% качество, обычно особо качество картинки не страдает, но режится размер файла прилично.
Можно картинку разделить на несколько частей, будет быстрее грузится, но нужно будет верстку подправлять.
Либо делать прелоадер как советуют выше.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы