Before you upload images to WordPress, you need to optimize them for quality, size and SEO. This short guide shows you how to prepare images for the web in Photoshop so that they look great and load fast on your web pages.
Photoshop is a monster of a tool but fortunately its image optimization is among the best, as well as being easy to use.
How to prepare images for the web in Photoshop
1. Open the image inside Adobe Photoshop.
2. Adjust contrast and saturation.
Often when an image is flattened and prepared for the web, it loses a little contrast and saturation. Having a powerful tool like Photoshop on hand means you can do a little editing to offset this effect.
3. Export the image to your desktop.
From the main Photoshop window choose File >> Save for Web & Devices. This will open up the web export window:
On the right-hand panel choose the format (JPG,PNG, GIF). Generally JPEG is preferred unless you want to maintain the transparency of the image. i.e. Have the object floating over a background.
Set the maximum width or height for the image.
Keep in mind that WordPress is going to create a series of thumbnails from the original image. You can set these dimensions from Settings >> Media.
Use some of the Photoshop presets if needed.
Move the quality slider until you get the smallest file size with the best quality you need.
The image will update automatically when you make changes.
WordPress makes all files web friendly when you upload them. What this means is that any file called “Ice World.jpg” will be changed to “Ice-World.jpg” with no spaces between the words. This is a good thing as web URLs are weird about spaces in file names.
In addition, WordPress converts the initial filename into the images Title attribute:
From here you can copy and paste the Title into the Alt Text attribute for search engines, as well as add a Caption and/or a Description.
Removing the adding of dashes to filenames
Out of the box, Photoshop adds dashes in between files exported using this method. This means having to remove them later inside WordPress. Very annoying.
You can find easy steps for removing the adding of dashes to web exported images here.
Image created with the Mac OS X application, Artmatic Voyager 2.0.
If you have any questions please let us know in the comments.