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
How to Access Your Website Admin Dashboard and Reset Your Password
Overview To manage your website, you’ll need to log in to your admin dashboard, where you can update content, monitor analytics, and configure various settings. How to Log In (Common Method) 1. Go to your website’s login page. The login page is ...
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. ...
How to Take a Full-Page Screenshot in Chrome, Firefox, or Edge
Overview whether you're reviewing your website, sharing visual feedback, or documenting layout issues, full-page screenshots are incredibly useful. Unlike regular screen captures, a full-page screenshot captures the entire scrolling webpage from top ...
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 ...
How to Add a New Post in WordPress using Gutenberg using all features?
Adding a Title and Content At first, go to the admin panel of the dashboard. Next, go to Posts and click on Add New. After that, you will see the section like the below image. At the top, you need to write the title of the post and below it, you can ...