A landing page is the web page that any viewer ends on first and foremost when they click on a link to your website. Hence, it is the most viewed web page and the most important one. It contains the most details regarding your brand or business and represents the entire message you want to spread. Of course, since the landing page is so essential, it also includes all types of media on it. The main form of this media is images.
Having images on a website is essential because they act as a visual aid to your content. When you add images to a website, it becomes more of a show and tells situation rather than just expecting people to take your word for whatever you tell them. These images prove whatever information you have provided to be true.
However, it is not enough to simply just sprinkle many images on your website landing page. The placement of these images needs to be well thought out and appropriate. They should be there to serve a purpose for your business. Like generating traffic, driving conversions, or earning revenue.
Image taken from Strikingly user’s website
Other than the fact that you need to use images on your website landing page as a visual aid and that you need to place it appropriately, you also need to consider the website image size that you use. Is the website image size too big? Is it driving attention away from other key elements on the landing page? Is the web image size proportional to all the other content visible on your website landing page?
You need to answer these and several more questions before deciding on the right website image size. The available image sizes for websites are never-ending, and you need to be able to choose the image size that best suits your purpose and aesthetic. That is precisely why today, we will be dedicating this article to telling you all about the art of choosing the correct website image size. What do you need to consider as true website image size guidelines and what not? Continue reading further ahead to find out!
Why is an Appropriate Website Image Size so Important?
We are sure that at this point, you must be wondering why it is so essential to put so much thought into the image sizes for websites that you use. Even though we did briefly answer this question above, it would be best if we explained it further. Simply put, the website image size is something that can make or break the entire outlook someone has on your professional standing and credibility. If any component of a website - especially the landing page, seems out of place or incorrectly formatted, any first-time viewer will instantly click off. Scam websites are common, and it is already difficult to achieve credibility over the internet. An out-of-place web image size will make it all the more difficult for you to do so.
Image taken from Strikingly user’s website
On the flip side, if you use the correct image size for your website, it will automatically create a positive impression of your brand on any first-time viewer. It will drive them to visit again or contribute somewhat to the word-of-mouth spread of your brand’s existence. Hence, the image sizes for websites are imperative to consider when creating the overall website, especially the website landing page.
If you continue reading below, you will learn about some essential factors to consider if you want to select the most appropriate website image size for your website landing page.
5 Factors to Consider When Choosing Website Image Size
Here are five factors that will help you choose the best and most appropriate image size for your website.
1. Relevance
The most vital thing to consider, even when it comes to the image size on your website, is how relevant it is to everything. If you have decided to include it on your landing page, it is relevant, but how much? If it is very relevant, it needs to be big, maybe bigger than the paragraph of text to it. If it is relevant but still rather for just decorative purposes, it needs to be small so that there is space on the landing page for more substantial content to fit into it.
Image taken from Strikingly user’s website
2. Resolution
How good is the resolution of your image? You can make it comparatively bigger than the other images if it is perfect. If it is not that good, then, first of all, you need to reconsider placing it on your landing page. But if you remain adamant regarding it, it is quite relevant. Then you will have to be careful about the size so that it should not be so small that it seems irrelevant but should also not be so big that it stretches out the pixels and ruins the quality of the image.
3. Colors
Is it a bright image or black and white or simply just dull that you want to decide the website image size for? Colors definitely matter. An image that is too bright and is too big distracts viewers from other important content on the landing page. On the other hand, if the image is important, but the website image size is too small, and the dull colors are not made prominent, it becomes ineffective to place this image with this image size on your landing page.
Image taken from Strikingly user’s website
4. Location
Where exactly on your landing page are you planning on placing this particular image? The relevance and importance of the image aside, the location of the image placement also makes a huge difference when you need to decide the web image size. If it is in a corner, it should be small. If right in front, then big, and so on and so forth. This is just a generalized idea of the procedure, but much more thought needs to be put into it. Different location examples can be as follows.
- Front and center
- Next to a paragraph
- In the footer
- On top with the logo of your brand
5. Type
By type, we mean are they words in image form? Is q quotation? A diagram? Or some form of a cartoon or animation? Not every type of image suits the same size. It is essential to consider the image type when deciding its size for placement on your landing page.
Using the Image Size Specifications on Strikingly
If you are familiar with Strikingly as a platform for website development, you would know that we have special guidelines for you to adjust your image sizes. At Strikingly, we aim to make your website building experience as easy, cost-effective, and smooth as possible. Our editor is designed to allow you to insert a wide range of website image sizes. This is because all our templates are responsive, which means they appear neat when browsed from different types of devices. When you upload images in differing sizes, they must follow the guidelines so that the images can appear clear, well-spaced, and well-adjusted on all screen sizes. Hence, it is good to know what dimensions you should use to give your website the most organized look on different devices.
Image taken from Strikingly
Here are the steps you can follow to make sure you are uploading images in the optimum website image size.
- Observe how wide the image appears on your web page. Is it a background image, a full-width image, a half-width image, a ⅓ width image, or a ¼ width image?
- Next, according to the image size and width, follow these preferred dimensions to get the best results.
- Background images: 1600x900px.
- Full-width images: Preferably 1400px wide or more to get the highest quality. The height can be of any size.
- Half-width images: Preferably 700px wide or more to get the highest quality. The height again can be of any size.
- 1/3 width images: Minimum 480px wide to get the best results. The height doesn’t matter.
- 1/4 width images: Minimum 360px wide to get the best results. The height doesn’t matter.
- Small icons/logos: These should be at least 100px wide.
For any other images that you upload in a gallery on your website. This is because gallery images open in a lightbox overlaid on top of your web page.
Websites built on Strikingly are not only responsive but also easy to navigate. They look like they are created by a professional and costly web developer. In reality, they can be built by anyone who has a basic understanding of using the internet. We provide an ample number of tools that enable you to create a complete website without writing any code.
