1

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

3

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 300x300, save it as 600x600. 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.

  • Thank you for your suggestion. Maybe i will save the images in JPEG (600x600) and optimize them... PNG-8 comes close to the Size as in JPEG but looks worse. I realized that bigger images wich scaled down are looking great on mobile devices... – NewUser Jul 4 '16 at 9:31
  • Yes, mostly because the mobile devices have high resolution displays, so scaling down usually works better as well – Luciano Jul 4 '16 at 10:21
1

More to complement Luciano's answer than counter it:

Another thing to take into account is connection speed and bandwidth - you don't want to be firing a massive image over the web if you can get away with it. One option is to have two versions of the image, one acting as a thumbnail and the other as the full-sized image.

Though JPEGs have compression, it's still important to remember: though it seems like you're only doubling the size of the image, you're actually quadrupling it. E.g. 600 x 600 = 360,000 pixels, 300 x 300 = 90,000 pixels (then multiply that by 3 or 4 depending on the number of bytes per pixel).

  • Size of a compressed jpeg is not so much of a function of number of pixels but rather entropy of the image. Entropy tends to grow with image size but then you can afford to compress more. – joojaa Jul 4 '16 at 21:32
  • @joojaa: True, but the OP was asking about compression without losing quality. Thankfully PS has a preview mode to show what the image will look like prior to actual compression. I use this to gauge final save quality. The other problem, of course, is detail of the image; a busy picture has far less opportunity for compression without being affected by artefacts (using JPEG or similar lossy compression). – Paul Jul 5 '16 at 7:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.