How To Serve WordPress Images Subdomain On Nginx

There are many ways to optimize WordPress loading time. Use subdomain for host image on WordPress is important in many ways. We can use the cookieless domain, apart from that web browser can speed-up content downloading time.

In this post, I’m going to guide how to set-up a Subdomain on Nginx server and move WordPress media folder to subdomain. Website loading time is a key factor in ranking, apart from that fastest site can gain more revenue. So everyone love speed. If you use Cloudflare for optimizing your site, by creating a subdomain for hosting you can further speed up the site.

One of the key factors in WordPress speed optimization uses a content delivery network (also known as CDN), optimize images, HTML, minify HTML, JavaScript and CSS. If you already followed my Nginx, PageSpeed_Mod, Brotil installation guide you already have a well-optimized site.

wordpress logo
WordPress logo

This Host WordPress Images Subdomain Tutorial has 3 steps.

 

Configure CNAME and A and/or AAA Records for the subdomain.

First, we have to create a CNAME and A and/or AAA records for the Subdomain. If your server supports only IPv4 address no need to setup AAA name. But if your server supports only IPv4 but uses Cloudflare you can use IPv6.

  • Go to your DNS provider and add subdomain in this way.

A                   img       123.456.789.10                       # Server IPv4
AAA             img      2001:0db8:85a3:0000:        # Server IPv6 (Optional, better if you added)
CNAME      *.img    img.example.com

Below you can see how I set up my DNS server on Cloudflare.

Cloudflare subdomain
Create subdomain Cloudflare

It will take a few minutes to propagate DNS globally.

 

 

How to Setup a Subdomain on Nginx.

  • Let’s create a new subdomain virtual host on “sites-available” directory.

  • Then configure the Nginx virtual host or server blocks for the subdomain. Type the following command in SSH.

sudo nano img.example.com

  • Then add the following type configuration in there. You can add your own configurations such as jpeg, png, webp images expire time, extra security settings.

server {
#If you enabled HTTPS, add HTTPS port here. If you don’t have, no need to add here.
listen 443 ssl http2;                #For IPv4 users.
listen [::]:443 ssl http2;        #For IPv6 users.

# Use subdomain name as the server_name.
server_name img.example.com;

#Your subdomain SSL Configurations here. If you don’t have, no need to add.
ssl_stapling on;
ssl_stapling_verify on;
ssl_certificate /ssl_certificate_path/img.example.com/fullchain.pem;
ssl_certificate_key /ssl_certificate_path/img.example.com/privkey.pem;
ssl_trusted_certificate /ssl_certificate_path/img.digitalreborn.com/chain.pem;

# Root directory
root /var/www/example.com/public_html/wp-content/uploads/;       #your WordPress media folder full path here.

# Other custom configs here. Better add cache time.

location ~* \.(jpg|jpeg|png|gif|ico|css|js|webp)$ {
expires 365d;
}

}

  • Then we have to create a  virtual host file system link from “sites-available”  to “sites-enabled” directory. You can use the following command line for that. Replace example.com with your domain.

  • Then test and reload the Nginx configuration by running the command line.

If you get the following type of response, you are good to go.

Nginx reload
Nginx, reload command.

 

 

 

Configure WordPress database via PhpMyAdmin to use the new domain.

  • Go to your PhpMyAdmin.
  • On the left side, select the database of your website and expand it by click on “+” icon.
  • Search for “options” table.  By Default its “wp_options, If you renamed WordPress database prefix, you can’t see it like that. For better security its better rename it.
PhpMyAdmin Database list
View PhpMyAdmin Options table
  • On the right side “Number of rows:” select “500” and “Filter rows: ” type “upload”. Change it as follows.
    • upload_path   – Use it as default media folder, that’s “wp-content/uploads”.
    • upload_url_path – Type your new image host subdomain.
  • Then hit the “Enter” key to save the changes.
Search Upload directory and URL
Search WP Upload directory and URL
  • Now you just updated the image upload directory and URL.

 

 

 

Replace old posts images domain to the new domain.

Now everything completed. We have to change the old posts images URL to the new domain. You can do it via PhpMyAdmin or by using a free WordPress plugin called Better Search Replace. Plugin based method easier and simple.

  • Before the change, the “Database” create a backup, you can follow my WordPress backup tutorial.
  • Go to “Plugins>Add New”.
  • Search for “Better Search Replace” and install and activate it.
  • After the installation, go to “Tools>Better Search Replace”.
  • In plugin page add following things.
    • Search for – Your WordPress media directory path. Eg: https://www.digitalreborn.com/wp-content/uploads/
    • Replace with – Type your new subdomain. Eg: https://img.digitalreborn.com/
    • Select tables – Choose all the tables, because we need to replace everything.
  • Uncheck “Dry Run” and click on “Run Search/Replace” button. Dry Run will not change anything.

Better search and replace plugin

 

  • Clear your all type of cache on your site, including CDN.

 

Now everything completed and your WordPress site host image on a subdomain.