Do you want to learn how to display full size images in WordPress?
WordPress automatically shrinks large images so your site loads faster and runs more smoothly. However, sometimes you may need to show large images at their full size.
In this tutorial, we’ll show you how to display full size images on a WordPress site.
Why is WordPress Scaling Large Images?
If you upload a very large image, then WordPress will resize that image automatically. For example, if you upload an image that’s 5000px by 7000px, then WordPress will resize that image to 2560px and then scale the width to match the original dimensions.
Visitors will see this scaled-down version of the original large image. This can boost WordPress speed and performance, which means a much better experience for your visitors and customers.
However, sometimes you may need to show full size images. For example, if you’re a photographer or artist who sells digital downloads on WordPress, then you may want to display larger images on your website.
For some sites, large images are a requirement, such as a photography website where you show off your work. Sometimes you may even need to show a single large image, such as a background image in WordPress.
No matter what your reason for wanting a full size image, we’ll show you how to do it, step-by-step.
Some methods work better for single images, while others are better suited to an image library. Simply use the links below to jump straight to the method that’s right for your goals.
Method 1. Get Full Size Image URL (Best for Single Images)
If you only want to use one or two large images on your website, then you can simply change that image’s URL.
When you upload an image that exceeds the maximum dimensions, WordPress will scale that image to create a smaller version. However, the original image remains intact.
To show the original image, you simply need to delete ‘-scaled’ from the end of the image’s URL. Then, you can add the large image to any page or post using the modified link.
To do this, go to Media » Library, and then select your large image.
Towards the right of the screen, find the ‘File URL’ field
You simply need to delete ‘-scaled’ from the end of the image URL.
Just be aware that you need to embed the image using the link, rather than selecting it from the WordPress Media Library.
To do this, go to the post or page where you want to use the image, and then click on the ‘+’ icon to add a new block. Here, type in ‘Image’ and then select the right block when it appears.
With that done, click on ‘Insert from URL.’
You can then simply paste the full size image URL into the field, and press the ‘Enter’ key on your keyboard.
When you’re ready to go live, just click ‘Publish’ or ‘Update.’ You can now visit this page or post to see the full size image in action.
To add more full size images, simply follow the same process described above.
Method 2. Disable Image Scaling in WordPress (With a Plugin)
If you want to show lots of different full size images on your website, then you can disable image scaling using Perfect Images. This plugin allows you to create additional image sizes in WordPress, update your media metadata, and more.
First, you’ll need to install and activate the Perfect Images plugin. For more details on installing a plugin, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, head over to Meow Apps » Perfect Images and check the box next to ‘Image Threshold.’
WordPress will now no longer add the ‘-scaled’ attribute to any image, so you can upload large media files and WordPress will show them full size by default.
Method 3. Disable Image Scaling in WordPress (Using Code)
You can also disable image scaling across your entire website using code.
If you don’t want to use a plugin, then you can add the code to your theme’s functions.php file. For more information, please see our guide on how to add custom code in WordPress.
However, we recommend using WPCode instead. WPCode is the best code snippet plugin for WordPress that allows you to simply copy and paste code into a user-friendly editor. This is much easier and safer than editing your theme files directly.
It also allows you to update your WordPress theme without losing customization.
To begin, you’ll need to install and activate WPCode. For more information, you can see our step-by-step guide on how to install a WordPress plugin.
In the WordPress dashboard, go to Code Snippets » Add Snippet.
Here, simply hover your mouse over ‘Add Your Custom Code.’
When it appears, click on ‘Use snippet.’
To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard.
After that, open the ‘Code Type’ dropdown and select ‘PHP Snippet.’
In the code editor, add the following code snippet:
add_filter( 'big_image_size_threshold', '__return_false' );
When you’re happy with the snippet, scroll to the ‘Insertion’ section. WPCode can add your code to different locations, such as after every post, frontend only, or admin only.
To use the custom PHP snippet across your entire WordPress website, click on ‘Auto Insert’ if it isn’t already selected. Then, open the ‘Location’ dropdown and choose ‘Run Everywhere.’
After that, you’re ready to scroll to the top of the screen and click on the ‘Inactive’ toggle so it changes to ‘Active.’
Finally, click on ‘Save Snippet’ to make the PHP snippet live.
Now, if you upload a large image WordPress will use the original dimensions, rather than resizing the image. You will always have access to the full size image this way.
Method 4: Open Full Size WordPress Images in a Lightbox (Best For Photo Galleries)
The final option is adding a full size image lightbox to your site, which is perfect if you’re creating an image gallery, carousel, or photo portfolio.
This method allows you to show smaller thumbnail images when the page first loads. Visitors can then click on any thumbnail to see the full sized image in a popup.
Just be aware that you need to disable scaling before you can use this method. This means you’ll need to disable the WordPress image threshold using one of the above methods. If you don’t, then your lightbox will show the scaled-down version of your large images.
Once you’ve disabled image scaling, it’s time to create a gallery. We recommend using the Envira Gallery plugin. It’s the best WordPress image gallery plugin on the market, allowing you to easily create beautiful and eye-catching lightboxes.
The first thing you’ll need to do is install the Envira Gallery plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
After installing and activating the plugin, you can follow our step-by-step tutorial on how to add a gallery with a lightbox effect in WordPress.
No matter what method you use to add images with large dimensions, it’s essential to optimize them for the web, so you don’t slow down your website.
We hope this article helped you learn how to display full size images in WordPress. You can also go through our guide on the best drag and drop page builder plugins and how to create a custom Instagram photo feed in WordPress.