Are you unsure why your site isn't ranking well on Google or why consumers aren't engaging with it? Image sizes for websites and website speed and SEO issues are often seen affecting bounce rates and rankings.
For many people, saving images for the web has always been a mystery. Heavy images (original image sizes at 5000px width, unoptimized pictures) will not only degrade the user experience on your site but will also have a negative impact on your SEO strategy (loading speed, bounce rate, ranking, etc.).
Let's break down the list of website image size guidelines.
Why are Image Sizes and Website Performance Important?
Websites take longer to load when graphics aren't optimized. Slow websites result in a poor user experience, a lesser probability of ranking in Google searches, and, as a result, fewer queries and consumers.
Website image size guidelines mention that saving your photographs in the right proportions and optimizing them for the web can help with a variety of things, including:
• Speed
According to Google research, if a web page takes longer than 5 seconds to load, the likelihood of a mobile visitor abandoning the page increases by 90%. You may speed up your website pages by shrinking and lowering picture sizes.
• User Experience
Visitors will have a more engaging experience when browsing your website if you use high-quality, compelling images. You're providing a seamless and smooth experience for your visitors by keeping those photos optimized and loading quickly, which encourages them to spend more time on your site and explore your content.
• SEO Ranking
The sooner your site loads, the higher you can rank. On both desktop and mobile devices, web pages with optimized graphics load substantially faster.
• Sales
Faster loading speeds and improved SEO can help attract more visitors to your site, increasing your chances of being contacted and booked.
What are the Most Appropriate Image Sizes for Websites?
Strikingly is built to work with a wide range of image sizes for different screen sizes, sections, styles, and designs. However, it's occasionally useful to have a rough concept of what dimensions to upload.
Here are a few general website image size guidelines to follow!
Image is taken from Strikingly
1. Images for the Background
The backdrop photos from Strikingly are designed to fit a wide range of screen sizes, from monitors to tablets to phones. To ensure that your backdrop looks excellent on all screens, we recommend a size of 1600 pixels wide by 900 pixels in height. Include non-background photos of persons, brands, and other information with caution!
2. Settings for the Background
To size/align your background, you have a few alternatives.
Stretch/Cover default: This option stretches your image to fill the entire screen, both in height and breadth. Because the image will work as a background on any screen size, this is usually the best solution. However, if your image has content on the sides (especially the left and right), it may not be visible on mobile phones.
Contain: Contain will display the complete image, ensuring that no part of it is chopped off. On some devices, though, this may result in some white space.
Center: The image will be shown in the center of the section and will not be scaled if you choose the center. On the other hand, the background will show white space around the edges of the image is too small. Some elements of the image may be chopped off if it is too large, especially on smaller displays.
Tile: Tile will center and then repeat a picture, which is handy for creating patterns.
To begin the website image size guidelines, make a note of how wide the image appears on the page.
Image is taken from Strikingly
• Background images
The ideal size of the background images are 1600x900px
• Full-width images
They should be at least 1400 pixels wide for the best results. As per the website image size guidelines
• Half-width images
Half-width images should be at least 700px wide for the best quality.
• ⅓ width images
Images should be at least 480px wide for the best quality 1/3 width images.
• ¼ width images
For the best quality 1/4 width images, they should be at least 360 pixels wide.
• Small icons and logos
They should be at least 100 pixels wide.
• Gallery images
Any size is fine for gallery images! Images in the gallery will open in a lightbox on top of your website.
What Size Image is Required for Your Website?
Images should be as large as necessary to fit their "containers" for maximum website performance, depending on your page layout. Slideshow photos, for example, are often larger; blog images are medium-sized (at a width equal to the page width minus the sidebar); thumbnails are smaller, and so forth.
As per the website image size guidelines, it's critical to first ascertain picture dimensions in order to calculate the width of your site's content area. You can use a “page ruler” browser plugin to assist you in taking the measures, or you can use the developer tools integrated into your web browser if you have experience: Right-click on any page element and select "Inspect" from the drop-down menu.
Image is taken from Strikingly
Then, in the toolbar, use the element selector tool to hover over the picture or content section you're interested in:
Image is taken from Strikingly
Image is taken from Strikingly
In this case, the column above requires an image with a width of at least 525 pixels.
We say “at least” because images in newer smartphones with high-density “retina” screens need to be larger than that to look as sharp as possible.
Consider the following scenarios:
A. Full-Width Slideshow Web Image Size
The website image size guidelines recommend 2560 pixels in width for full-width slideshows (that automatically extend to the full size of the browser). This is the usual resolution width for 27′′ and 30′′ monitors.
Images can be as tall as you want them to be to achieve the aspect ratio you choose. Full-page slideshows, for example, which are common on wedding photography websites, maintain the original aspect ratio of the photographs. Other websites make use of a slideshow that spans the entire width of the page but is less in height (leading to an aspect ratio of around 3:1).
The following is an example of “panoramic” slideshows from photographic websites:
Image is taken from Strikingly user's website
Images should be 2560 (round off to 2500px) pixels wide and any height you choose for images that span the entire width of the browser (depending on whether you want to preserve your images' native aspect ratio or go for a more panoramic cut).
This isn't a case where we need to double the image size for retina displays because that would result in massive 5000px images (not to add the dangers of image theft, with big file sizes).
Adjust the required image size for smaller slideshows that don't take up the entire width of the page, but only a portion of it (maybe 2000px, or 1800px, etc.)
Image is taken from Strikingly user's website
B. Image Sizes in Galleries (and Thumbnails that Enlarge in a Lightbox View)
Thumbnail galleries are unique situations in which the size of your thumbnails is ignored in favor of ensuring that photos are large enough when enlarged.
A grid of thumbnail photos that, when clicked on, open up in a full-screen slideshow (typically with a semi-transparent overlay underneath) is referred to as a "lightbox view":
Because those photographs will open in full-screen mode, the website image size guidelines recommend making them at least 1500 pixels wide (on the longest edge) to make them look well on desktops and tablets.
You can even go up to 2000 pixels if you want to add some extra “wow factor,” although that is usually not the case.
Images are adjusted by the browser on mobile devices anyway, and 1500px is large enough to look crisp on smartphones with high-PPI “retina” screens.
Vertical/portrait images with a maximum height of 1200 pixels (such as 800x1200 pixels for a 2:3 vertical image or 900x1200 pixels for a 3:4 vertical picture) can be even smaller.
If the slideshow permits browsing between photos using side arrows, bullets, swiping on mobile, or keyboard arrows on desktop, limiting the picture dimensions like this will keep the file size reasonable short, resulting in faster image loads:
C. Recommended Image Sizes for Blog Posts and Other Static Pictures in Page Layouts
If your blog photos don't require a click-to-enlarge (or "lightbox") feature, they should be sized according to the column or content area's width.
Take the following example of a single blog post:
Image is taken from Strikingly user's website
You can ascertain the real width of the content area by measuring any paragraph of text using the methods outlined above, for example:
Image is taken from Strikingly user's website
Alternatively, if you already have images, you can see what size the browser is resizing them to.
To acquire the same information, you might use a browser plugin like View Image Info (properties).
With that information (825 pixels for example), you can now double the size to account for retina displays (so 1650 pixels in width).
Depending on your site's theme and your risk tolerance for picture theft, you can reduce that quantity to a more sensible 1200 pixels on the longest edge (so horizontal images should be 1200px wide, and vertical images should be 1200px tall while retaining their original aspect ratio).
Smaller photos used as thumbnails (which do not need to be expanded) are subject to the same decision-making process.
Conclusion
These website image size guidelines don't really apply to photo archiving services like PhotoShelter or SmugMug (which have built-in security measures and generate low-res thumbnails from your original high-res files as needed by the site), or when you sell those images as downloads or prints, as mentioned at the beginning.
Following these website image size guidelines practices is a must if you have a self-hosted site and only need to present your photographs on the web.
Choosing the proper images is an important aspect of creating a visually appealing and fast-loading website. There is, without a doubt, a learning curve. However, there are other advantages to be had, and it's all part of the excitement of creating and maintaining a website!
