Существует две наиболее используемых категории компьютерной графики: растровая и векторная. В случае векторной графики объекты изображения основываются на математическом описании элементарных геометрических объектов: точки, линии, сплайны, кривые Безье, круги и окружности, многоугольники. В растровой же изображения формируются из пикселей. Говоря на человеческом языке, можно упростить и сказать, что векторную графику можно бесконечно увеличивать без потери качества (ведь такие картинки состоят из уже заданных объектов, которые можно растягивать), а вот в случае растровой категории, просто так увеличивать не получится, ведь изображения состоят из пикселей. При увеличении таких изображений пиксели растягиваются прямо пропорционально потере качества.

Рассмотрим три наиболее популярных формата: JPEG, PNG и GIF. Все они относятся к категории растровой графики. Какие параметры нам наиболее интересны? Прежде всего: разрешение картинки (кол-во пикселей по ширине и высоте), размер файла и количество цветов. Разумеется, картинки с большим разрешением в большинстве случаев имеют хорошее качество, но при этом большой размер и долгую загрузку, а значит, нам нужно стремится к максимально хорошему качеству при минимальном размере файла изображения.
JPEG
Данный формат сжимает картинки с потерей качества. Обычно, при сохранении в JPEG вас просят выбрать качество от 1 до 12, но даже в 12 будет произведено сжатие, хотя в данном случае потеря качества будет практически незаметная по сравнению с оригиналом. Данный формат плохо подходит для хранения различного рода чертежей и текста, зато идеален для полноцветных фото, изображений с плавным переходом яркости/контраста и рисунков с большим количеством разноцветных деталей.
На тему сжатия и последующего ухудшения качества, в соц. сетях можно найти не мало шуток и мемов:

PNG
Формат PNG сжимает картинки без потери качества, при этом использует всю палитру цветов (в отличии от GIF). PNG часто используется веб-дизайнерами благодаря своей прозрачности, т.е при обработке картинки, в фото редакторе можно задать конкретную степень прозрачности пикселям и использовать этот параметр в различных вариациях на сайте. В итоге, данный формат отлично подходит для рисунков с прозрачностью и полупрозрачностью и изображений с резкими переходами цветов.

GIF
GIF является наиболее старым форматом и поддерживает всего 256 цветов. Алгоритм выбирает наиболее используемые цвета а оставшиеся замещает похожими (из тех же 256 цветов, соответственно). Разумеется, большинство из нас знакомы с данным форматом благодаря тому, что он поддерживает простую анимацию (проигрывается несколько сменяющих друг друга кадров). Из за ограниченной палитры, в веб-дизайне GIF используется заметно реже остальных форматов.