Photo & logo specs for websites
Why you should use a professional photographer
Bad photos can totally destroy the best-designed website, so it is a good investment to use a good professional photographer!
They should have the right equipment and know about set design, resolution, sizes, lighting, and what should and should not be in a photo, as well as carrying out all the necessary editing for you.
If there is any doubt, we are happy to discuss this matter with your chosen photographer.
Why photo size is so important
Modern cameras take absolutely massive photos, both in size (pixels) and weight (MB).
Uploading large photos for a website will impact the page opening speed, which is undesirable, and slow loading pages is one of the best ways to lose your audience as well as cause issues with search engines when they crawl your website!
We will always ensure all of your images are optimised for web use before final publication.
Photo & logo formats
Popular image formats for web use
- JPEG & JPG: Joint Photographic Experts Group.
Use: web photos - SVG: Scalable Vector Graphics.
Use: logos & illustrations. - PNG: Portable Network Graphics.
Use: logos & illustrations - they should not be used for photos. - GIF: Graphics Interchange Format.
Use: Animations.
Logos are best in SVG, as it is a scalable format. Making them with transparent backgrounds will reduce the file size. They should be exported correctly from a suitable graphics program. SVG converters should not be used as they do not produce the required result.
If you can't supply us with SVG images, the next best is PNG with transparent backgrounds.
SVG vs PNG
Many people will pan and zoom their phones and other touch-screen devices.
Images in PNG format, if made too small, will pixelate, making them look blurry.
SVG images scale up perfectly with no pixelization.
The larger images below had had their original width stretched to simulate zooming on a touch-screen device.
PNG: Width set at 250 pixels
This the original size the graphic was made.
No pixelisation.
PNG: Below is the same image as above but with the width stretched to 900 pixels using CSS code
Pixelisation occurs rendering the image blurry.
If you are viewing this on a small device such as phone zoom in with your fingers to see the result.
SVG: Width set at 250 pixels
This the original size the graphic was made.
No pixelisation.
SVG: Below is the same image as above but with the width stretched to 900 pixels using CSS code
No pixelisation.
If you are viewing this on a small device such as a phone, please zoom in with your fingers to see the result.
Photo & logo sizes
- Photos - Fullscreen: 1920 pixels.
- Photos - Expandable displays and slideshows: 1600 pixel.s
- Photos - all others: 1000 pixels.
Use: Logos & illustrations. - Logos made in SVG: Size irrelevant as they are scaleable however a minimum width of 200 pixels is ideal as the human eye can see it.
- Logos made in PNG : Minimum width of 900 pixels.
If any images you send us need reducing, we will take care of it.
If your template needs different-sized photos to those listed above, we will inform you.
Please note: images can be reduced in size but not expanded, as pixelisation will occur, meaning the image will appear blurry.
Tips for taking photos if your budget does not run to a professional photographer
Preparation is everything!
- Get the focus right. A good camera with the correct lens will produce better photos than a phone.
- Get the lighting right. Generally, photos taken outside come out best an hour after sunrise or an hour before sunset. Bright sunlight shining through a window in a dark room will not produce desirable effects.
- Prepare the foreground. Make sure the main subject is central. With products, check for damage and damaged packaging, etc.
- Prepare the background. Avoid clutter.
- Check for and remove if necessary any unwanted items in all areas, such as litter, etc.
- Make sure your shadow doesn't show.
- Make sure your reflection or camera flash doesn't show in windows, mirrors, or any other reflective surface.
- ALWAYS check your work before leaving the photo set, as this can save time and money in the future. Look for people with their eyes closed, unwanted facial expressions, people blocking the faces of other people, etc., and take another photo if necessary.
