Using your images on your WordPress blog can be a great tool to help convey a message and enhance overall reader experience of your site. But images can actually hurt your site if they’re not optimized for the web, degrading the quality of your site leading to penalties from search engines.
Luckily, WordPress has evolved greatly over the last several years to become more user friendly with images but below, I’ve outlined 6 steps for enhancing your image performance and to help improve your WordPress site’s overall experience.
Great images start with a good eye.
Images do several things. They help convey a point. They can represent a brand or a person. They help tell a story. Think about how newspapers use images. Are the images natural? Do they add to the story?
Avoid using generic stock photos for your posts and look towards using real images of your subject matter. If that’s not available, may work on creating a simple chart or infographic that can assist your readers.
Takes photos yourself when you can. Use your mobile phone’s camera if needed. Maybe find a photography meetup or take a local photography class to increase your skills.
Watch your image resolution
If you own a digital camera, it’s always a good practice to shoot images as the “highest resolution” possible. This way if you later want to print your images, they will be in the best clarity possible.
When working with images on the web it’s the contrary. We aim to use images at their smallest file size so they load as fast as possible and to reduce strain on our web servers. We reduce them just to the point where they still look sharp but don’t carry all of the extra weight. A good program to help you with this is Adobe Photoshop. When working with images, you can actually “Save for Web” where you will have the ability to address the following:
- Crop off any excess visual parts of the photo that are not needed
- Reduce the file size of the photo so it is optimal for web resolution
- Remove any embedded meta camera data as this can lead to unnecessary file size.
Bottom line, continue to use your camera at it’s highest resolution settings but be prepared to lower the resolution should you use that image on your website. You can always reduce the quality of a photo but you can never increase it.
What’s a good image resolution? The standard screen size of a laptop is approximately 1,200 pixels wide, therefore if your web images are much larger than 1200 pixels wide then they’re probably too big. With variety of screen sizes and with new tables and mobile phones hitting the market, it’s hard to put a “best size” number on images but as a web developer it’s our job to make sure they’re optimized for the best experience.
Use the right image file type for the job.
The three popular image types for blogging and website development are .jpg, .png and .gif. All three of these file types are supported image formats in WordPress but an experienced user would use the correct file type for the job.
.jpg - the most common and probably what your default file type your camera might save images as. .jpgs offer the best compression rate and is often used for “in post” images that are often large and accompany a story. Good for large photos.
.png - increasing popular file type that is often used in the actual site’s look. Pngs allow for transparency whereas .jpgs do not and do not always have the lossless. The png format is best used with smaller images where image quality and transparency matter.
.gif - are popular for their animation features and often used as icons or advertisements. It also has transparency.
Remove unnecessary image data with Smush.it
Chances are, your camera is inserting useful data into your images of the aperture, shutter speed and other cool stuff. This data can be really useful in some instances but on the web, it’s extra date that’s just taking up space. If you’re using photoshop, be sure to turn of “metadata” when saving images for the web.
If you already have a working WordPress site with a lot of existing images, Yahoo offers a free service called Smush.It that analyize and remove any existing meta data from images. Best of all, there’s a WordPress plugin to help you do this!
Use a CDN to deliver images.
A content delivery network can dramatically increase the load time of images and reduce the load on your webserver. JetPack now supports CDN delivery of images through their Photon module which utilizes the WordPress.com servers. Configuring and maintaining a CDN can often be difficult but the end results are well worth the cost.
Set Captions, Image Tags for Better SEO
This topic is quite extensive but images, in many ways, can help lead towards better site search performance with search engines such as Google, Yahoo and Bing. The simple way to look at this is to always set your image titles and captions to be as descriptive as possible. Be careful, don’t try to deceive search engines but rather write content that is natural to your image and topic.