How To Reduce Image File Size In Your WordPress Database

Learn how to reduce the file size of your images to prevent WordPress database issues and improve your site’s performance.

Get Thrive Leads for WordPress

How To Reduce Image File Size In Your WordPress Database

How To Reduce Image File Size In Your WordPress DatabaseSome applications (e.g. WooCommerce) require images to be uploaded to the WordPress Media Library and stored in your WordPress database.

If you run an e-commerce site using an application like WooCommerce, for example, your site may have to store hundreds or even thousands of product images.

Uploading large product images can make your website’s database become excessively large, which can lead to problems with data and file back-ups, slow down your website’s performance, and cause other issues.

In this tutorial, we’ll show you ways to reduce the size of your image files and improve WordPress database performance.

Using Large Images On Your Website

If you plan to use large image files on your website, we recommend not uploading and storing these in your WordPress database, but using a cloud storage service like Amazon S3, Dropbox, etc. instead and adding the image via the Add Media ‘Insert from URL’ tool …

Use an external storage service for adding large images to WordPress!

(Use an external storage service for adding large images to WordPress!)

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

Depending on the applications you have installed on your website, you may have no other option but to upload and store images in your Media Library and WordPress database.

In this case, you have to make sure that you are not uploading images that are way larger than necessary …

These images are way too large!

(These images are way too large!)

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 whether to store media uploads into month and year-based folders or not …

Media Settings

(Media Settings)

Once media files are added to the Media Library, they are then uploaded to your server and stored in your wp-content > uploads folder, which you can access using applications like FTP or via your cPanel’s File Manager

Media files like images are stored in your server

(Media files like images are stored in your server)

And all of this data is stored inside your WordPress database …

WordPress stores all of your website data in a database

(WordPress stores all website data in a database)

Uploading loads of large images (and other media types) to your Media Library, then, will cause your website’s database to also swell up in size …

Storing large media files in your server can cause loads of problems!

(Storing large media files in your server can cause loads of problems!)

Storing large media files in your server and WordPress database can slow down your website’s performance and lead to problems like backing up files, loading web pages, etc.

Important Info

To avoid problems, large media files should be uploaded to the Amazon S3 account or an external service like YouTube (videos) and links to these files then embedded into web content using the WordPress Add Media tool.

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

Image Specifications & Guidelines

You can avoid problems by setting out specifications and guidelines for using images in your website for your organization.

These include:

  • Understanding image size vs image resolution.
  • Understanding different image formats and when to use these.
  • Specifications for digital and print images and understanding the difference between these.

Let’s briefly go 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) 

Images for printed publications (e.g. magazines, brochures, etc.) need to be high resolution (e.g. 300 dpi), but most computer screens work really well with low resolution images (72-96 dpi). This includes images like photos, screenshots, logos, etc.

Errors using images occur when confusing image size with image resolution. You can have a very large image with a low resolution (which will not work for print – images will become pixelated), or upload high-resolution images to your website, which will significantly and unnecessarily increase the size of your server’s database.

Image Format

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

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

  • Save most images as .jpg unless your images need to have a transparent background.
  • If you want your image to have a transparent background, save it as a .png.
  • Animated images (e.g. advertising banners) are normally saved as a .gif.

You can learn more about different image formats here.

Digital Image Specs

If working with a large number of images that must be uploaded to your Media Library and stored in your WordPress database (e.g. product images in WooCommerce), then following the specs below will ensure that your database 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 many product images and screenshots.
  • Image Format: .jpg (maximum quality), unless image requires a transparent background. If image requires a transparent background, then save as .png with transparency 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.

Useful 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, but make sure to reformat these to digital image specs when using these in digital artwork or uploading to your website.
  • 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 (going from smaller to larger size or resolution will make image appear blurred or pixelated).
  • When creating images from scratch, set the dimensions and resolution before you start.

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:

  • Back up your website.
  • Download folders containing images to your hard drive. If working in Cpanel File Manager, compress and download a copy of the image folders to your hard drive.
  • Extract and make a copy of these image folders. We’ll edit images in these copied folders to make sure that nothing happens to the original files.
  • Create a folder inside your working images folder where you will edit and save images to (call the folder something like “reduce these”).
  • Select all large images above a certain file size (e.g. 500 kb) and copy these to your working folder.
  • Begin systematically opening and editing these images in an image editing application like Photoshop.
  • Save the edited image in your image editing folder.
  • Replace large file-sized images on your website with the smaller file-sized images you have just created.
  • After replacing all images on your website, review all pages to make sure that all images have been replaced correctly.
  • Delete large images from your server.
  • Go back to your website and check pages and content to make sure that no images are missing in your content.
  • Your files and database should now be significantly reduced in size.

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

Open up the folder in your hard drive containing your images, then right-click in your folder and select View > Details

Select View > Details

(Select View > Details)

Now you can see all 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 to a smaller file size …

Convert .png images to .jpg to reduce file size

(Reduce each file to a smaller size)

Let’s take a 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 our 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 the .png file has a larger file size than the .jpg image…

The .png image is larger than the same image saved a .jpg

(The .png image is larger than the same image saved 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 larger than necessary.

We can reduce this image file size

(We can reduce this image file size)

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

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 900 kb) …

Same image, different file image sizes

(Same image, different file image 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 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) …

Image > Image Size

(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 …

Same image has been significantly reduced in size

(Same image has been significantly reduced in size)

We have reduced the image file size significantly.

Useful Info

Resizing image dimensions in your web pages will not reduce the file size of the original image in your server. To reduce image file size, change the dimensions of the original image, then replace the original image in your server with your edited image …

Resizing images on your page does not reduce image file size

(Resizing images on your page does not reduce image file size)

Reduce Image Quality

Depending on what you plan to use your images for, reducing image quality by a level or two won’t make that much difference to the final result …

.jpg Image Quality Settings

(JPEG Image Quality Settings)

For example, here 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 – High Quality 60%)

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 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 image size file:

Crop Unnecessary Image Areas

If the are 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 very high resolutions

(Images for use in web content don’t need very high resolutions)

Using some or all of the above methods can significantly reduce the file size of your stored images …

Image file sizes can be significantly reduced to improve your website

(Image file sizes can be significantly reduced to improve your website)

Image Compression Plugins

In addition to using the methods described above to reduce image file size, if you have loads of images uploaded to your WordPress media library, we also recommend looking at image compression and optimization plugins.

WP Smush

Smush Image Compression and Optimization Plugin

(WP Smush Image Compression and Optimization Plugin)

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 or to download the plugin, go here: Smush

We hope that you have found this information on resizing image file sizes useful. For more help on using images in WordPress, see the tutorials below:

How To Reduce Image File Size In Your WordPress Database

***

"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com

Disclaimer: We have no association with WordPress, Automattic, or any WordPress products discussed on this site. We may receive an affiliate commission from sales of services and products mentioned on our website. All images and information sourced from product websites remain the copyright of their respective owners, comply with all license terms and agreements of use to the best of our knowledge and are being used solely for illustrative or training purposes.

***

Did you enjoy this post? Please feel free to share this post with others who could benefit from learning about WordPress using the social buttons below.

WordPress Installation Files: A Glossary For Non-Techies

Need to know what WordPress installation folders and files in your server are used for? Here is a glossary of WordPress installation files for non-techies …

WordPress Installation Files: A Glossary For Non-TechiesWhen WordPress is installed on your domain, either by performing a manual WordPress installation or using a WordPress installation script like Softaculous or Fantastico, a number of folders and files get added to your server’s root directory.

Although these folders and files are mostly accessed by technical users like website developers, it’s good to know what these folders and files are used for, especially if you plan to build or manage your own WordPress site.

WordPress installation files

(WordPress installation files)

You can view these folders and files using an FTP application or cPanel’s File Manager. For help with this, see the tutorial below:

Knowing what WordPress installation folders and files do is also important for areas like:

WordPress Installation Files: A Glossary For Non-Techies

Your WordPress site is made up of your WordPress installation files and your WordPress database. These are responsible for creating, storing, and managing all of your site’s information, web pages, etc.

Below is a glossary of WordPress installation files for non-techies. The glossary includes non-technical explanations and descriptions with links to related tutorials.

If you need more technical information about the folders or files below, please refer to the official WordPress documentation here:

wp-admin

This folder contains all of the files that control your WordPress site’s installation, administration, and management functions …

WordPress wp-admin folder

(WordPress wp-admin folder)

wp-content

This folder holds all of the content supplied by users (e.g. images uploaded to the WordPress Media Library) and stores all of the WordPress Themes and WordPress Plugins installed on your site …

WordPress wp-content folder

(WordPress wp-content folder)

This folder is also used for things like:

wp-includes

This folder contains most of the technical files and instructions required for supporting WordPress functionality …

WordPress wp-includes folder

(WordPress wp-includes folder)

.htaccess

An .htaccess file is a configuration file used on web servers running the Apache Web Server software. It contains important server instructions …

WordPress .htaccess file

(WordPress .htaccess file)

The .htaccess file is used to enable/disable functionality, such as:

  • Enabling password protection on a directory
  • Enabling content protection
  • Denying visitors access to the website
  • Redirecting visitors to another page or a custom error or 404 page
  • Preventing images on your site from being hotlinked
  • Etc.

If you experience WordPress errors, it may be because your .htaccess file has become corrupted. If this happens, see this tutorial:

index.php

This is the core WordPress index file that instructs your WordPress theme and blog to load.

This file looks to see if you have set a home page in WordPress and displays that page to your visitors. If not, it displays a default blog page.

Basically, what the index.php file does, is show visitors a page like this when they visit your site …

This is what visitors see thanks to index.php

(This is what visitors see thanks to index.php)

Instead of a directory of internal files like this …

This is what visitors see if index.php file is removed

(This is what visitors see if index.php file is removed)

license.txt

This file contains the WordPress GPL license which states that WordPress is free software and can be redistributed and/or modified under the terms of the GNU General Public License.

readme.html

This file contains useful pre-installation information about WordPress …

WordPress ReadMe file

(WordPress ReadMe file)

wp-activate.php

This file confirms that the activation key sent in an email after a user signs up for a new site matches the key for that user and then displays confirmation.

wp-blog-header.php

This file decides what to display based on the parameters that are passed to the blog from any page that wants to display WordPress content and loads the WordPress environment and template.

wp-comments-post.php

This file receives posted comments and adds them to the WordPress database. It also prevents duplicate comment posting.

wp-config-sample.php

This is a sample of the wp-config.php file used to connect WordPress to your MySQL database. You can use this sample file to manually create the wp-config.php file (see below).

wp-config.php

The wp-config.php file is one of your most important WordPress installation files. The wp-config.php file is located in the root of your WordPress file directory and contains your website’s base configuration details, such as your database connection information (e.g. Database Name,  Database Username, Database Password, Database Host, etc.)

Here is some useful information about wp-config.php file:

  • The wp-config.php file isn’t included in the WordPress download files. It is created during the WordPress setup process based either on the information you provide during the manual installation process, or automatically, if you use a WordPress installation script (e.g. Softaculous, Fantastico, etc.)
  • A wp-config.php file can be created manually by editing the sample file (“wp-config-sample.php”), resaving it as wp-config.php and uploading this file to the root install directory.
  • The content of the wp-config.php file follow a specific order. Rearranging the order of this content may create errors on your website.
  • Editing WordPress files like wp-config.php should always be done using a plain text editor. Never use a word processor like Microsoft Word or Google Docs to edit WordPress files.

Many important modifications to WordPress can be done manually by adding lines of code to the wp-config.php file. Some of the features and functionality affected by the wp-config.php file, for example, include:

  • Adding WordPress Security Keys
  • WordPress Autosave And Post Revision (including changing the Autosave interval and disabling Post revisions)
  • Increasing PHP Memory Limit
  • Defining the ‘home’ URL of your WordPress site (i.e. the URL people type in to visit your site).
  • Moving folders (e.g. content, plugins, themes, uploads folder, etc.) to directories in your server other than their default location.
  • Enabling WordPress Multisite
  • Using WordPress In Other Languages
  • Disabling plugin and theme installation, updates, and edits
  • Disabling WordPress automatic and core updates
  • Blocking external URL requests
  • Forcing Admins and Logins to use SSL
  • Overriding default WordPress File Permissions
  • Changing WordPress Cron settings
  • Emptying the trash
  • Debugging WordPress (troubleshooting errors and making repairs)
  • Allowing WordPress users to optimize and repair the WordPress database
  • And so much more …

wp-cron.php

A CRON job is essentially an automated scheduled task. It’s like someone programming a robot to do XYZ at a specific time. If someone asks the robot “is it time to do XYZ yet?” the robot can then either say “no, it’s not time yet” or “yes, it’s time” and then automatically perform the task.

By default, WordPress calls up wp-cron.php whenever someone visits your WordPress site and a scheduled task is present. Also, web hosts normally offer CRON. The wp-cron.php file provides a CRON function for hosts that do not offer CRON or where a CRON job has not been set up by software installed on your site.

The wp-cron.php file is used to perform virtual cron jobs (i.e. scheduled tasks) to automate things like publish scheduled posts, check for plugin or theme updates, send email notifications, etc.

wp-links-opml.php

This file converts links added to your site via the WordPress admin menu into a format called OPML (Outline Processor Markup Language).

OPML allows outlines and lists to be exchanged between different platforms, such as exchanging lists of RSS feeds between different feed aggregators.

Essentially, this file allows links to be exported from one WordPress site to another.

wp-load.php

In computing terms, bootstrapping is a technique for loading a program by means of a few initial instructions which then enable the rest of the program to be loaded from somewhere else.

The wp-load.php file is a bootstrap file that loads the wp-config.php file. The wp-config.php file then loads the wp-settings.php file, which then sets up the WordPress environment.

wp-login.php

This is the file that handles the WordPress login page for registered users, including user authentication, user registration, and resetting passwords.

wp-mail.php

WordPress uses this file to obtain blog posts submitted via email. The URL of this file is usually added to a CRON job so that it is regularly retrieved, enabling new email posts to be accepted.

wp-settings.php

This file performs various pre-execution routines and procedures, including checking for correct installation, including auxiliary functions, applying user plugins, initializing execution timers, etc.

wp-signup.php

WordPress uses this file to set up the area where users can sign up to your website or blog.

wp-trackback.php

This file handles incoming trackback requests to WordPress.

xmlrpc.php

This file provides XML-RPC protocol support for WordPress. This allows you to do things like post content to your site using programs and applications other than the built-in web-based administrative interface and for WordPress developers to extend WordPress functionality using plugins.

Additional Files

The additional files below aren’t part of the default WordPress installation but may be found in your server’s WordPress directory:

php.ini

A php.ini file is the default file for configuring and running applications that require PHP. The server looks for this file when PHP starts up for instructions on how to control variables such as upload sizes, file timeouts, and resource limits.

***

We hope that you have found the above information useful.

WordPress Installation Files: A Glossary For Non-Techies

***

"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org

Disclaimer: We have no association with WordPress or any of the products discussed on this website. We may receive an affiliate commission of financial benefit from purchases of products advertised on this website. All images remain the copyright of their respective owners and have been used solely for training and illustrative purposes.

***

Did you find this article useful? If so, please share this article with anyone thinking of starting their own business online using the links below.

WP Total Audit – Find And Fix Common WordPress Errors

Find and fix common WordPress errors with WP Total Audit.

WP Total Audit – Find And Fix Common WordPress Errors

WP Total Audit - Find And Fix Common WordPress ErrorsIn this post, we look at a WordPress security plugin that can help you find and fix common WordPress installation faults.

For additional information on keeping WordPress secure and troubleshooting common WordPress errors, see the following sections:

WP Total Audit

WP Total Audit - Find & fix common errors in WordPress

(WP Total Audit – Find & fix common WordPress errors)

After logging into thousands of WordPress sites while providing help or support for customers, the expert WordPress developers of WP Total Audit noticed the same installation or configuration mistakes being made over and over again, leaving the sites vulnerable to security attacks, plugin conflicts, etc.

Fortunately, these common mistakes are easy to fix and the WP Total Audit plugin provides ‘one-click’ fixes to from your dashboard. Whether you are a WordPress newbie or you have been using WordPress for years, WP Total Audit is a useful and inexpensive plugin that will automatically scan your site for security and performance loopholes and instantly alert you about any issues that need fixing …

WP Total Audit - Find & fix 17 hidden WordPress dangers in seconds!

(WP Total Audit – Find & fix 17 hidden WordPress dangers in seconds!)

WP Total Audit can be used in brand new or established WordPress sites and can be installed alongside other WordPress security plugins for hardened security.

Here are just some testimonials from WP Total Audit users:

”Got it, fixed a major flaw in my Wp_config. great plugin for such a low price!” Johan Puttemans

“I have a $250 plugin securing my site. This $9 plugin found errors and fixed them in a few seconds. Great.” Stig Solberg

This inexpensive plugin installs in seconds, can be used on all your WordPress sites, offers a 30-day money back guarantee and lifetime updates and support.

Go here to learn more: WP Total Audit

***

"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie

Disclaimer: WordPress and its related trademarks are registered trademarks of Automattic, Inc. This site and the services and products offered on this site are not associated, affiliated, sponsored, or endorsed by WordPress, nor have they been tested, certified, or reviewed by WordPress. The owner, contributors and/or advertisers may derive financial benefit from sales of items linked to, advertised, or reviewed on this site.

***

Was this tutorial useful? If so, please take a moment to use the social links below to share this page with other WordPress users.