-
Posts
-
I was told my images were huge for my page. I never realised about the practises for web images. Anyway. I am making them smaller and using photoshop’s save for web option but they aren’t very clear. I was told 200kb is a huge file. How is the photos on this site such good quality? http://www.nicholasreese.com/ are they huge file sizes? Is there a way to tell? On my site http://www.jamesolivernichols.com, on the ‘coming soon’ half way down the page there is a photo of me stood in the road with cars going by.. this is 55k and pretty bad quality. When I set it to high quality its over 350k and it still isn’t amazing. The original file was over 4000 pixels in width, I took it down to 1000. What is the best way to size my images for optimum quality? Thanks.
To answer your questions in some sort of order (it looks more complicated than it really is)-
I should say that, because I have no idea what your general knowledge of this stuff is, I’ll make it really basic, just in case. Just skip the bits you don’t need.
1. 200kb used to be unmanageably large for a website, due to slow download speeds. Whilst things have changed, it’s still good practise to make your image filesize as small as possible, whilst maintaining quality. The site you mention, by the way, has images that range from 150kb to 300kb, and it loads instantly for me.
2. Photoshop “Save for Web” has always done odd things with images. I haven’t used that feature in years, though, so I’m not sure if it’s better than it used to be. A far better way, giving you ultimate control in Photoshop, is simply to resize the images through the Image menu > Image Size (ALT+CTRL+I). The dialogue gives you all sorts of options, but the two you’re interested in are the Width/Height and Resolution. Set the Resolution to 72dpi and then set the dimension of the longest side to whatever you need. As you’re running full width, the 2048px that you have now is fine.
It used to be that Photoshop would change the file size in the “Image size” dialogue when you change the resolution. It doesn’t any more, but I’m not sure what version you have. Either way, change the resolution first, and then the width to 2048px and the height will change accordingly.
3. The poor look of the images on your site isn’t anything to do with filesize. They actually look like they have acquired a ton of jpeg artifacts. The problem with the jpeg format is that it uses lossy compression, and every time you edit the image and then save it, you lose a bit more data from the file. Eventually, you start to see what’s happening in your images, where there isn’t enough data left for the image to look good. If you’re using Photoshop for all your image work, when you’ve finished editing, use “Save As…” to avoid overwriting the original and again save in .psd or even .png which uses lossless compression. Finally, resize it for your site, and save this final version as a .jpeg. This way you have the original, a full size edit, and a web version which has as much data as possible.
When you save the .jpeg, you don’t need to use a quality level higher than 6 or 7. Computer screens don’t really care much past that point, and it will help on file size.
I hope all that helps. If not, just ask.
As an alternative to using PS for something as simple as resizing an image, consider IrfanView, It’s free, it’s fast and it can handle large batches of images with ease.
Migs
Incredible response. Thank you SO MUCH!! I needed all of the basic info too, thanks for really giving me something I can understand. Time to get to work! Thanks again, Migs!
Thanks Pul for chiming in!
You’re both welcome, glad to help
Glad to have you on board! 🙂
