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