How to reduce banner image size for website, which is best way?

Question

I have created a product promotional banner using Photoshop and uploaded it to my server. The size of the banner is too high. So, my website takes a long time to load. How do I reduce the the image size in Photoshop? Or should I use other software for better or easier results?

Answer 1

For optimal loading times follow these steps:

1. Set the pixel width and height to the exact dimensions you will be using on your webpage. If you're showing the image at 400px by 600px then size it to those exact dimensions.

2. Save your image as a JPG with the quality set to 9 or lower. I say 9 because that is about the highest you can go while still noticing a shift in quality. If you can go lower without a noticeable drop in image integrity, go for it.

3. Use a service like TinyPNG to reduce your file size to the lowest possible. They use a 'smart lossy' compression to keep the integrity of your image.

Example Image Processing

Original - 1920 x 1440 - 527KB

JPG from Photoshop - 800 x 600 - 93KB

TinyPNG - 800 x 600 - 65KB

88% reduction in image size from original

Answer 2

Use Photoshop. How - it does depend on how many different hues/values your image is made up of. For a banner that is mainly made up of block colours you might be better off saving it as a png-8 or gif

file>export>save for web

and then choose your file type in the dialogue window.

Generally speaking, images with gradients or photographic images are best saved as a jpeg, for others, png or gif might be an option.

Keep an eye out for Goolge's RAISR in the near future though, totally different ball game when it comes tom image quality vs compression

Answer 3

Disclaimer: I am the co-founder of ImageKit.io

You can use ImageKit.io for optimizing and delivering the images using a global CDN.

You can upload original images to your server/our storage and we will take care of all the optimization depending upon image and browser.

It is free up to a limit. Try now