When adding an image to a site for styling factors or updating a profile image we many times ponder what the recommended image size should be. This mostly depends on several factors. At Brilliant Directories, depending on the place where the image will be used, shown and scrolled on, the image can change it's recommended size.
Homepage Background Images
We recommend sizes between 700px X 250px to sizes like 1400px X 400px. The reason for this is that most partners have either, mobile members, desktop members or both. If you happen to focus yourself on selling through a mobile environment only, then images would simply need to be smaller to accommodate for the smartphone size (and speed of loading). If however, your members are mostly Desktop users (like me), then the sizes mentioned above would be ideal. Lastly, if you have a mix of both, the smaller sizes recommended above are better.
Another point to mention is the resolutions your members will have. If they typically use a 1366x768 resolution (Typically found in 720p screens), then an image of around 700+ in width should be enough. But the same image on a 1920x1080 resolution (A 1080p screen) will simply look horrible since it will not take the full width of the site (And will look cut from the member's perspective). So it is more important to make sure that the width of an image is long enough than the actual height of it. This is not taking into account the 2K, 4K and Retina Scan technologies than expand upon this.
Lastly there is the size and format of images. We recommend image formats to be JPG and PNG. JPG will offer in many cases smaller size, but will not offer transparency. PNG will offer almost similar size (if optimized correctly), and include transparency. There are some sites, that can also extra compress an image, the best site for me is http://www.jpegmini.com/ that actually offers real compression without loosing quality of the original JPG image. I have tested several big and medium images (500KB to 3MB images) and they have received a compression between 40% to 85% which is incredible. This will of course impact how fast your site loads. If you use large images, loading the page will take significantly more.
As you can see there are several variables to take into consideration, from width and height, to image format, to image size, compression, member type, etc..
Profile Images VS Logo Images
For this 2 cases there is the Width versus Height factor. For Profile Images, this tend to have a larger Height than the Width because they typically show a person. For Logo Images, since they are Iconic, Logo, LogoType or a combination, they tend to have more Width than Height.
An Example Logo Image looks like this (Width is larger than Height)
An example Profile Image looks like this (Height is larger than Width)
For both cases, there larger dimension should be between 1.2x to 2.5x the smaller dimension. So for a Profile Image with a Width of 100px, you can have a Height of 120px. For a Width of 200px, you can have a Height of 240px and so on. For Logo Images, if the Height is 100px, the Width could be 120px or more. If the Height is 160px, the Width could be around 192px or more. Many profile images use a standard 150px X 230px. Logo Images typically are 200px X 150px.
Image Shrinking / Stretching (Image Scaling)
In very particular cases, you will end up with images smaller than the rest (Like seeing in the Search Results a very small image for a member and all other members have the same image size). When an image is larger or smaller than the rest you could try forcing it to a default size. If the image is larger than the default image size, the image would not suffer or look different in any way, but it is recommend to upload a smaller image to optimize resources on the page so when users are viewing it, it loads faster. It is not the same to have several 1 MB images on your page that actually use a size that could be easily achieved by using the same image but with a size of 20KB (50x smaller). Your page will literally load 50x faster if all images have the same dimensions and also use the same amount of kilobytes in size.
With this information, to force images to a certain size you can use the following CSS properties:
- min-height - Sets the MINIMUM Height an image can have. This means that if the image has a lower height that this, it will be forced to get larger.This affects the quality of the image since it stretches the image. The more it is stretched, the worst the quality will get.
- min-width - Sets the MINIMUM Width an image can have. This means that if the image has a lower width that this, it will be forced to get larger. This affects the quality of the image since it stretches the image. The more it is stretched, the worst the quality will get.
- max-height - Sets the MAXIMUM Height an image can have. This means that if the image has a higher height that this, it will be forced to get smaller. This will not affect the quality of the image.
- max-width - Sets the MAXIMUM Width an image can have. This means that if the image has a higher width that this, it will be forced to get smaller.This will not affect the quality of the image.
- width - Sets the DEFAULT Width an image can have. The image is not forced to get larger or smaller and the real size of the image will take priority over this CSS property.
- height -Sets the DEFAULT Height an image can have.The image is not forced to get larger or smaller and the real size of the image will take priority over this CSS property.