Website Image recommendations
Generally recommended image sizes for websites
Here is a cheat sheet of standard image sizes for web pages best suited for a desktop with a resolution of 1920 x 1080 px (which is the most popular according to the
statistics).
| Image Type | Dimensions | Aspect Ratio |
| Background Image | 1920 x 1080 px | 16:9 |
| Hero Image | 1280 x 720 px | 16:9 |
| Website Banner | 250 x 250 px | 1:1 |
| Blog Image | 1200 x 630 px | 3:2 |
| Logo (Rectangle) | 250 x 100 px | 2:3 |
| Logo (Square) | 100 x 100 px | 1:1 |
Product Images | 1000 x 1000 px | 1:1 |
| Favicon | 16 x 16 px | 1:1 |
| Social Media Icons | 32 x 32 px | 1:1 |
| Lightbox Images (Full Screen) | 1600 x 500 px | 16:9 |
| Thumbnail Image | 150 x 150 px | 1:1
|
Mobile image size recommendations
Most responsive websites will automatically resize all images to display on mobile devices. The image sizes have to be designed to fit mobile versions of websites like desktop websites. If the desktop images are too big, the display on mobile devices will be distorted. Therefore, correct dimensions need to be set for images for automatic scaling on mobile.
Images with an aspect ratio of 1:1 will have no problem displaying on mobile devices. However, depending on the automatic resize setting, some cropping may occur on mobile devices for images with aspect ratios of 16:9 or 3:2. For this reason, the safest approach with responsive images is to keep the focus area of the subject in the middle.
Compression
Related Articles
What if an update destroys or corrupts the website?
From time to time, despite our best efforts, a gremlin can creep into the update process. In cases like these, we repair these as non-billable items, or if not repairable, we restore the site to its previous state, again at no charge to the customer. ...
Information we require for a site build
This article is intended as guide to help customers provide us with the optimal information to create their website. Content is King! For us to make an awesome website we need awesome content. Content covers images, videos and text that explains why ...
What if I pick up an error on my site?
Each package has "Emergency Support" which is what we have put in place for errors or problems relating to the site. Errors are treated at priority 1, and can be added by adding a ticket , or emailing support@radiantweb.co.za NOTE: This does not ...
What security monitoring is provided?
We do a daily scan on the website, checking the integrity of the site = Database, files, etc. Aside from that we have 3rd party scanning happening at regular intervals:
Adding an Admin User for our service
In order for us to fully manage your website, we need an admin user. We do not recommend that you provide us with your login, and highly recommend that you add a user for us as follows: Login to your website with your admin credentials Got to the Add ...