I recently redesigned my website, making it compatible with various screen sizes, including cell phones. So I know how to use CSS to modify image sizes for various screens.
But I work on a laptop and have set the maximum image width @ 600 pixels.
However, I’m not sure what that would look like on really big screens. So this is my question: What is your recommendation regarding a maximum image width?
I’m reluctant to make my images too big simply because of the file size; I’m ultimately going to have thousands of images. Still, I’d like to know what would work best for users.
What type of images are these? Are they like background, full-screen wallpaper, or images like photos to illustrate an article?
There are different ways to handle different types of images.
For background images, you can use media queries to display an image of an appropriate size for the screen.
For ordinary images, the sort you would put in the <img> tag, there are two new options, the srcset attribute and the <picture> element.
That’s fine for a photo, but displaying a 600px image larger than 600px will look bad, like in a full-screen image.
Using the above methods, you can have a number of versions of the same image at different sizes.
These are images in image tags, used to illustrate articles. In the past, I’ve generally used images no bigger than 600 pixels wide, using CSS to display them at smaller sizes in smaller screens. I just wondered if it would be a good idea to step it up to 800-1,000 pixels for people with bigger screens.
I’ll give it a try. I’ll use CSS to expand some of my 600-pixel images to 800 pixels and see if they look OK. It would be really nice if I don’t have to create a new series of mega-images.
If the native image size is only 600px, I would not display it any bigger as the quality will degrade.
If you have a larger version which is 800px, that’s fine, but will be heavier for slower connections.
It depends on the site design. Many set a max-width on the main content container, so the image should look right in that size container.
Omitting a max-width can make the layout go a bit strange on big screens, as text lines get longer and the container height diminishes.
I should add that I was somewhat influenced by Wikipedia, which seems to prefer its images in the range of 1,000-10,000 pixels wide. But I’m increasingly coming to see WIkipedia as the exception that proves all the rules.
