Using Images In WordPress

Using Images In WordPress

Using Images In WordPress - How To Reduce Image File Size In Your Server

If your website uses loads of images, your site may have to store hundreds or even thousands of images.

Uploading loads of images to your server can lead to an excessively large image folder.

This can cause your site to exceed its hosting quota, create problems with data backups, slow down page loading times, and other issues.

Knowing how to use images correctly in WordPress can help you avoid many problems.

This tutorial covers:

  • How to create and save images correctly in WordPress.
  • How to reduce your image file size without compromising image quality
  • How to optimize the size of your image files to help improve your site’s page loading speed.

Avoid Using Large Image Files On Your Website

Images uploaded to the WordPress Media Library are stored on your web hosting server.

If you must use large media files or plan to add lots of images to your website, we recommend using a cloud storage service (e.g. Amazon S3, Dropbox, etc.) instead of uploading and storing these in your WordPress Media Library.

Note: If you store images on the cloud, use the Add Media tool’s ‘Insert from URL’ feature to add the image to your content.

WordPress Media Library: Add Media tool - Insert from URL
Use an external storage service for adding large media files to WordPress!

To learn how to use the Add Media ‘Insert from URL’ tool, see this tutorial: How To Add Images To WordPress

Some situations, however, may not be avoidable.

For example, if you run an eCommerce store on WordPress using a platform like WooCommerce, you may have to upload all your product images to your site using the WordPress media library.

In this case, make sure that you are not uploading images that are larger than necessary.

List of large-sized images.
Uploading large images like these to your Media Library may cause performance issues on your site.

Let’s see why this is a problem…

Media File Management

Images, videos, and other media uploaded to your website are normally managed through the WordPress Media Library.

WordPress Media Library.
WordPress Media Library.

Your media settings are configured in your Media Settings section.

Here you can specify maximum image sizes and whether to store your media uploads into month and year-based folders.

WordPress Media Settings screen.
WordPress Media Settings screen.

When you add media files to your site via the Media Library, these are then uploaded to your server and stored in a directory called the wp-content > uploads folder.

Note: To access and view the contents of folders on your server requires using applications like FTP or a File Manager tool provided by your web host (e.g. cPanel’s File Manager).

cPanel File Manager
Media Library files are stored on your server.

Uploading loads of large images and other media files to your Media Library will cause your server’s disk storage to swell up in size.

cPanel Disk Usage.
Storing large media files in your server can cause problems.

Storing large media files in your server can lead to problems like backing up files and slow down your website’s performance and web page loading speed.

Hence, the reason why we recommend uploading large media files to a cloud storage service or a platform like YouTube (for videos) and embedding links to these files into your content using the Add Media tool.

Before we look at ways to reduce image file size, let’s go over some image file basics.

Image Specifications & Guidelines

To avoid problems, we recommend spelling out some basic specifications and guidelines for using images on your website and making sure that everyone in your team understands things like:

  • The difference between image size vs image resolution.
  • Different image formats and when to use these.
  • Different image specifications and settings for use in digital content vs print.

Let’s go briefly through each of the above.

Image Size vs Image Resolution

Image size refers to the dimensions of an image and is usually expressed in terms of pixels or points.

Image resolution refers to the number of pixels that can fit inside a specific area of a screen or printed surface and is normally expressed in terms of pixels per inch (ppi) or dots per inch (dpi).

For example, the dimensions of the image below are 680 pixels wide x 400 pixels tall…

Image dimensions.
Image dimensions.

Using an image editing tool like Photoshop, we can see that the resolution of this image is 72 pixels per inch.

Image resolution.
Image resolution.

Most images, photos, screenshots, logos intended for use in web content are only going to be viewed on computer and mobile device screens, which display low-resolution images (72-96 dpi) very well.

Images for printed publications (e.g. magazines, brochures, etc.) need to be output at a much higher resolution (e.g. 300 dpi).

Errors using images occur when confusing image size with image resolution. A large image with a low resolution will not work for print (images will become pixelated) and uploading high-resolution images to your website will increase the size of your server’s database unnecessarily.

Image Format

Common formats used for saving images for use in websites include .jpg, .png, .gif, and newer formats like WebP.

For practical purposes and simplicity’s sake, here’s a good commercial rule of thumb to follow when deciding on which image format to use:

  • Save images like photos as .jpg unless your images need to have a transparent background.
  • Save non-photographic images like logos, graphics, and banners as .png.
  • If your image needs to have a transparent background, save it as a .png and turn on the transparency option.
  • Animated images (e.g. advertising banners) are normally saved as a .gif (or .webp)

You can learn more about different image formats here.

Digital Image Specs

If you plan to upload many images to your Media Library (e.g. product images for a large eCommerce site), then follow the specs below to ensure that your server’s disk space won’t become excessively large and difficult to manage:

  • Image File Size: Aim for image file sizes no larger than around 500 kb.
  • Image Resolution: 72-96 ppi.
  • Image Dimensions: Try keeping your maximum image width to 900 – 1280 pixels. Typically, a width of 600-800 pixels is sufficient for most product images and screenshots.
  • Image Format: .jpg (maximum quality) unless image requires a transparent background. If the image requires a transparent background, then save it as .png with the transparency option turned on.
  • Image Mode: RGB

Print & Display Advertising Image Specs

High-quality printing or display advertising (e.g. magazines) typically require high-resolution images (e.g. 300 dpi) saved in CMYK image mode.

tip

  • If creating images for logos or company artwork, create these as high-resolution images in large sizes (e.g. 5,000 pixels wide), as these images will probably be used in print and make sure to reformat these images for use in digital artwork or web content using the digital image specs given earlier.
  • Always work from larger to smaller dimensions and from higher to lower resolutions. Reducing image sizes and resolutions will retain image quality but not the other way round (i.e. going from smaller to larger image size or resolution will make the image appear blurred or pixelated).
  • When creating images from scratch, set out the dimensions and resolution of your image before you start.

For example, you can set image size and resolution in Photoshop using the Image > Image Size dialog box.

Photoshop - Image Size.
Photoshop – Image Size.

How To Reduce Image File Size

Before making any changes to images that have already been uploaded to your website and are currently being used in your content, do the following:

  1. Back up your website.
  2. Download folders containing images stored on your server to your hard drive. For example, if your images are stored on a server that uses CPanel, use an application like File Manager to compress and download a copy of the image folders to your hard drive, or use an FTP tool.
  3. Extract and make a copy of these image folders. You will edit the images in the copied folders to make sure that nothing happens to the original files.
  4. Create a folder inside your working images folder where you will edit and save images (call the folder something like “reduce these”).
  5. Select all large images above a certain file size (e.g. 500 kb) and copy these to your editing folder.
  6. Work systematically through your files. Open and edit your images in an image editing application like Photoshop.
  7. Save the edited image to the image editing folder containing all resized images.
  8. Again, begin to systematically replace large file-sized images on your website with the smaller file-sized images you have just created.
  9. After replacing all images on your website, review all pages to make sure that all images have been replaced correctly.
  10. Delete the large images from your server. If you followed the above process, you should have a backup copy of the originals.
  11. Go back to your website and check pages and content to make sure that no images are missing in your content.
  12. Your files should now be significantly reduced in size.

If you can’t view image file sizes in your hard drive’s image folder, do the following:

Open the folder in your hard drive that contains your images, then right-click inside the folder and select View > Details.

Select View - Details.
Select View – Details.

You should now be able to see all the image file sizes listed.

List of images displaying image file sizes.
List of images displaying image file sizes.

The next step is to start reducing each image file to a smaller size.

List of images with image size.
Reduce each image file to a smaller size.

Let’s look now at ways to reduce image file sizes.

Save Files As .Jpg

Images saved in .jpg format normally result in smaller file sizes than the same image saved in .png format.

For example, if we save this example image as a .png

Image saved as .png
Image saved as .png

And then save the same image as a .jpg (maximum quality) …

Image saved as .jpg
Image saved as .jpg

You can see that even though they are both the same image, the .png file has a larger file size than the .jpg image.

This .png image is larger than the same image saved as a .jpg
This .png image is larger than the same image saved as a .jpg

Keeping this in mind, here’s something you can do if you have unnecessarily saved lots of image files on your website as .png instead of .jpg.

Convert .png Images To .jpg

Locate and open a large .png file from your working images folder using your image editor (e.g. Photoshop).

Open a large .png file
Open a large .png file

For this example, we have selected an image that is over 3 Mb in size (3,160 kb). If we apply the image specifications from our earlier section to this image, we can see that:

  1. The file doesn’t need to have a transparent background. It can be resaved as a .jpg image.
  2. The image dimensions are much larger than necessary.
We can reduce the file size of this image.
We can reduce the file size of this image.

Let’s save this file as a .jpg image first and see how much we can reduce the image file size.

Save the file as a .jpg
Save the file as a .jpg

By changing the file format from .png to .jpg, we have significantly reduced the image file size (from 3,160 kb to 915 kb).

Same image, different image file sizes.
Same image, different image file sizes.

This reduced image, however, is still almost twice as large as the file size specifications we have set for our images (no larger than 500 kb).

Now we have two options. We can reduce the image file size by:

  • Reducing file size dimensions
  • Reducing image quality

Reduce File Size Dimensions

Let’s repeat the above process, but this time, we’ll reduce file size dimensions before saving the image as a .jpg.

First, select the image and open the ‘Image Size’ dialog box (Image > Image Size in Photoshop).

Photoshop: Image - Image Size
Photoshop: Image > Image Size

Change the image dimensions to reduce the image size and make it fit within your specifications.

Reduce image dimensions.
Reduce image dimensions.

Now resave the image as a .jpg and look at the resulting file size.

The same image has been significantly reduced in size.
The same image has been significantly reduced in size.

We have significantly reduced the file size of this image.

info

Resizing image dimensions in your web pages will not reduce the file size of the original image on your server.

To reduce the file size of images stored on your server, you will need to change the dimensions of the original image, then replace the original image in your server with your newly edited image.

Resizing images on your page does not reduce the image file's size on your server.
Resizing images on your page does not reduce the image file’s size on your server.

Reduce Image Quality

Depending on what you plan to use images for, reducing image quality by a level or two won’t make that much difference to the final result and can help improve the loading performance of your page.

JPEG image quality settings.
JPEG image quality settings.

For example, below is a .jpg image saved using maximum quality image optimization settings (100%).

JPEG settings - Maximum Quality 100%
JPEG settings – Maximum Quality 100%

Here’s the same .jpg image saved using the next level down (Very High).

JPEG settings - Very High Quality 80%
JPEG settings – Very High Quality 80%

Here’s the same .jpg image saved using the next level down (High).

JPEG settings - High Quality 60%
JPEG settings – High Quality 60%

Here’s the same .jpg image saved using the next level down (Medium).

JPEG settings - Medium Quality 30%
JPEG settings – Medium Quality 30%

Here’s the same .jpg image saved using the next level down (Low).

JPEG settings - Low Quality 10%
JPEG settings – Low Quality 10%

Although there’s not that much of a noticeable visible difference in the images, the difference in file sizes can be significant.

Same image, different JPEG quality settings.
Same image, different JPEG quality settings.

In addition to the above, you can also use the methods below to reduce the image file size.

Crop Unnecessary Image Areas

If there are any excess areas around an image that are not required or essential, consider cropping the image to reduce image file size.

Crop excess areas around images to reduce file size.
Crop excess areas around images to reduce file size.

Check Image Resolution

Check to see if any large images uploaded to your website have been saved using a high image resolution and change the settings to reduce image file size.

Images for use in web content don't need to have high resolutions like images for use in print.
Images for use in web content don’t need to have high resolutions like images for use in print.

As you can see, using some or all of the above methods can significantly reduce the file size of your stored images.

Reducing image file sizes can improve your website's page loading speed significantly.
Reducing image file sizes can improve your website’s page loading speed significantly.

Reduce Image Bloat And Reclaim Server Storage Space

When you upload images to your site via the Media Library, WordPress automatically creates new versions of these images in different sizes by default (e.g. Thumbnail, Medium, Large, and Full Size).

WordPress Media Library - Image Sizes
By default, WordPress creates several image sizes for every image uploaded to your Media Library.

This adds more image files to your server. Over time, these accumulated image files can take up valuable storage space on your server.

File Manager listing image folder on server.
All these files were created from one uploaded image and placed on your server.

Unless you need to have different-sized files for every uploaded image stored on your server, it’s better to delete these unused files or upload only one version of the image to your server.

tip

To prevent WordPress from creating different versions of every uploaded image, do the following:

Go to your Media Settings (Dashboard Menu > Media > Settings)

Media Settings screen.
Media Settings screen.

Change all the values in the Image Sizes section to “0” (zero) and save your changes.

Media Settings screen - Change all image sizes to zero.
Change all image sizes to zero.

Now, when you upload images to WordPress via the Media Library, only the original uploaded version of the image will be added to your server.

Note: Make sure you upload the correct-sized image you plan to use in your content.

Add media screen - Image size.
Only the original image file will be uploaded to your server.

If you check the image folder on your server, you will see that only the uploaded image was added…no other versions!

File Manager - Images folder.
Only the original image was uploaded to your server after changing your Media settings.

Image & Media Library Optimization Plugins

Whether you choose to store different-sized images on your server or clean up any unused media files, plugins can help.

So, in addition to the methods described above to reduce image file sizes, if you plan to upload loads of images to your site using the WordPress media library, we recommend looking at image optimization and media cleanup plugins like the ones below.

WP Smush

Smush Image Compression and Optimization plugin for WordPress.
WP Smush Image Compression and Optimization plugin for WordPress.

WP Smush scans images that you upload (or have already added) to your site and automatically resizes, optimizes, and compresses these, removing unnecessary data before adding it to your media library.

This plugin strips hidden bulky information from your images and reduces file size without losing image quality.

WP Smush automatically optimizes images uploaded to WordPress.
WP Smush automatically optimizes images uploaded to WordPress.

For more information about this plugin, go here: Smush

Media Cleaner

Media Cleaner.
Media Cleaner – Clean & Optimize Space.

Media Cleaner cleans your WordPress Media Library of all unused or broken media entries and files that aren’t being used in your website. you can also restrict the scan to images only.

Media Cleaner analyzes and detects any files not being used on your site and places them into the plugin’s internal trash. After testing to make sure that the plugin has not marked any files for deletion that you want to keep, you can restore the files from the trash, or permanently delete them.

Media Cleaner
Use Media Cleaner to delete any unused images from your server.

Note: Make sure you have a full backup of your site before using this plugin.

For more information about this plugin, go here: Media Cleaner

Additional Resources – Media File Conversion Tools

There are several online tools you can use to convert media files from one format to another (e.g., convert a .png file into a .jpg, or a .gif image into a .mp4 or .webm file).

Here are a couple of free online tools you can check out:

CloudConvert.com

CloudConvert.com
CloudConvert.com

CloudConvert is a free online file converter. It supports +200 file formats and provides high-quality file conversions. Use this tool to convert images, videos, audios, documents, etc. from one format into another.

Go here to access this tool: CloudConvert

GifGifs.com

GifGifs.com
GifGifs.com

GifGifs.com is a great free online tool that lets you edit .gif images in many ways, such as resizing, cropping, rotating, adding text to images, etc.

Go here to access this tool: GifGifs.com

Congratulations! Now you know how to reduce image file sizes to help improve your page loading speed.

File Manager listing images uploaded to server.
Reduce large images and save images in the right format to improve your site’s performance.

For more information on using images in WordPress, see these tutorials:

***

Print Friendly, PDF & Email

Terms Of Use | Privacy Policy

Scroll to Top