By: Katie Hill

Date: July 27, 2017

Images are great to use on your website and in blog posts to break up content, illustrate a concept, and promote engagement on your site. However, improper use of images, typically due to file formatting and size, can do more harm than good to your site if you’re not careful. Bad images can affect user experience, website speed, and your search ranking.

While not everyone uses WordPress (you should), the following are guidelines for optimizing your images for WordPress. These same guidelines could also help you with your non-WordPress website.

 

Optimal image file format

When uploading photos to your CMS, make sure your image is saved as a JPG, GIF, or PNG. Each file type has it’s optimal time and usage:

JPEG (or JPG) – This is the de facto digital file format. It can considerably cut down the file size for large, colorful photos. For most of your photos, you’ll be safe with the JPG format at high, medium, or low quality. Note: JPGs can degrade over time if you re-save them consistently, so be aware of this if you are using JPGs for your logo or other important branding materials.

GIFs (pronounced like “gift” without the t)– These are lower quality images, generally used for icons, line art, and animations with a smaller selection of colors. If you try to save a large, colorful photo as a GIF you may see resolution or color issues.

PNG – This is a newer format that is similar to a GIF, but can handle more colors. It’s a good option to use if you need a lower file size or you need to use a transparent image.

File formats that you want to stay away from for online use are EPS, TIFF, RAW, PSD, AI. If you have a file format in one of these, never fear. You’ll most likely be able to convert the file into your preferred JPG, GIF or PNG format (see below).

 

Optimal image file size

The number one culprit we see when we come across improper use of images is file size. Most cameras and mobile phones now save images at the highest resolution. This is great when viewing your images on your phone, desktop, or in print, but when they are used online, they take a long time to load. High-resolution photos have extremely large file sizes. The optimal file size for a web image should be no more than 200KB, whereas original high-res images can sometimes be more than 100MB in size. When you use large photos like these, not only do they take a long time to load on your screen, they can also hurt your SEO ranking. Google uses page load time as a factor in their ranking algorithm. The file size can be adjusted by reducing the dimensions of your image, reducing the resolution or dpi, and saving the file with the correct format.

The easiest way to see the settings of your image is to right click on the file and click “Get Info” on a Mac or “Properties” on a PC.

 

 

For WordPress specifically, a good way to prevent uploading an accidental mega file, you can set a file upload limit where it will give you an error if you try to upload anything bigger than the max you set. This is done in the wp-config.php file, so ask your web developer to set this for you.

 

Optimal image file dimensions

By default, you want to make sure that your image dimensions are no wider than the width of your website. Most websites are 1200px in width. WordPress will allow you to use images larger than this and will then resize it to fit, but the website will still load the larger image to do so. That’s why it’s best to resize your photos first before you upload.

When you upload an image, WordPress not only uploads the original image, it automatically creates three resized images for you:

  • Large (default 600px)
  • Medium (default 300px)
  • Thumbnail (default 150px)

 

 

However, not all websites are the same size, so the defaults may not be the best size for your site. You can update these defaults in your WordPress dashboard under Settings > Media. If you do so, be sure to use a plugin link Regenerate Thumbnails to resize the images that are already in your library.

 

Optimal image resolution

Image resolution can often throw off file sizes if you aren’t careful. When you save your image, be sure to save it with the standard web resolution of 72 dpi. Often, raw images typically used for print are 300 dpi or higher. There is no need to have a high dpi.

One thing to note is that when you bring the dpi down, the file dimensions decrease. Sometimes you may have a file that is 300 dpi with a width of 500px. When you bring the dpi down to 72, your image is going to shrink to 120px in width. In this case you need to weigh your options based on the general file size output.

Regarding Retina Screens: Most mobile phones and large monitors now have retina displays that are able to show high-resolution images. You may even notice this on websites on your phone. It’s pretty clear when someone hasn’t used retina friendly images on their site because the image is blurry and not crisp.

In order to account for retina displays, you actually want to upload images that are double in dimension. So, if you were using an image to fill an 800×800 space, you would want to increase the dimensions of your image to 1600×1600. But—you may be thinking—isn’t this the opposite of what you just said? Yes. In this case, you’d want to think through the tradeoffs and keep an eye on the file sizes as you save the files.

A good plugin to use for this would be WP Retina 2x. With this plugin, you’d need to upload the retina version of the image and then the plugin would automatically resize the photo for all of your defaults and automatically offer up the correct version depending on screen and usage. Another good plugin to use in conjunction with this is Shortpixel Image Optimizer. This is a lightweight plugin that will automatically add another layer of optimization to the images in your library.

 

Optimal image file naming

While file names aren’t going to slow down your site, having an optimized name and ALT tags will certainly help improve your website’s search engine ranking for SEO. When saving your file, instead of the using the generic file name your camera assigns it (like DS29837.jpg), name it something more descriptive like small-red-wagon.jpg. Google and other search engines can read file names and even display them in image searches. This can be especially helpful if you have an ecommerce site. Many people will actually find your site through an image search if your images have pertinent keywords in their file name.

Adding a keyword rich ALT tag when uploading your image to WordPress is also going to help with SEO rankings. This is just another way to tag your images with common search terms so search engines will be able to reference and index your images better.

 

How to save an optimized image

Now that we’ve discussed all the guidelines for optimizing images, you’ll then need to know how to adjust these settings in your favorite image editing software. Our favorite and most commonly used photo editor is Adobe Photoshop. Along with its many features, it does come with a price. Therefore, if you think you’ll only need a photo editor for minor editing and file saving, we’d recommend checking out alternatives like PicMonkey, Pixlr, or GIMP.

We’ll use Photoshop as an example, walking you through the steps of optimizing an image.

 

 

First, you’ll need to adjust the file resolution by going to Image > Image Size… Change the dpi to 72.

 

 

Then, when you’re ready to save the file, instead of going to File > Save As or File > Save for Web (legacy), go to File > Export > Export As… instead. The difference is that you’ll get more options to change the files settings when you Export.

In the image above, we’ll start at the top:

  1. Adjust file format: JPG, GIF or PNG
  2. Adjust image dimensions: No larger than the width of your site (unless you are saving for retina
  3. Check file size and try to get it to <200KB

Once you’re happy with your settings, click Export where you can then update the file name.

 

How to post your image to WordPress

Last but not least, you’re now ready to post your image to WordPress. This is fairly simple, but there are a couple things to consider when you upload your image. First, within your Page or Post, you’ll want to click on the “Add Media” button to open the Media Library. Click the Upload Files tab and upload your optimized file. On the right-side column, you’ll find all of the image details. You shouldn’t need to update the size at this point, but if you do, you can use the “Edit” link to get some basic tools. Scroll down to add your keyword focused Alt Tag.

 

 

Then scroll down further to adjust the display settings. The Alignment allows you to select which positioning and text wrap you would like for your image. The Link To setting allows you to add a link to your image. You have the options to add a link to the standalone media file, attachment page, or a custom URL. And finally, you then select the image size you’d like to use in your Page or Post.

 

The last words on image optimization

Your main goal in optimizing images for WordPress is to use a standard web format and keep the file size down by adjusting the image dimensions and resolution. If you get these basics locked down, you’ll notice your website loading faster. Updating the file-name and alt tags are icing on the cake. Happy optimizing!