On this Page:
General Best Practices
- Remember the best practices for optimized image sizes!
- Make your file names unique, meaningful and appropriate for computing.
- File names should contain only alphanumeric values and underscores or dashes.
- Trying to upload a file with the same name as one that already exists will cause problems. For example, image.jpg is a terrible name for an image!
- JPG is the preferred file type. Learn more about JPG vs. PNG. Other common image types: png gif jpg jpeg webp
- JPG files should be saved with sRGB color settings. See the section below if the color looks weird.
- If the tool you are using to edit presents the option, use ‘progressive load’ and remove all meta data.
- Follow the instructions for Drupal websites or instructions for WordPress websites.
- Never forget to add an alternative text description!
Tools for Editing
The Content Management System should have instructions about the maximum upload size, dimensions or/or ratio. Remember the maximum upload size is usually far greater than that of best practices for optimized image sizes.
Adobe Photoshop or Preview can be used.
You may also wish to try Pixlr, http://pixlr.com/.
If you need really optimized images check out Compressor, https://compressor.io/ or ImageOptim, https://imageoptim.com/.
https://kraken.io/web-interface will optimize any image file type.
For more links, try this List of Online Image Editing Tools.
Troubleshooting
If you are working with a Photographer be sure to ask them to give you “web ready” images.
If the image will not upload
First make sure the byte size of the image does not exceed the maximum allowed. Remember the maximum upload size is usually far greater than that of best practices for optimized image sizes.
If it still won’t upload open and edit it, preferably in Photoshop but if you don’t have Photoshop, try it in Preview. Please check the image size and re-size it if possible. Then re-export. Frequently, this is all you need to do!
Photoshop has a few additional configurations when exporting that may be relevant that you can try:
- Save as ‘progressive load’
- Save and remove Metadata
- Set the Color Space to sRGB or embedded sRGB profile as described below.
The Color Looks Weird
JPG files should be saved with sRGB color settings. Do not save JPGs with Embedded color profiles, AdobeRGB or CMYK because this will cause an undesired color shift.
If the colors in your image ever render differently than expected on the website, you may need to open the file in Photoshop and re-exported it using the sRGB color profile. One way to do this is to save it using the Export to Web interface:
