How to limit the file size of media uploaded to your WordPress website

It is episode 6 of the AskHighrise series and in this episode, I look at how you can help reduce the disk space used by uploaded media on your WordPress site by limiting the size of that media.

We were recently asked to investigate a problem with a client website as they had used up all their web hosting disk space and couldn’t work out why. Once we logged in a took a look at things, we noticed that they had some rather large images being stored on the server. The solution was a simple plugin called Imsanity.

  • AskHighrise episode 6

Transcript

Good morning and welcome to episode number six of our series of videos called AskHighirse where you can ask Highrise Digital any questions you like about WordPress the web industry in general or running a business etc. and we will try our best to answer them and hopefully help people out.

So in this sixth episode we’re going to be looking at image sizes and image sizes in terms of web hosting and running out of disk space.

One of our clients had this issue where they had a web hosting package with a host and it was a pretty good one, it had a reasonable size of space, I think it was 10 gigabytes, but they were contacted by the host indicating that they’d pretty much run out of space and were puzzled by this and as to how they could have run out of space.

So, they asked us to investigate and that’s exactly what we did. I want to share with you what we found and how you can avoid the same sorts of things happening to you.

Our investigation looked at the uploads folder in WordPress, that’s when you go to the media library and you upload any media, that’s where the files that your upload get placed and when we looked in there it was quite clear what the problem was.

There were images, some anywhere between 12 and 20 megabytes in size and so immediately that’s led to a problem because we just don’t need images that are that large on the web. If you’re a photographer and you want to be printing things then absolutely we need those sizes but not on the web.

On the web, generally screen sizes are lower. If someone has a 27-inch screen maybe you know it’s gonna be, what, 3,000 pixels wide and that’s if they’re viewing it at the full screen width it actually is so we don’t need images that large.

What was happening I suspect is that the client was out taking pictures on the camera or a smartphone and rather than resizing the images before they upload them they were just taking that image and uploading it straight into WordPress.

What WordPress does is it keeps the original picture that you uploaded but it also generates lots of all the sizes of that image and it does that for a few reasons. One that comes to mind, that was introduced relatively recently which allows your browser to pick which image is the best one for the connection that it’s on and for the the screen size that you’re on etc., so it needs the different sizes to be able to give the browser a selection. Also you put images in different places in your theme and themes need different image sizes to make sure that they’re optimised so when you upload an image to WordPress it creates and the original size that you uploaded, which in this case was anything between 12 and 20 megabytes, it creates what’s called a large size which I think it by default a thousand pixels wide, it creates a medium large size which is about 700 and something, it creates a medium image at 300 and then a thumbnail which is a smaller version at 150 pixels in width.

So all those get created each time you upload an image. All those are fine as they’re all relatively small because they’re small pixel sizes but the original images were just huge on this one I think there was something like seven to eight thousand pixels coming straight off the camera and and depending on the detail in the image was depending on the size. We just don’t need those images on the web.

So obviously the solution here is to resize your images before you upload them to WordPress, but that can be a bit of a pain and something that you forget to do etc.

Therefore what we looked at is a solution that allowed the client just to upload the same images but it solved this problem of having images that were too large and the solution was a plugin called Insanity which is freely available on the wordpress.org plugin repository.It solves this problem, so let’s take a look at that plugin now.

Hi there. So I’ve got a test install of WordPress here on my on my local machine I’m gonna have a look at is this plugin called Imsanity that allows you to restrict the size of uploaded images and save yourself a bit of web hosting space.

I’m in the plugins menu and I’m going to click on the add new button to add a new plugin which would take me to the list of plugins on wordpress.org I can choose from. I’m just going to search for Imsanity and here is as you can see it’s got lots of installs and lots of good reviews which is always a good thing. I’m just going to click the Install.

That downloads it from wordpress.org and puts it into my plugins folder on my website in this case on my my laptop and once it’s done that I’m gonna activate the plugin which says to make it work in WordPress essentially let get it loaded in and make it make it active

Once that’s done I’m gonna click this link that says the Settings plugin here or you can go to settings and Imsanity, both links go to the same place I believe. We’ve got some options as to what we allow here so the first setting is the images uploaded within a post page or a post. If I’m editing a page or I’m editing the post and I click Add media or I’m in the new block editor and I add add a piece of media in there then what’s the maximum width or maximum height that you want to allow those images to be so I tend to leave that was at 2048 2048 pixels. It’s a good width, fits most themes, most screen sizes don’t go to bigger than that and it kind of works quite well. As it says here you can enter 0 to disable that particular options so if I set 0 as a max height it means it wouldn’t restrict the image by the height but it would restrict it by width

Then you’ve got the option about images which are uploaded directly in the media library so if I’m not editing a post or a page and I just go into media and Add New again what’s the restriction that you want in there and the same options apply and then the final option in terms of the sizes here is images that are uploaded anywhere else so you might be in your customizer, you might be in like a widget area you might be in a theme settings page. Anything like that again what’s the width and height restrictions that you want in those particular places and as I said I tend to leave them all in the same unless there’s a specific reason why I need a larger one or smaller one in that particular location.

The next option is the image/jpeg quality so this plugin can reduce the quality slightly of your uploaded images which means that there take up less space. WordPress’ default is 82 I’m not actually sure which sort of image library it uses to do this with. I never change that I never see the need to change it but you could reduce that slightly and see if the image quality is good enough for you or you could increase it increasing it will obviously increase the size of the images slightly.

It then gives you an option to convert bitmap images to jpg and I leave this as the default yes I don’t think I’ve ever come across a bitmap image for years so I’ll leave that is and do you want to convert pngs to JPEGs. I set that as no, because sometimes if you want a transparent PNG if you convert it to JPEG it will no longer have its transparency intact.

So those are the settings so what this plug-in does is when you upload an image that’s greater than the sizes you’ve set here is it resizes that image to these sizes as the maximum size as you set it sets that as the default image that you uploaded rather than the big one that you uploaded. It then removes the original one that you’re uploaded so if I upload one that’s you know 8,000 pixels in width this plug-in will resize it to 2048 by whatever the height is in proportion and then it will use that one as the image that I’ve uploaded and delete the original one. So I don’t have that space taken up on my account

There is an option down here at the bottom that will allow you to resize the images that you’ve already got on your website and it’s there an option to bulk resize them so what it’ll do is it’ll search for images. I don’t think I’ve got anything in the media library here but it would list all the images that it’s found here and obviously for sites that have a lot of images then it’s going to find a lot and then it gives you the option with a button appearing somewhere that says basically press this to bulk resize them.

There is this warning here of course in that it is going to go through and change the sizes of all the images that are greater than the sizes you’ve set here and it will delete the originals. Once it’s done the resize, if you don’t have a copy of those anywhere else you need to make sure you’ve got one of those beforehand because he doesn’t keep the originals the point of this is to reduce the size on the service that’s the point here.

Summing it up, Imsanity is a really simple plug-in in terms of user experience it works really really well and it really does help WordPress users save space on their sites.

I hope you found that useful I hope that it’s giving you a little bit of a tip you might want to add that plug in to your website to help you with your image resize. So until next time, until the next episode we’ll see you soon if you want to ask a question please use a hashtag AskHighrise on Twitter. Until then bye bye for now.

Ask a question

Why not get involved with this series of videos by submitting your own question for the Highrise Digital team to answer. You can do so using the hashtag #AskHighrise.

Ask a question now

WordPress website owners newsletter

We produce a quarterly newsletter, delivered by email which is aimed at busy WordPress website owners. It contains helpful information and advice about owning and running a WordPress website.

Sign-up to our newsletter

WordPress care plans

Does your WordPress website need someone to take care of it, keep it up-to-date and make sure that it is running smoothly? If so, take a look at our care plans.

Learn about our WordPress care plans

About the author

Mark is the lead WordPress developer at Highrise Digital. He has been working with WordPress for over 13 years, way back to 2005. He focuses on back-end development, integrating the website build with WordPress so it can be editable.