Contrary to delusional beliefs, not everyone is hooked up to a high-speed connection capable of streaming 8k video at magnificent buttery smoothness. Extremely fast connectivity is an amazing thing that is still out of reach for the vast majority of users. You can't assume that the viewers of your website are going to be piloting a computer hard-lined into the latest fiber optic goodness. Instead, we have to optimize for the most common user in order to give them the best experience possible without sacrificing image quality.
The most common image formats that can be used on the web are JPG, PNG, and GIF. Which should you use? For web developers looking to maximize the performance of a website using images, for a variety of reasons the answer is "it depends". However, for photographers who are only worried about using image formats to display photographs, the answer is simple. JPG is really the only option, all of the others are radically sub-par for the job of displaying photographs on a website. Don't even consider using them. By using anything other than JPG your website will instantly take a hit to its load time. For example, the table below presents the file size of the image above exported in each file type at 2880x1922.
As time moves forward the sheer number of pixels that screens can display continues to skyrocket. There was a time when 800x600 represented the vast majority of the web. Now we have high-resolution displays capable of displaying 15-megapixel images at full resolution with the rise of 8k screens seemingly on the cusp of arrival. With that in mind, what resolution is best for your website? For now, I currently recommend exporting your images at about 2880x1800. (Adjusting slightly for aspect ratio.) This covers the vast majority of screens out there while still looking good even on monster displays without sacrificing too much performance.
Bringing The File Size Down Further
Even though JPG in the above chart is a clear winner, the file size of almost 2mb is still far too heavy in my books. The reason for this is that the export tools in most major photo editors are atrocious at efficiently exporting images. Thus, we are forced to turn to dedicated image optimization tools in order to get the most efficient file size for our photographs. The tool I choose to use it ImageOptim, which has a great desktop app for Mac OS and a web tool for all other platforms. I use it because it works great at the wonderful price point of free. As an example, the JPG above was cycled through ImageOptim (also set to 70% JPG quality) after export from Lightroom and that brutal 1.89mb was crushed down to 0.72mb which is a pretty considerable impact on file size for almost no visible loss in image quality. Don't believe me? Check out the 100% crop before/after below, can you tell the difference? Neither can I.
Ensuring that your web page loads quickly can go a long way towards making sure that users don't abandon your page due to frustration or boredom. Having a strong export strategy designed to produce high-quality images without large file sizes is a key to achieving fast load times. By optimizing the choices you make during the export workflow and by leveraging third party image optimizers you can transform a sluggish and annoying website into one that springs into life almost instantly for the viewer.