In an increasingly online world, it’s vital to understand how to optimise your photos for websites and social media. It’s not just about ensuring it’s a small file size, you also want to ensure your image still retains its quality, depth and colour.
In this episode, Gina and Valerie discuss what you need to know about images and how to manipulate them correctly so that they are the right size, dimensions, pixel quality and more.
Hope you enjoy the podcast.
Sign up to the newsletter for great tips and free Lightroom presets.
Join the dynamic Gold Membership in our Community which delivers monthly tutorials, live mastermind and lots of behind the scenes videos into the creative process.
How to optimise photos for websites and social media
It’s really important that images on your website are as small as possible
It’s important that they:
- Look good
- Load quickly
- Google penalises websites that load too slowly
- Optimise images for social media
- Small as possible whilst retaining detail ie not getting fuzzy or soft
We’ve all had the experience where someone has emailed images to us that are huge and take 2hrs to download
Or visited a website and have waited ages for the site to download images
Or posted a beautiful image to Facebook that we spent hours processing and it looks shite.
File Dimensions Simplified
There are four factors that influence the quality of files online
The universal standard file type for displaying and sharing photos is jpeg
- JPG files can be opened by most image editing software
- Jpeg stands for Joint Photographic Experts Group
- Basically, a technique that takes all the information in a file and compresses it to about 5% of its original size
- The positive is that files can be shared online quickly and easily
- The negative is there is some loss of quality in the process
Jpeg is king for photos or standard
PNG great for logos allow for transparency eg your logo
Display width and height or size of image
Images online are measured in pixels
Print images are measured in cm or inches
File dimensions (width and height) is measured in pixels
File size (Kilobytes KB, Megabytes MB or Gigabytes GB, Terabytes TB ).
1000 KB = 1MB
1000 MB = 1GB
1000GB = 1TB
Average computer screen is 1200px wide
Resolution for print 240 to 300 DPI ideal (Dots per inch)
Resolution: computers only display 72 PPI (Pixels per inch)
The terms DPI (dots per inch) and PPI (pixels per inch) both describe the resolution (or how clear an image is) but they’re not the same thing.
PPI denotes the number of square pixels that show up in an inch of digital screen
DPI is a printing term referring to the number of physical dots of ink in a printed document.
FACT PPI does not affect file size only pixel size matters
- Ideal size for viewing on a monitor is 1000px (long edge) @72 PPI
- 72 is a standard invented by early computer makers and has been adopted as the industry standard
- The most important measurement is pixel dimensions
The following images are all 1080×720 and I’ve varied the PPI
Another factor that affects image resolution or how clear the image looks on screen is jpeg compression
Compression is a scale from 1-12
1 is lowest
12 is least amount
All jpegs have some compression, so even at the lowest amount there is some loss of quality.
How much an image is compressed will affect the size of the file and quality.
8-12 – a lot of the information is saved
lots of colours
looks best on screen
but file size is larger
1-7 – bits are thrown out
looks worse on screen
and not as sharp
Colour profile is like a universal language so that all the colours in an image look the same across different devices and printing formats.
Colour profiles vary by the range of colours they represent.
Prophoto has the most colour information.
Followed by Adobe 1998.
Colour profiles are essential for printing
Followed by adobe RGB
These are the best colour spaces for printing images
SRGB has a smaller colour space and images look best on most screens.
All images online are in SRGB colour space.
If you create an image in a different colour space and upload it, the images colour space will be converted to SRGB
Adobe RGB to SRGB makes images look dull or washed out.
This is because when you convert from a colour space like Adobe RGB that has a wider space to SRGB that has a smaller space colour information is thrown away.
If you want to post an image to the web convert a copy to SRGB and if it looks caca tweak it slightly so it looks better in that colour space.
Saving for Web
Resizing images for website is a balancing act between looking good and loading fast
You don’t have long to grab someone’s attention and so if your website takes too long to load clients may give up in frustration
- Resize to optimum size for viewing in pixels
- Compress to around 9
- PPI of 72
- Use software like kraken.io to reduce file size and loading time
Websites we can control the look of images but what about Facebook, Instagram, is there anything we can do to stop them wrecking our images?
Crunches files to save on their data usage bill.
“We automatically resize and format your photos when you upload them to Facebook. To help make sure your photos appear in the highest possible quality, try these tips:
- Resize your photo to one of the following supported sizes:
- Regular photos: 720px, 960px or 2048px wide
- Cover photos: 851px by 315px
- To avoid compression when you upload your cover photo, make sure the file size is less than 100KB
- Save your image as a JPEG with an sRGB color profile”