Ttyjukl

I sometimes post photos on my blog, like when I'm blogging about food. I've been shrinking the huge pictures my phone takes down to a size that fits more reasonably in a browser window -- my browser window, so far -- because I don't want my posts to require a huge window. Recently I've noticed that the platform I use (Dreamwidth) now has some degree of responsiveness; if I make a Chrome window smaller it scales the photos too, and my posts even look fine on a phone. This was not always the case, and is still not the case in Firefox for some reason. (I haven't tested additional browsers.)

That some sites and/or browsers do scaling suggests I could use higher-resolution pictures, but some browsers don't scale so I don't want things to be too huge. In addition, bandwidth might still be a concern; not everybody has fiber or a beefy data plan, after all. And on the proverbial third hand, there are now high-DPI displays on which the photos I'm using might be tiny (I don't have direct knowledge).

Putting all this together, what are current good practices for photo sizes on blog posts? Should I keep doing what I'm doing, which is to scale down the width to under 1000px (generally ~800px)? How do I trade off large high-res displays on the one hand and smaller displays with browsers that don't auto-scale on the other?

Note that I'm not talking about special photos where I might especially want high-res (like that gorgeous sunset photo taken on vacation or the like). In that case I'd make a higher-res version available behind a click, so it's opt-in. Nor am I asking about print publications where higher-res is important for production values. I'm asking about "ordinary" photos included in blog posts.

Any online image can be scaled to 100% of the width of the webpage, that means it will always fill the available width, regardless of the actual pixel size.

The internet is increasingly skewing to mobile devices, although engagement (the time spent on the website) is still slightly higher on desktop. See this breakdown of mobile screen size usage by country. 2 sizes are most popular: 750*1334, 1080*1920 (screens are oriented for portrait). At a distant 3rd place are "budget" screens at 720x1280 and the "retina"-like high-density screens that double that (1440*2560, 1440*2960). The high-density screens aren't for images, but to make text appear sharper.

The breakdown by country is interesting. Emerging economies skew strongly to the budget screens, while "tech" economies skew strongly to 1080*1920 and larger. I have also read that many emerging economies are almost entirely mobile, having missed the desktop boom. Japan is an odd outlier as a tech economy with overwhelmingly smaller screens.

Somewhat more important than pixel size is compression. TinyPNG, pngquant, ImageOptim, and other online services can drastically reduce the file size of a large image by selectively removing the possible colors, typically reducing it to ~25% of the original download. Depending on the image, this compression can look almost "lossless", much cleaner than the chunky squares of JPG. These tools will allow your online images to be much higher in resolution while having a lower memory footprint and faster download time.

I use the "medium" size in Wordpress, which is 500 px width and height proportional as required by the image. This fits across my entire column (depending on the monitor/window size/browser of course). That's a center column of content with menu columns on either side.

It's a bit bigger than many other sites use, but it works for me. I may change it if I change my Wordpress theme. What's best for the size of the picture depends on the theme or website layout.

As you've pointed out, another important issue is platform. Wordpress automatically scales graphics. I just checked my blog from my phone and the graphics are the appropriate size (though some get blurry when enlarged...even if they're still smaller than the crisp photos on my large desktop monitor).

In general it's better to use relative sizes and not absolute ones. This is true for font size as well. What's gorgeous and perfect on your setup is impossible to read on someone else's.