Possibly a bit off topic, but knowing the crew here, I’m hoping to find an answer:
What are the currently recommended image sizes for websites? I have been out of the web-maintenance scene for 10+ years, so I need a refresh. Realizing I need to rebuild my personal site as social media experiences just keep getting worse. I plan on using the vanilla 2022 Wordpress-theme - keeping things simple.
I’ll be starting over from scratch, so wondering about the collective wisdom for the various size classes, so I can define them up front, before I start adding content.
The best thing I ever did was to use a service like Cloudinary and just upload images there and let their service optimize the images. Their free plan is pretty generous and should be more than enough for a personal blog.
I don’t worry about dimensions, within reason, but file size. It doesn’t really matter if you have a giant image if it loads fast.
With that in mind, I just adapt the dimensions to the design, and mostly they will be resized anyway with responsive design. So long as it looks decent on my Mac, and the file size is reasonable, then it will look good and load fast anywhere.
Of course, it gets interesting if you have very complex images that resist compression.
I read the post and it was great, but it never seemed to address Hi DPI screens like retina displays or 4K+ in the windows world. I’d be curious if they still recommend using 72 DPI for photographic images. Personally I’m trying to use SVG whenever possible.
I like to keep max-width at reasonable length for readability, so I’m now looking at about a 1000px text column and a 1200 pixel total - to get some margins on each side. Since it was so long since my previous work with Wordpress, I wanted to check if my old tricks needed updating.
Adding images wider than this can push beyond the grid - or they’ll be resized and end up looking fuzzy. This is why I’m hoping to be able to settle on some standard sizes that can be universal across my site.
I’ve installed one plug-in that (claims to) optimize photos as well as create thumbnails and a few other sizes (small, medium, large, original). However, I have a hard time locating these with the standard editor in Wordpress. From what I can gather, the site just serves the “original” and resizes it to 150x150 for the thumbnail.
FWIW modern WordPress themes tend to be hovering between 1200 and 1300 pixels for a max-width, unless the user overrides that for “full width”.
The big thing is that at a certain point lines of text (which generally scale with your website width) just get too long to read. Because this is the sort of thing that can logically be studied, a quick Google will yield a number of actual studies on the matter. Consensus seems to be in the 60-80 characters per line range: Readability: The Optimal Line Length – Articles – Baymard Institute
