Saving images on the web has been a mystery to many. It significantly influences the user experience and SEO strategy (loading speed, bounce rate, ranking, etc.).
When you upload images to the web, there are a few things that you need to consider, and they are as follow:
- What are the images being used for?
- How large should the file be?
- What type of images should be used for different areas on your site?
No matter the sizing of the image, there are a few guidelines that you can follow when you upload pictures:
- File types: Save images jpg, .gif, .svg or .png format and remember pdf, .psd, .tff, and .doc files aren’t web-compatible.
- Filename: Only use letters, numbers, underscores, and hyphens in file names.
- Resolution: There is an image resolution limit of 60 MP (megapixels).
We always think that the bigger the image size is, the better. This is not the case when it comes to the web! For the best result, we recommend the image size to be less than 400KB. Even Though the limit for an individual image upload is 20MB, uploading multiple images with that size can affect the site performance.
When it comes to full-width images, we recommend the size to be 2400x1600px to make sure it looks good across any device, big or small. If you use inside content images you will use the following dimensions: Horizontal – max-width 1500px, jpeg, saved for web, and optimized and Vertical – max-width 1000px, jpeg, saved for web, and optimized.
Here are a few essential tips to consider when uploading images to the web:
- If you are preparing images for your slideshow galleries, make sure it’s a max-width of 2000px for landscape and a height of 2000px for a portrait.
- When preparing images for inside a blog post, make sure they all have the same recommended width of 1500px, irrespective of whether they are horizontal or vertical.
- Ensure all feature images are consistent; for example, if you want to use all portraits, make sure they are the same dimensions, the same goes for landscape & hero images.
- If you use a masonry grid, make sure the photos are at least 1000px in width.
Sourcing the best images for your website isn’t just about choosing ones that look good. You will need to consider how they will fit into your website layout in terms of image size and aspect ratio.