Basic Image Sizes
2 image sizes for Thrive
- Option 1—”One-Size-Fits-All” : 1040 pixels wide by 780 pixels high which is an aspect ratio of 4:3. This dimension is more square than rectangular.
- Option 2—”One-Size-Fits-All : 1040 pixels wide by 585 pixels high which is an aspect ratio of 16:9. This dimension is more rectangular than square.
- Option 3—Use both sizes: 16:9 aspect ratio for “full-width” or “full-screen” images, meaning images used used in just 1 column or across the entire screen. Use the 4:3 aspect ratio for images that need to “line-up” across in columns.
- IMPORTANT—Most images from digital cameras and digital phones and other devices use the 4:3 aspect ratio. So if you use the 4:3 aspect ratio it makes them much easier to size.
- Here is a basic diagram to help you begin to visualize aspect ratio:
Image Sizing in More Detail…
- It makes your website design life easier if you use just 1 or 2 image sizes for all of your images.
- Commonly, image dimensions are based on “aspect ratio.” That is, a numerical relationship between width and height.
- You can use just one size, 4:3 if you want. The only downside is that if you use a “full-screen” image with a 4:3 aspect ratio at the top of a page, chances are it will cover the entire screen.
- Images using the 4:3 aspect ratio are more “square,” while images using the 16:9 aspect ratio are more “rectangular.”
- The term “first screen” is the website design equivalent of “above the fold” in newspaper (print) design.
- If your website goal is to design or persuade it is more effective to have messaging that can easily be seen on the the first screen.
- My personal preference is that if I am using 1 image across a column, or an image that expands the entire “full-screen” I use the 16:9 aspect ratio.
- For images used in 2 or more columns, either horizontally or vertically, I use the 4:3 aspect ratio, as I find the 16:9 aspect ratio used with multiple images in columns looks too rectangular for my taste.
- Your images could be perfectly square, but it is a proven fact that 2 or more squares placed together is not pleasing to the the eye.
What is Aspect Ratio?
- The aspect ratio of an image is the proportional relationship of the width to the height.
- You will recognize it as two numbers separated by a colon in an x:y format. For instance, a 6 x 4 inch image has an aspect ratio of 3:2.
- An aspect ratio does not have units attached – instead, it represents how large the width is in comparison to the height.
- This means that an image measured in centimeters will have the same aspect ratio even if it was measured in inches.
- The relationship between its width and height determines the ratio and shape, but not the image’s actual size.
By Alex Clem, August 2, 2018
Demo— 4:3 & 16:9 aspect ratios
The Golden Ratio?
So why are we sizing our images based on aspect ratios and not just making them square?
The Golden Ratio is a mathematical ratio. It is commonly found in nature, and when used in design, it fosters organic and natural looking compositions that are aesthetically pleasing to the eye.
For now that is all we need to know—equal square shapes are not pleasing the to the eye and that is why we use shapes based on aspect ratios.