I’m currently building my own website and I’m trying to do everything as best as i can. I am currently learning about images and i have some questions on optimising them so that they dispaly appropriately across my site.

I bought a website template that comes with a carousel & 3 images to populate it. The three images are all jpg and the dimensions are 1920x700. I have since replaced these images with my own and although i set the dimensions to 1920x700 when i saved it (as png, using Photoshop save for web and devices) the file size is 2.69mb. When i hit my site for the first time the images takes a long time to load which is definitely not what I want.

When it comes to images should i be saving as jpg or png or any other format that is available? I know from a transparency point of view then i should use png because jpg does not support this but im confused when to use which.

I would also like to know (using Photoshop) how i could reduce the file size (for quicker load times) but maintain the dimensions of 1920x700.

Any information regarding best formats and other general advice to help me understand image use with website will be gladly taken on board.

I’ve just bought a camera so would like to know more about photography and images :)

Cheers Paul


You have it backward; png and gif both support a transparency channel, jpg does not. Have you tried using smaller images to populate the carousel ? There is a setting in Photoshop under file menu that will let you save your file to the web. You can try different optimization levels until you achieve the proper balance between size and look.

  • Hi thanks for getting back. Thanks for point the transparency issue. That was a typo on my behalf and I understand Ping is used for transparency. I've updated my question 👍 thanks Paul
    – Paul
    Sep 27 '15 at 14:46

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