Choosing the correct Photoshop export settings is imperative to making images on your site look sleek and professional, all while keeping load times to a minimum. Here is quick how-to guide for exporting for web in Photoshop, as well as some tips for keeping your images small in size, but big in visual impact.
How to Export with Photoshop
File -> Export -> Export As: Provides a few more tweakable settings for export
- Choose your file type.
- JPG: Adjust the quality setting
- Lower quality settings make a smaller file size
- PNG: Try PNG 8 for a smaller file size, but PNG24 is necessary for getting the proper colors
- JPG: Adjust the quality setting
- Adjust image dimensions if necessary
- Export at the size you need for web
- Smaller dimensions make smaller file size
- Check image size
- In the left sidebar (either top or bottom depending on what method you use) is a number in GB or KB, indicating the size the image will be once it is exported.
- Try to keep image file size around or below 100KB
- Small graphics and background images can be exported at much smaller sizes.
- Save space wherever you can
- Check image appearance
- Be sure that your image looks good after changing the export settings. The ultimate goal with images on the web is getting the best combination of small file size and image quality.
Tricks for Reducing Image Size in Photoshop
- Smaller dimensions
- If you are not intending an image to span the full width of your webpage, you can save space by saving it at smaller dimensions in the right hand toolbar.
- Remove meta data.
- Select none under the meta data section in the export window. This info has no bearing on the image appearance, but does increase file size
- Lower jpg quality setting
- Most jpgs can actually stand to go as low as 20-25 in quality and still look pretty good
- Adjust the resampling settings
- Export -> Save for Web: bottom right window (labeled Quality)
- Export -> Export As: Right toolbar, second box, Resampling
- Change the resampling method and see how it affects your file size and image appearance
- Will another image work just as well? If you have an alternative photograph that could work on your site at a smaller file size, consider swapping.
- If an image cannot be made 100KB or less without negatively affecting quality and appearance, you may need to bend this rule. Weigh your options. Is this image very important to the site/page? Then it might be worth it to use a larger file size to ensure the image looks appealing.
Alternative Option if You DO NOT Have Adobe Photoshop
You may already be familiar with WordPress if you use it to update your business website, but perhaps you did not know that you can use it to scale down image dimensions.
- In WordPress, choose “Media” on the left-hand side.
- To upload a new image click “Add New” and drag and drop your file from your desktop into the browser menu; Or click on the pre-existing image you want to edit.
- Click “Edit Image”.
- To change the image size, use the “Scale Image” tool on the right hand side.
- Make sure to “Save” the image after finishing your updates.