Best way to optimize high-quality photography images in a Dreamweaver website?

For photography-focused websites, I would recommend optimizing images before uploading them to Dreamweaver rather than relying entirely on the browser to handle large image files.

Here are a few practices that work well:

1. Resize images before uploading: Export images according to their actual display dimensions. For example, if your gallery displays images at 1200px wide, uploading original 5000px photographs is usually unnecessary.

2. Use modern image formats: WebP and AVIF offer good compression while preserving visual quality. They are particularly useful for photography portfolios with many images.

3. Compress JPEG images: For photographs, JPEG compression is still a practical option. Adjust the quality level until you find a good balance between file size and visual appearance.

4. Implement responsive images: Use HTML's srcset and sizes attributes to serve appropriate image dimensions for mobile, tablet, and desktop screens.

5. Enable lazy loading: Add loading="lazy" to gallery images below the initial viewport. Avoid lazy loading the main hero image.

6. Specify image dimensions: Include width and height attributes to prevent layout shifts while images load.

If you need to prepare images before uploading them, these free browser-based tools might be useful:

• Image Resizer for batch resizing JPG, PNG, and WebP images.

• JPG Compressor for reducing photograph file sizes.

My suggestion is to resize images to their intended display dimensions first, compress them, and then implement responsive image delivery in Dreamweaver.

This approach helps maintain good photography quality without unnecessarily increasing page load times.

Building on the lazy loading suggestion, one pattern that works well for gallery pages is to use small thumbnail files in the grid and only load the full-size image when someone clicks to enlarge it. I had to do exactly that on a client site packed with high-resolution before-and-after photos, and splitting thumbnails from full-size images brought the initial page weight down a lot without any visible quality loss. The site in question was cardetailingwinchester.com

One more technique worth adding to Nancy's excellent advice is lazy loading for gallery pages. If you add the loading attribute set to lazy on your image tags, the browser only downloads each image as the visitor scrolls toward it, which makes the first view of a photography portfolio load noticeably faster. It also helps to set the width and height of each image in the markup so the page reserves that space and the layout does not jump while photos are still loading. In Dreamweaver you can add both through the Properties panel for each selected image, so no extra coding is required.

According to usage stats, WebP is used by less than 22% of websites.

https://w3techs.com/technologies/details/im-webp

And AVIF, which offers better quality & compression, is used by fewer than 2% of websites.  

https://w3techs.com/technologies/details/im-avif

Most sites use SVG (vectors) or JPEG, PNG (rasters) due to their widespread browser support.

For a photography-focused website, I’d recommend optimizing the images before uploading them rather than relying on the website to handle everything.

A few things that can help:

• Resize images to the maximum dimensions they actually need on the page.
• Use WebP where possible to reduce file size while maintaining good visual quality.
• Compress JPEG/PNG files before uploading them.
• Use responsive images (srcset / appropriate image sizes) so mobile devices don't download unnecessarily large files.
• Keep the original high-resolution files separately and use optimized versions for the website.
• Check the finished pages with a performance tool such as Google PageSpeed Insights or GTmetrix to identify other bottlenecks.

For portfolio and photography sites, finding the right balance between image quality and file size is usually more important than simply using the highest possible resolution.

Thanks alot for your kind and to the point reply…...