The Best Way to Optimize Photos for your Website
There are a number of options you can choose from when exporting an image.
Size:
For JPG, you can specify the image quality, as well as the width and height of the image and canvas.
Metadata:
Specify whether you want to embed metadata — copyright and contact information — in the exported assets.
Color Space:
sRGB (standard Red Green Blue) is an RGB color space created cooperatively by HP and Microsoft in 1996 for use on monitors, printers and the Internet.
You also have the option to embed a color profile in the image.
What’s the correct way to export? Allow me to show you.
SAVE FOR WEB
As each output setting changes, the image quality becomes visibly worse. It’s amazing to me that at 60% quality there is perceivably little to no difference zoomed in at 1200%. The color changes ever so slightly but it’s a small price to pay for the compression you get, bringing the size down to 445.2K from the original 1.9M.
When you save for web, some of the metadata is deleted resulting in a smaller file size. BUT IT DOESN’T MATTER FOR WEB. The final file size of the image when you use Save For Web is smaller than the Save As image at the same compression levels. A major reason why this happens is because using Save For Web saves the image in a 216 color pallet and Save As uses a 256 color pallet. Another thing is that Save for Web gives you opportunities to customize the export settings in much more detail than Save As. For example, if you click on the little hamburger dropdown in the top right corner of the Save For Web dialog box, you can edit the Ouput settings to enable Settings for file naming.
Okay so I’m using Save for Web, but which quality option do I choose?:
Use 100% JPG when quality (really) matters.
Use less than 60% JPG Quality when file size (really) matters.
Use 60–80% JPG for when you want quality and reduced file size
Chelsa (MacKay) Anderton is a student in the Digital Media program at Utah Valley University, Orem, Utah, studying Interaction & Design. The previous article relates to Output & Evaluation in the DGM 2341 Output for mobile media and is a representation of the skills learned.
