What Image File Types are Supported for Upload?
Images can be uploaded in the following formats:-
- .JPG;
- .JPEG;
- .PNG;
- .BMP;
- .GIF;
- .WEBP.
What happens when an image is uploaded?
Uploaded images are converted to the the popular, and Google preferred, .WEBP format; which has the lowest file size compared to the other formats details above. See What are the benefits of the .WEBP image format? below.
The images are also automatically generated in to 14 optimised variations, for use on different devices and loactions on your website, which helps to improve on page SEO.
Some of these image variations are cropped, while others scale the image up or down. See, What Image dimensions are automatically generated, and where are they used? below.
If you were directed to the Media screen (i.e. when setting a Featured image for a Page) once your image is uploaded it will be automatically set, and you will be redirected to the screen you were previously on before being directed to the Media screen.
What Image dimensions are automatically generated, and where are they used?
Uploaded images are automatically generated in to 14 optimised variations for use on different devices and locations on your website, these are detailed in the table below.
Image Type | Use cases | Ideal Device | Dimensions W x H | Aspect Ratio |
---|---|---|---|---|
Cover | Carousels | Template & Identity | Pages | Desktop (Large) | 1920 x 1080 | 16:9 |
Cover | Carousels | Template & Identity | Pages | Desktop (Standard) | 1600 x 900 | 16:9 |
Cover | Carousels | Template & Identity | Pages | Tablet | 1200 x 800 | 3:2 |
Cover | Carousels | Template & Identity | Pages | Mobile | 720 x 900 | 4:5 |
Content | Pages | Desktop | Calculated x 900 | Original Image Aspect Ratio Maintained |
Content | Pages | Tablet | Calculated x 760 | Original Image Aspect Ratio Maintained |
Content | Pages | Media | Mobile (Large) | Calculated x 450 | Original Image Aspect Ratio Maintained |
Content | Pages | Media | Mobile (Standard) | Calculated x 390 | Original Image Aspect Ratio Maintained |
Thumbnail (Large) | About us | Ecommerce | Pages | Meet the team | All | 600 x 600 | 1:1 |
Thumbnail (Standard) | Media | Ecommerce | Pages | Meet the team | All | 400 x 400 | 1:1 |
Thumbnail (Small) | Template & Identity | Client/ Accreditation | All | Calculated x 150 | Original Image Maintained |
Thumbnail (Tiny) | Reviews | Ecommerce | All | Calculated x 85 | Original Image Maintained |
What are the benefits of the .WEBP image format?
The .WEBP image file format has a far smaller final file size when compare to .JPEG, .JPG, .BMP, and .PNG files:-
Benefits of converting from .jpeg & .jpg to .webp
While .JPEG & .JPG files are already reasonably compressed, .WEBP generally offers 60% to 70% smaller file sizes compared to JPEG or .JPG files at similar image quality levels.
The compression efficiency of .WEBP is better, meaning you achieve smaller file sizes while maintaining a comparable visual quality.
Benefits of converting from .bmp to .webp
Converting to .WEBP can have very significant savings, around 90%, as BMP files are an uncompressed file format.
Benefits of converting from .PNG to .webp
.WEBP can reduce a .PNG file size by 50% or more because .WEBP uses lossy or lossless compression, whereas .PNG uses only lossless compression.
.WEBP is especially efficient for images with transparency (like .PNG files) due to its ability to handle alpha channels with better compression.
What are the Recommended image file sizes for a website?
When uploading an image for use on your website we recommend uploading an original image file no larger than 5120 Kb (5 MB). While you can upload images lager than this they may not meet the recommended image file sizes mentioned in the table below following automated conversion and compression.
The table below lists the recommended file sizes of the images used on a website, once you have uploaded your original image in the Media screen it will automatically be converted to the dimensions detailed below and the file sizes will be reported in the Media screen.
If one or more of your uploaded images fall outside of the recommended ranges, after automated conversion, you should consider running additional automated compression on the uploaded image. See, How do I change the compression used on an uploaded image?
Image Type | Device | Dimensions W x H | Recommended file size (after conversion) | Max Recommended file size (after conversion) | Variation Style |
---|---|---|---|---|---|
Cover | Desktop (Large) | 1920 x 1080 | < 300 KB (0.30 MB) | < 500 KB (0.49 MB) | Scaled & Cropped |
Cover | Desktop (Standard) | 1600 x 900 | < 300 KB (0.30 MB) | < 500 KB (0.49 MB) | Scaled & Cropped |
Cover | Tablet | 1200 x 800 | < 150 KB (0.15 MB) | < 200 KB (0.20 MB) | Scaled & Cropped |
Cover | Mobile | 720 x 900 | < 100 KB (0.10 MB) | < 150 KB (0.15 MB) | Scaled & Cropped |
Content | Desktop | Calculated x 900 | < 200 KB (0.20 MB) | < 300 KB (0.30 MB) | Scaled |
Content | Tablet | Calculated x 760 | < 160 KB (0.15 MB) | < 200 KB (0.20 MB) | Scaled |
Content | Mobile (Large) | Calculated x 450 | < 100 KB (0.10 MB) | < 120 KB (0.12 MB) | Scaled |
Content | Mobile (Standard) | Calculated x 390 | < 100 KB (0.10 MB) | < 120 KB (0.12 MB) | Scaled |
Thumbnail (Large) | All | 600 x 600 | < 100 KB (0.10 MB) | < 120 KB (0.12 MB) | Scaled & Cropped |
Thumbnail (Standard) | All | 400 x 400 | < 70 KB (0.07 MB) | < 100 KB (0.10 MB) | Scaled & Cropped |
Thumbnail (Small) | All | Calculated x 150 | < 15 KB (0.02 MB) | < 20 KB (0.02 MB) | Scaled |
Thumbnail (Tiny) | All | Calculated x 85 | < 6 KB (0.01 MB) | < 11 KB (0.01 MB) | Scaled |
Do I have to manually convert and compress my images before I upload them?
No, this is done automatically for you when you upload an image. Try to make sure you initially upload and image that is no larger than 5120 Kb (5 MB). You can upload images larger than this, however the automated conversion process may not be able to keep the 14 generated variations below the recommended image files sizes detailed above.
What can I do if some of the generated image variations have not captured the most important part of my image?
Some image variations are a cropped version of your original image. By default the crop is centered, meaning that the center of the image is preserved with the outer edges of the image cut away.
There may be occasions where the most important part of the image is to the right so you would want the left part of the image to be cropped instead, or vice-versa.
You will need to use Crop Style under Image Tools on the Media screen to achieve this. See, How do I change the crop style on an uploaded image?
Can I edit an image after it has been uploaded?
The are number of Image Tools included on the Media screen to help you improve the visual of your image, as well as its file size. Use one of the following guides to get started:-