When working with our clients on website design projects we get the question:
“What size images should we be providing to you for the new website?”
This is an interesting question to answer as it heavily depends upon the skill level of the person preparing these images for delivery.
The below sections are our attempt to best answer this question:
What is SIZE on an image?
The word “size” in images can be referencing two very different meanings.
Size (Data) = The amount of data the image takes up on your computer’s hard drive. In web design, we want to optimize images into the correct format (PNG, JPEG, SVG, WEBP) to ensure they are downloaded efficiently even on slow internet connections. Here are the image types we recommend for each style of photo.
- PNG = Use this image type if the image is a graphic or image with only a few colors.
- JPEG = Use this image type if the image is a photo or has many colors
- SVG = Is this your logo?
Size (Resolution) = This is the real estate or area that this image occupies on website pages. Image resolution is typically measured in pixels.
What type of image are you looking to provide? Images are used in many areas across the website. We have outlined the images
- Hero or Full-screen images: Width should be at least 2560px wide
- Product Images: 1000px by 1000px with a consistent background color.
- Favicon Images: 100px by 100px
- Featured Images: 1200px wide
Looking for help with social media image sizes? Check out this Cheat Sheet: https://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/