How can I shrink an image in HTML whilst maintaining its sharpness?

Question

I have an image that I use many times. In several cases I want to shrink its size, but obviously it loses sharpness when I do this in HTML.

Is there a way to fix this? The image is located elsewhere and I can’t save it locally.

Thanks

Answer 1

Firefox and Internet Explorer actually do have CSS properties that adjust the way images are rendered when resized via HTML attributes or CSS properties:

• Firefox: image-rendering
• Internet Explorer: -ms-interpolation-mode

These won’t work in other browsers, and may not work great in all (or any) versions of IE and Firefox.

But it might be worth experimenting with them as a fallback in case resizer.co causes any issues.

Answer 2

There is three way that I know to reduce an image file size in bytes :

1. Convert the file into a format using lossy compression algorithm such as JPG. Obviously the image will lose sharpness
2. Convert the file into a format using lossless compression algorithm, like PNG. Only works if the image contains lots of region with flat colors
3. Resize/resample the image using Photoshop or GIMP. If the new image dimension (width x height) is exactly the same as the displayed image's dimension in HTML, then web users will still see a sharp image

Answer 3

You cannot control the way the browser renders images when they are resized. Images will look better when being passed through Photoshop's filters (or those in another tool) upon resize.

Answer 4

As dheerosaur states, SVG graphics can be used when you need to have the same image in multiple sizes but don't want to compromise quality.

Another thing to do is use an online service, such as Resize.co. You pass them the URL for your image file, the attributes and they take care of everything else.