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?
For optimal loading times follow these steps:
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.
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.
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
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
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