Best way to save JPG images to scale up in web (Css) without losing quality in Photoshop?

Any ideas how to save a JPG (or any similar – small (KB) size Format) image with the size of 300px/300px in Photoshop – to scale it up to 600px/600px with using css in a webpage, without loosing “Quality”? I try to figure out wich settings are doing well… And how I can save the images in small sizes (KB)

1. Saving JPG in Photoshop in 300x300px

enter image description here

2. Scaling up with CSS to 600 x 600px

enter image description here

Answer

There is no way to scale up an image without losing quality.

In that case, you should scale your image down.

So instead of saving it as 300×300, save it as 600×600. Search for good optimization / compression methods, maybe use PNG instead (because sometimes a PNG-8 compressed can be smaller than a JPEG). You probably need to use a different tool to optimize the PNG file (search the web for “PNG image optimizer”)

Better yet, I’d save it as a size in between 300px and 600px, so it’s both smaller than 600 and has better quality than 300. You might need to try a few different sizes to find the right balance between quality / file size.

Attribution
Source : Link , Question Author : NewUser , Answer Author : Luciano

Leave a Comment