Marketing
,
Admin,
programming,
tech/staging,
Marketing
Looking great online - an image guide for web and social media
You'll Discover:
- How to preserve the quality and visual impact of your photos and images.
- Why ratios, pixels and size matters.
- Recommended image settings for websites.
- Recommended image settings for social media.
- Free tools to quickly convert images.
As you already know, there's no point making a great photo or image if it looks terrible when uploaded to your website or social media. These two mediums have different requirements, so it’s good practice to have copies of all images to suit both platforms, saved in an accessible folder.
This guide removes 'trial and error' when perfecting online images so that you can save time and hassle, along the way creating consistent and impressive visual content.
1.
Finding image dimensions
There are simple ways to decipher the dimensions and size of any image you want to use online:
Apple iMac/Macbook
Right click (or click with two fingers if you’re using a Macbook) on the image that you intend to use. Then select ‘Get Info’.
Once you have done this, a window should appear that shows the details of that image. You will find the size of the image (in KB) within the ‘General’ section. You can find the dimensions of the image within the ‘More Info’ section.
Windows PC
Windows displays this information a little more obviously. Find the image that you intend to use in Windows Explorer. Select the image, and at the bottom of the window it will display both the dimensions and the size (as illustrated in the image below).
2.
Website specifications
Many sources, including OM4, warn that loading images that are too large will slow your website down for anyone that visits it.
OM4 outlines the two main factors of images being “file dimensions (width and height in pixels) and file size (kilobytes KB or megabytes MB)”.
File dimensions
Due to the current trends in website layout, Foreground Web recommends a width of 2,560 pixels in width. This size is common to most screen sizes. The height of the image can be whatever you need provided that the image doesn’t distort and is clear. Foreground Web gives this example: “for full-page slideshows keep the original aspect ratio of images. But for smaller slideshows at the top of a homepage, try to keep the images shorter (to an aspect ratio of around 3:1 or more).”
If you want to put the image into a slideshow or area of the website with specific dimensions (e.g. a table or a box), then you will need to know the dimensions/display ratio of that particular element before exporting the image. Often these dimensions might be displayed when you go through the upload process. If not, you can right click on the area and select ‘Inspect’ to get dimensions.
File size
The consensus among many sources is “the lower the better”. A way to do this is to reduce the image quality of the file, but not to the point where the look of the image is compromised.
Om4 has great advice in regards to what file size you should aim for:
“For most 'full page' web images, you want the image to be 80Kb-100Kb at most. If the image is only part of a page (e.g. half the width of a blog post), then 20Kb-30Kb is usually fine. Dropping image quality to 30-50% of the original usually doesn't make any difference you can pick with the naked eye.”
Flothemes have examples that illustrate the difference between image quality settings too.
Image Ratio
Also known as aspect ratio, Shuttershock displays the most common image ratios in the graphic below. They also explain that:
- 16:9 ratio is common for social media cover images
- 4:3 ratio is the common format for photography and film (also for HD format)
- 1:1 ratio is common for social media posts (particularly on Instagram) and also profile pictures across different platforms.
3.
Social media specifications
To keep up with any changes in image specifications on social media platforms, there are many websites (including Hubspot and Sprout Social) and of course the designated help centres that you can visit. The below specs for Facebook and Instagram are accurate as of July 2019.
Image dimensions below are shown as width x height in pixels and the image aspect ratio they represent. These are the minimum pixel sizes, so you can have larger images, but try to stick with the recommended image ratio. Note that 'Posts' (ie images/photos you post to your Facebook news feed or Instagram gallery) permit various image ratios, but other sections recommend only one and crop or shrink your image if it doesn't fit.
- Post square image: 1080 x 1080 pixels (ratio 1:1).
- Post landscape image: 1200 x 630 (ratio 1.91:1).
- Post Portrait image: 1080 x 1350 (ratio 4:5) but allows height to be less than 1350.
- Shared link preview image (ie image on your webpage that's displayed in Facebook when someone shares your webpage): 1200 x 628 (ratio 1.91:1).
- Facebook Event image: 1920 x 1080 (ratio 16:9)
- Facebook Page cover image: 828 x 315 (minimum 400 x 150)
- Profile image: 180 x 180 (ratio 1:1)
Facebook frequently changes its image dimensions frequently so visit the Facebook Help Centre to find out more.
In pixels, here are the minimum dimensions (as quoted on Sprout Social):
- Post square image: 1080 x 1080 (ratio)
- Post landscape image: 1080 x 566 (ratio 1.91:1)
- Post portrait image: 1080 x 1350 (ratio 4:5) (but height can less - eg somewhere between 1080 to 1350 pixels)
- Profile image: 110 x 110 (ratio 1:1)
- Image thumbnail: 161 x 161 (ratio 1:1)
- Shared videos: 1080 pixels wide
- Instagram Stories: 1080 x 1920 (minimum 600 x 1067) (file size can be maximum 4 GB.
Visit the Instagram Help Centre to find out more.
4.
Confused? Do this on Facebook & Instagram
Apologies if all the above was too much info - but many venues wanted a definitive (up to date) list to cover all areas!
To keep things simply try to keep close to the dimensions below to post the same image to your Facebook and Instagram feeds.
- Square images with a minimum of 1080 x 1080 pixels (that's an aspect ratio of 1:1).
- Landscape images with a minimum of 1200 x 628 px (ratio 1.91:1).
- Portrait images with a minimum of 1080 x 1350 pixels (ratio 4:5).
These dimensions are a good middle ground that will save you time and avoid Facebook or Instagram cropping, shrinking, or rejecting your image.
5.
Free tools to resize/compress images
There are thousands of online image compressors that you can use for free. But here are some that we've personally tried and tested.
TinyPNG
Contrary to it's name, this site can compress both a JPEG or PNG file. This means that the file size of the image will be decreased, and should load a lot quicker when someone visits your page.
Compress JPEG
This one allows you to compress and convert images to different file types, including PNG to JPEG and vice versa, as well as SVG to PNG.
Image Resize
There are many different options with this particular site. You can alter the dimension of the image, compress to reduce file size, crop the image and convert it to another file format.