How to Upload Large Images in WordPress

We all like beautiful pictures. Photographers especially do, along with artists and other creative folks.

As broadband spreads to more places, with bandwidth limits rising and download speeds increasing, we are seeing more sites with huge images on their homepage and throughout the site. Not so long ago, webmasters didn’t load many high-resolution images. Perhaps none at all. Because they were concerned with page loading speed—and rightly so because slow sites find that a lot of would-be visitors click away because the site is sluggish.

One solution in the past has been to use image galleries and tiny thumbnail images so the visitor can decide to view the image in all its high-res glory if they want to. It was a user’s choice.

This is still a good solution, but there are other answers as well, and we will be exploring those in this article. By using the solutions on this page, it’s now possible to provide large images in WordPress with a good image quality, without sacrificing speed.

Read on to find out how to upload large images in WordPress…

THE GOAL

With the speed of online life (and life in general) getting faster all the time, people now expect your site to load quickly.

So does Google, although it’s one of many factors that impact on your site’s rankings. As a business, Google wants to offer its search clients the best user experience (UX, for short) so anything that detracts from that can cause a site to be penalized. Conversely, anything you can do to enhance the UX can only help you get on better with Google.

“BUT CAN’T I HAVE SPEED AND LARGE IMAGES?”

You’ll always be balancing two opposed concepts. Image quality and file size. It’s great having brilliant looking images but not so great if they take “forever” to fully load, and your visitors disappear before they’ve seen your glorious pictures.

If you are a photographer or highly concerned about image quality on the viewer’s screen, it’s worth remembering that most people won’t see the slight quality degradation that you’re aware of. They just won’t notice it. Even if you pointed it out, many folks would hardly detect any difference between a medium quality image and the top quality high-res version.

And there’s another factor too. You do your high-res work on a big screen, but many folks are viewing your site on a tablet or some other small screen.

So it’s okay to relax your standards a little. Most people will never know.

“WHAT’S JPG? AND WHY DOES IT MATTER?”

For our less tech-aware readers (and that’s most of us, right?), we recommend saving photographs and images in the JPEG format. That is short for Joint Photographic Experts Group and is often abbreviated to JPG.

It’s what is called a “lossy compression” technique, and it is designed to reduce (compress) the filesize of colored and grayscale images without significantly affecting the visual quality of the image. How does it do that? By discarding some digital data that the human eye doesn’t detect.

“DOES FILE SIZE JUST MEAN THE DIMENSIONS OF THE PICTURE, LIKE 300 PIXELS WIDE?”

Actually, no.

The term “file dimensions” refers to the image’s width and height, measured in pixels (px for short). You can see the dimensions (sometimes called the physical size) of any image by hovering over it in your Windows Explorer or Mac Finder, or maybe you need to select Properties from the right-click menu.

The goal of our optimizing efforts is to make the image’s width no greater than the width of the page or column it will be displayed in.

“File size” is different. You could think of it as the weight of the file. It’s measured in KB or MB, that is, kilobytes or megabytes. It’s the size of the digital file (not the physical size of the image) that causes slow loading.

“SO HOW DO I REDUCE THE FILE SIZE OF MY IMAGES?”

Let’s start with the easy ways because that’s what most of us will be using.

FIRST, THE EASY SOLUTIONS

hese simple solutions come in two popular flavors:

• What you can do BEFORE you upload your graphics, and
• What you can do WHILE you upload and deploy them.

There’s an important principle to bear in mind when working with images for your blog. If the pictures you upload are bigger than they need to be, then WordPress is going to squash them down to size. This takes time (okay, not much but sometimes milliseconds count) and it will affect page loading speed, so it’s best to avoid that.

…which you can do by changing the maximum width of your large images to be the same as the width of the column in your blog where they will be displayed. You do this in two steps:

1. In your wp-admin dashboard, click on Media.
2. Choose “large” (not “full size”) whenever you insert images into your pages or posts.

EASY METHOD 1: OPTIMIZE IMAGES BEFORE UPLOADING

If you own Photoshop or Lightroom, there is a “Save for Web” option. Using that, you can choose between several levels of quality and see how the image looks and how long it will take to download. Personally, I don’t use either of these software apps, but I understand this is what they can do for you.

Fortunately, image optimization can be achieved in many ways. If you create your images using Canvas or PicMonkey, they optimize your images for you, but if you don’t, you’ll need other solutions. Here are two that are free.

ImageOptimizer.net offers an online service, or you can download their software and run it on your machine. You can resize, compress and optimize your graphics one at a time, or if you want to process multiple images in a bulk operation, you can install the software on your computer.

JPEGmini.com will shrink your file size by up to 80% while retaining the visual quality. You download and install this one.

Using either of these tools, your images are optimized before you add them to your site. The alternative is to…

Easy method 2: Optimize images while you upload and deploy them

Here are three free WordPress plugins. Pick one and add it to your blog—it will take care of the whole process for you.

• TinyPNG
• EWWW Image Optimizer
• WP Smush

AND NOW, WHAT YOU’VE ALL BEEN WAITING FOR… THE TECHIE SOLUTIONS

 

“HOW DO I INCREASE MY BLOG’S FILESIZE UPLOAD LIMIT?”

Most web hosting companies have placed a limit on the size of any file you can upload to their servers. This prevents a few users from hogging the upload capacity with their giant sized images or audios or video files. This policy is designed to keep most of their customers happy most of the time.

However, that limit could cause you a problem. So what can you do about it?

TECHIE METHOD 1: EDIT THE PHP CONFIGURATION FILE

The typical file size limit is 2MB which is way too small for large images or high-res photos, but you can’t adjust that from within WordPress itself. You have to edit the php.ini file. That’s the PHP configuration file, and it controls a whole bunch of server variables including limits on file size.

You can adjust it yourself if you are careful. Here’s how. I’m using FTP, but you can use CPanel if you’d prefer—the key actions are the same. Open FileZilla, and download the php.ini file from your site’s root directory.

Look for these three settings and change the numbers as follows to allow for 64MB uploads:

upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300

But it may be difficult to find the php.ini file. According to documentation.cpanel.net it can be located in several different places, depending on which version of the operating system your web host is running. So let’s opt for an easier solution, and that is to create your php.ini file.

It’s easy enough to do. Just open a new .txt file, paste in the same three lines of code, save it as php.ini, then upload it to the root folder:

If this doesn’t work, try changing 64M to a smaller number such as 10M.

TECHIE METHOD 2: EDIT THE HYPERTEXT ACCESS FILE

 

Using your FTP, download the Hypertext Access file (.htaccess)from the root directory. Can’t see it? In your FTP client, in the Server sub-menu, there’s an option to display hidden files.

Add this code to your .htaccess file, then upload the edited file and your problem should be solved:

php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

If that doesn’t work, or if fiddling with code looks worrying to you, it’s time to contact your web host and ask them to increase the file upload limit. Or go back up the page to the Easy Department.