Resizing is the most important image optimization. A large image takes up more bandwidth to load as compared to a smaller image. So, if you can use a smaller image at a particular place on your website, then use that instead of a larger image. Consider these images for an example. The smaller image is 1/5th the size of the original image and can be used wherever you need product thumbnails.
With the improvements in camera quality and resolution, images have become huge in terms of size. But, in almost all the cases, you wouldn't need such a heavy, high quality image on your website. You can safely compress an image to a lower quality level because human eyes cannot perceive a lot of subtle differences in an image. Combine compression and resizing and you will get the best possible results for your images.
As explained in this post choosing the appropriate file format can have a lot of positive impact on reducing the image size. JPEG images work best for photograph-like images whereas PNGs work best for logos, textual banners etc. WebP is a new format that has the best of all image formats but relatively poor cross-browser support.
Even if you have to show 100 product images on one page, you need not start loading all the 100 images at the very beginning. Because the user can see, let's say, only 20 images at a time on his screen. Thus, the remaining 80 images can be loaded later. May be once the user scrolls down on the page, and when these images (or their containers) start appearing on the user's screen, you can load the next set of images.
An example of lazy loading of images from Saif Sulaiman
Your image servers or storage will be located in one particular city. Whereas your users are located in a lot of different cities. Use a Content Delivery Network to deliver your images. It will not only make image delivery faster across the globe but, also reduce the load on your image server.