Photoshop Question posted in
The official user guide can be found here.

Why do my PNG images look so much better when my browser resizes them, vs. when I resize them to the exact dimensions needed? – Photoshop

I am currently trying to set up a portfolio site, and I added over 20 PNG images for my portfolio that are sized Natural: 640×375 px. My site resizes each of them to 278x163px.

They look absolutely awesome on the site right now, but I want to resize each of them to the exact dimension needed to decrease page load. Whenever I try to resize them, they get extremely blurry (I tried using Photoshop, as well as many other online tools to resize PNGs).

Help would be much appreciated. Thanks!

Tags:

4

Answers


  1. 0

    Maybe you can try saving the images for web in higher quality in Photoshop.

    enter image description here

    Login or Signup to reply.
  2. 0

    When resizing the image in photoshop, try setting the interpolation to bicubic sharper.

    Login or Signup to reply.
  3. 0

    The datatraffic of music, pictures, movies and video’s is expressed in f.e. 56.6Kbps, 128Kbps, etc. The datatraffic between 2 computer over the internet depends on your upload speed and the other computers download speed.

    There is a difference between 56.6 Kbps and KBps (kilobits and kilobytes).

    If you look close at the example Sujit gave you, you see the (data)size of the picture is 682.6KB and @ a speed of 56.6 Kbps it would take this picture 124 seconds to upload/download. That is 682.6 / 56.6 = 12,06 sec * (from bits to Bytes) 10,4 ~ 124 seconds.

    There is a second size: height and width (in your case 640×375 px) and the method of compression, f.e. gif, jpg, jpeg, bmp, png decides the (data)size of your picture. You have to look for a nice way to compress your picture, not loose to much quality, but making the file as small, datawise, as possible, without the need to resize the pictures in height or width.

    As Sujit said, this can be done in Photoshop (save for the web) you can play around with quality and datasize, without resizing the pictures themselves.

    Login or Signup to reply.
  4. 0

    If the images look absolutely awesome on your site and the images are already properly re-sized, then I would just click the Print Screen button on your key board followed by:

  5. Opening up Photoshop
  6. Click File New
  7. Click Ok (the demensions are already sized for the new file)
  8. Crop Only The Image (one at a time)
  9. Then Go To Image -> Image Size (To verify the image you just cropped is the correct size)
  10. Then Go To File -> Save For Web -> Save as png24 file

    11. The only way to change the size of an image without stretching or diminishing pixels is to crop.

    Hope This Help 😀

Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search