В каком качестве подключать изображения на сайт?

Question

[Дмитрий Коробейников]

Добрый день.

Быстренько пробегусь с самого начала: сделал landing page, разметил его гридами, наладил адаптивность.
Когда все было готово, начал подключать в гридовские блоки изображения. И очень заметно как сайт начал подвисать. Из-за того, что подключил 5 изображений в очень высоком качестве и разрешении.

Собственно, вопрос: в каких форматах, в каких расширения сохранять изображения, чтобы они сильно не загружали?

Comments

[Ankhena]

Самый простой способ избавиться от этого вопроса, это открыть фотошоп и использовать там save for web с разными настройками и в разных форматах. Глазками смотрите устраивает ли качество и оцениваете получившийся размер. И заодно логика, если в изображении есть прозрачные или полупрозрачные пиксели, то логично, что это не jpg.
webp еще не всюду поддерживается, но про него тоже почитайте.
И про ретину не забудьте.

Answer 1

[Евгений Корякин]

1080px для ПК и x2 для Retina.

Answer 2

[lukoie]

1 для полноцвета - jpg, но не png и наоборот
2 компрессия jpg тоже решает. Стандартных 65% может вполне хватать. Сравнивайте с 80% визуально.
3 сохранение в фотошопе в "save for web" дает лучше результат чем просто сохранение
4 картинки делайте 1в1 в пикселях как оно будет на сайте. 2х для ретины, Только если это для полноэкранных картинок или на полную ширину окна то ставьте фуллшд разрешение.
5 если сайт хостится не на ссд а на хдд, то тоже может дать результат вынесение изображений в сидиэн облако.

Answer 3

[McBernar]

https://tinypng.com — оптимизация PNG.
До 70% без заметной потери качества. Я прогоняю дважды.

Изображения в 2х от нужного размера. Нужно 100 — берите 200.

Comments

[romansergeevich]

Или тут:
optimizilla.com/ru