Web performance optimizations for Images

• JPEGs are the most popular file format online and is commonly used for product images, photographs, and homepage hero banners/images. These can be used where transparency is not required while PNGs are many times used for logos because they are high quality, and can handle transparency. JPEG is best for images, PNG for the layout and GIF for icons.
• Dimensions should be enough to be viewable in the browser (and avoid scrolling)
• High resolution images should not be bigger than 1.5 - 2MB. making it this big is like bigger than the webpage contents itself.
• For full-width slideshows (that automatically stretch to the full size of the browser), Go for 2560 pixels in width, which is the common resolution width for 27″ and 30″ monitors. Images can have any height you need, to create an aspect ratio you’re comfortable with. For example, for full-page slideshows keep the original aspect ratio of images. But for smaller slideshows at the top of a homepage, try to keep the images shorter (to an aspect ratio of around 3:1 or more).
• Whenever an image needs to enlarge on screen (like in a lightbox display after clicking on a thumbnail, possibly part of a gallery slideshow), keep them to a max of 1500 pixels in width (and a max height of around 800-900 pixels), that’s usually acceptable. Restricting the image dimensions like this will keep the file size reasonably small, for a faster transition between images (if the slideshow allows navigating between images)
• Assuming you’re using a tool like Adobe Lightroom or Adobe Photoshop, you almost never need to export images at 100 (in the quality). Choosing something like 60 or 70 gives you good-enough quality at much smaller file sizes. Only when you start to go lower than 50-60% do you start getting discernible image noise. But between 100 and 70-80, the quality difference is imperceptible, while the difference in file size is huge.
• For example, my content area is 690 pixels wide.  There is no need for me to size my photos any larger than 690 pixels, since the content area will only display up to 690 pixels.  An image of 800 pixels will automatically be shrunk when shown on screen.
• PPI and DPI are not relevant to web displays.  So PPI (pixels per inch) and DPI (dots per inch) are not relevant when editing your photos for your site, even though they may be available as options in your software.  Images at different PPIs, has no difference in picture quality!
• PPI and DPI are not relevant to web displays, but they are important when creating printables.  Images that are meant to be downloaded and printed should be created at 300 PPI.