I understand my image sizing should be dictated by other factors but I was curious if there were any standards for image aspect ratios in responsive web design. i.e., 1:1 or 3:4 which reflects the standard 600px by 800px found in digital photography.
2 Answers
No - there are no size standards for web images.
Your images can be whatever your web layout requires to support it's visual design and functional requirements.
That being said, consider what may affect your decision:
- Do your users need to contribute images? What size are they likely to have them already in to reduce work on their end.
- Will you be integrating with any external services which already return images in certain sizes?
- Will you allow sharing content to other services (social media for example), where there are recommended image sizes?
- Golden ratio, if this fits your layout, it’s often considered to be subjectively ‘pleasing'.
- There used to be a few cases where an image size which was a ‘power of 2’ would perform better in 3d web applications, though I think this is fine now.
Above all, being consistent where it makes sense will make managing your assets easier.
I'd suggest you take a look at http://gs.statcounter.com/screen-resolution-stats/desktop-mobile-tablet/worldwide/#monthly-201612-201712.
You'll find TOO MANY screen sizes. You'll find that the largest group is "Other".
In this situation, I would develop a Large/Medium/Small strategy based on your likely geographic range ("Do you need to serve Latvia?"), likely user income ("Does Jeff Bezos own a 320x530 bitty box"), etc.
Going back to the StatCounter interface, go to http://gs.statcounter.com. There you can choose fine-grained stats for your project.
-
I think OP was asking more about aspect ratios of images within the site rather than the devices themselves. Jan 24, 2018 at 15:33
containandcoverare great ways to use CSS to keep things consistent.