This question already has an answer here:
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 :)