Я бы не стал сильно беспокоиться о скорости рендеринга, главное отличие, которое вы увидите, это качество изображения. Некоторые браузеры (Chrome) выполняют интерполяцию изображений очень высокого качества, в то время как другие (IE, Firefox) выбирают более быстрый алгоритм, который не дает такого хорошего результата. Таким образом, вы получите наилучшее, наиболее стабильное качество изображения, имея три отдельных файла изображения, по одному для каждого размера.
Тем не менее, поскольку вы масштабируете только от 100x100 до минимального размера 50x50, вам, вероятно, не нужно слишком беспокоиться об артефактах интерполяции. Поэтому я бы порекомендовал делать то, что вам удобнее всего.
А с точки зрения чистой скорости рендеринга наличие отдельных изображений будет быстрее, поскольку в этом случае не требуется никакого шага интерполяции. Однако с точки зрения начальной скорости загрузки страницы наличие одного изображения будет быстрее, поскольку для загрузки требуется только 1 файл вместо 3 (или 4). Что касается использования атрибутов тегов CSS или HTML для установки ширины и высоты, разницы в скорости практически не будет. Дорогая операция - это интерполяция самого изображения, и это не имеет большого значения, если вы зададите интерполяцию через CSS или через атрибуты тега.