This may seem like a silly question. I have images that are reused on my website, but they are oftentimes different sizes. For example, small icons I use both as 16×16 and 32×32 as well as my logo which has a larger version and a small version. My question is if there is generally a better approach for performance between having one file and simply resizing it in the browser OR to create two separate files. I assume resizing is probably better (only one server request), but I don’t feel like I get the same image quality/control when I do that. Whats the best practice in this regard? Does this change if sprites are employed?
Share
Images that small should be optimized not for performance but for appearance. Resizing a small image to a large one just makes it blurry or pixelated, and resizing a large image to a small one loses important details.