CharlieHawker/MacUserGuideToSavingImagesForWeb.md

## MacUserGuideToSavingImagesForWeb.md

      
    Raw
  

              MacUserGuideToSavingImagesForWeb.md
            
          
    Mac Users' Guide to Saving Images for Web

It's generally good practice to ensure images, particularly photography are 'saved for web' before uploading them to a website;
some websites do this for you, but if they don't you could be opening yourself up to display and/or security issues with regards
to the metadata the images may contain.
Display issues 👓

If you find your image colours are changing when the files are uploaded, it's probably because image has an embedded color profile.
Best practice is to ensure your image uses an sRGB color profile, ideally sRGB IEC61966.
Security issues 

Metadata on images can contain a wide variety of information beyond copyright / colour profile information. It can contain the details
of the camera which took the photo, the names of the people in the shot and even the GPS coordinates of where the photo was taken!
Removing metadata is therefore a hugely important step in preparing an image for the web.
Preparing images for web using Adobe Photoshop CC

For users with Photoshop, do the following:

Open the image(s) in Photoshop
Go to File > Export > Export As...
Choose your desired export dimensions / quality.
Under the 'Metadata' section in the bottom right, choose 'None'.
Just under this, in the 'Color Space' section, check the box marked 'Convert to sRGB'.
Click 'Export All...'
Have a cocktail 🍸

Preparing the images for web without Adobe Photoshop CC

If you don't have Photoshop, you'll need to do a two-step process, first, you need to convert the image to sRGB, this can be done
with Preview, which is on all Mac computers.
Step 1 - Convert to sRGB


Select all the files you want to edit
Right-click on them and choose Open – Preview should be the default software, but if not choose Open with... and select
Preview from the list.
On the left-hand side, you'll see a thumbnail list, select all of the images in this list at once.
From the top menu, click Tools > Assign Profile...
From the dropdown choice, choose a profile that begins with sRGB IEC61966, e.g. sRGB IEC61966-2.1.
Click File > Save

Step 2 - Optimise for web


Download ImageOptim, a free Mac tool for optimising images.
Open the tool.
Drag in the file(s) you wish to optimise for web
When the green tick appears next to each image, they're optimised! You can see the % saving made by the optimisation software.
Have a cocktail 🍸