Working with Images (Overview)
A question we get a lot is: what are the recommended sizes for images for our website?
There are so many factors that go into the how an image, and site, is displayed e.g., screen size, screen quality, browser, orientation (portrait or landscape), device, where the image is used (e.g., full width hero image, thumbnail, inline image with text), that it is not an easy question to answer.
But we can provide some recommendations that will help in most cases and variables, based on the average screen width of devices. Since website users are used to scrolling vertically on screens, what you need to control mostly is the width of the image.
General Recommendations for Image Widths
These are our general recommendations:
Mobile width: ~ 620px
Tablet width: ~ 950px
Standard Desktop width: ~1,420px
If you know your site will be viewed on very large screens, you may need a wider image.
Note that for screens not as wide as the widths, the browser will try to scale them down. It is important that you also select images that have content that will scale well if they are "shrunk".
Don't have text that runs to the edges of the width, keep important content in the center of the image. Avoid heads/faces that are right at the top of the image that may get cut off when images are resized to fit the space.
Remember, making your site look good is not an exact science.
You may need to tinker a bit or engage the help of a designer with some basic skills in HTML and CSS.
Pro Tip: For banners and wide edge to edge images, you want to image as wide as possible (e.g., over 1,200px) but adjust the height to the height of the space. Hence, the trick is how to determine the height.
One way is to measure it!
You can do this in your browser by using an extension. In Chrome, for example, there is a great extension called Page Ruler. It's free. Once installed you can measure any element on a page.
Below is an example of measuring the height of a hero image using Page Ruler. Use your mouse to create a box from top to bottom of the image (the width is not that important in this case). Notice that in the top left it will tell you the height of the image.
0 Comments
Add your comment