Графика: что важно для оптимизации?

Question

[nevro]

1. Формат, битность, градиенты,..? На что обращать внимание, что посоветуете из опыта?
2. И вопрос, наверное, связан еще с css и js - какие-то вещи можно сделать ими, а не сохранять графикой. Что это может быть? Тени, градиенты,..?

Answer 1

[Евгений]

По поводу формата, если есть прозрачность на картинке - то png, если нету - все в jpg, после все прогоняете через минификатор вроде "imagemin", "pngquant". Всякие иконки собираете в спрайты. Если важен трафик для мобильных устройств, то можете дополнительно создавать картинки с маленьким разрешением дабы они меньше весели.
Так же ели есть возможность различные иконки делаете в SVG формате, они в разы меньше весят чем растровое изображение.
Практически любой градиент сейчас спокойно можно на css сделать.

Answer 2

[Нерон Лордов]

Оптимизация PNG
Оптимизация JPEG

Answer 3

[ssrdop]

Проще понять, что если на сайте есть полное изображение и превьюшка, то лучше всего делать и тот и тот файл, не используя средства css для уменьшения изображений. Плюс использовать средства для уменьшения веса без потери качества, например https://tinypng.com/