Вопрос теоретический. Картинка или css код?

Хорошим тоном в верстке сайта является уменьшение объема графики. Удалите ненужные изображения. Там, где это возможно, используйте текст вместо заведомо более тяжёлой графики.

Вы можете использовать одно масштабируемое изображение, но оно будет занимать много места и тормозить загрузку страницы. Лучше использовать несколько изображений, адаптированных под разные устройства, чтобы браузер загрузил нужное — это можно сделать при помощи плагина Imager. Он заменяет плейсхолдеры прозрачными изображениями, подтягивает к каждому атрибут src и назначает нужный размер, после чего вам остаётся только загрузить несколько вариантов изображения разных размеров.

В данном примере стоит делать версткой.

Т.к. у вас фотография, обычный jpeg будет весить достаточно мало, jpg с такой рамкой потребует более высокого качества и будет больше весить + только 2+x. Плюс она будет на непрозрачном фоне, а png с фотографией будет весить уже в десятки раз больше.

Поэтому самый оптимальный вариант квадратная аватарка ~ 1.5x (для фотографии достаточное качество для ретины) + border-radius + рамка бордером.