Ep 119: How to optimise photos for websites and social media without losing quality

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.  

#ginachallenge #krakenshot

Click play to listen to the podcast or find it on iTunes here. If you don’t use iTunes you can get the feed here, or listen to us on Stitcher radio.

Show notes

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:

  1. Look good
  2. Load quickly
  3. Google penalises websites that load too slowly
  4. Optimise images for social media
  5. 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

File type

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

Jpeg Compression

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 Profiles

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

  1. Resize to optimum size for viewing in pixels
  2. Compress to around 9
  3. PPI of 72
  4. Use software like kraken.io to reduce file size and loading time

Kraken.io

 

Resized using kraken.io

Social media

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?

Facebook
Crunches files to save on their data usage bill.

From Facebook:
“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”


#ginachallenge #krakenshot

Leave a Reply

SIGN UP TO GINA’S NEWSLETTER

Get your copy of Gina’s guide “The Shot” FREE when you sign up to her newsletter. You’ll also receive FREE Lightroom presets every month.

How to direct and pose like a pro

Mentoring

Want Gina Milicia as your mentor?

About Gina

About Gina

Gina Milicia is one of the most widely known and respected photographers in Australia. She is the master of capturing that ‘magical moment’... READ MORE

×

GET A FREE COPY OF "THE SHOT" - SIGN UP TO GINA'S NEWSLETTER YES PLEASE!