How to Display Full Size Images in WordPress (4 Methods)

How to Display Full Size Images in WordPress (4 Methods for 2024)

Are you looking to display your images in WordPress at their original full dimensions? While WordPress automatically scales down large images by default, there are times when you may want or need to show them at full size.

In this guide, we‘ll cover why WordPress resizes images, when you might want to disable that, and 4 methods to display full size images in WordPress. Jump to the section you need or read through for a comprehensive overview.

Why Does WordPress Scale Down Large Images?

By default, WordPress will proportionally resize any image you upload that is wider than 2560 pixels. So if you upload a 5000x7000px photo, WordPress will create a new version that is 2560x3584px (maintaining the original aspect ratio).

There are a few key reasons WordPress does this:

1. Page Load Times – Smaller image files load much faster than huge full-resolution photos. This improves the user experience and avoids frustrating delays.

2. File Storage – Larger images take up more space on your web hosting account. Resizing them helps control your disk usage.

3. Responsive Design – Massively oversized images can break your responsive layout and cause display issues on mobile devices.

4. Browser Limits – Some browsers will not display images above a certain dimension, so scaling ensures compatibility.

In the vast majority of cases, WordPress‘ default image scaling works great and you don‘t need to change it. But there are some instances where you may want your images at their original full size…

When You May Want to Use Full Size Images

1. Photography & Art Portfolios – If you‘re a photographer or artist showcasing your work online, you likely want people to see your images in full detail without compression.

2. High-Resolution Backgrounds – Full size images can make for impressive, immersive section backgrounds, especially on retina screens.

3. Digital Downloads – If you‘re selling photos, graphics, printables or other visual products, you need to ensure customers receive the full-resolution files.

4. Detailed Infographics – Large, informative graphics like infographics, diagrams and charts may need to be zoomable to full size to be readable.

Now that we‘ve covered the "why", let‘s look at 4 ways you can display full size images in WordPress, starting with the simplest manual approach.

Method 1: Get the Full Size Image URL

If you only need to display a couple images at their original dimensions, the easiest way is to grab the direct URL to the full size version.

When you upload an image that exceeds the max width, WordPress keeps your original image file and creates a "-scaled" version for display. You can view the full size image by removing "-scaled" from the URL.

Here‘s how:

1. Go to Media > Library and click on the large image to open the attachment details.

2. In the URL field, remove the "-scaled" part and everything after it. So if your URL is "example.com/wp-content/uploads/photo-scaled.jpg", edit it to just "example.com/wp-content/uploads/photo.jpg".

3. Copy the edited URL.

Now, to use this full size image in a page or post:

4. Edit the desired page/post and add a new Image block.

5. Instead of uploading from the Media Library, paste your full URL into the "Paste URL" field.

6. Publish or Update the page/post and you‘ll see your full size image!

Repeat this process for any other images you need. Just keep in mind that because you‘re bypassing WordPress‘ resizing, make sure the images are optimized and not excessively large. Tools like Adobe Photoshop, Affinity Photo or online compression tools can help.

Pros of this method:

• Quick and easy, no need to install plugins or edit code
• Allows you to selectively use full size images only where needed

Cons of this method:

• Can be tedious for more than a handful of images
• Doesn‘t work well for automatically-populated elements like galleries

If you need to globally disable WordPress‘ image scaling, try method 2 or 3 instead.

Method 2: Disable Image Scaling with a Plugin

If your use case requires many full size images across your site, you can disable WordPress‘ default resizing with a plugin.

We recommend the free Disable Big Image Threshold plugin:

1. Install and activate the plugin.

2. Go to Settings > Media.

3. Check the "Disable Big Image Threshold" option.

4. Save your changes.

Now when you upload images, even very large ones, WordPress will no longer scale them down and will use the original full versions everywhere.

Keep in mind this is an all-or-nothing setting. Any image you upload will be full size, so be extra conscious about optimizing your images and not uploading needlessly massive files. You may also need CSS rules to constrain the display size of your images as needed.

Pros of this method:

• Quick and easy to set up
• Works automatically for all new image uploads
• Avoids the need to edit code

Cons of this method:

• Can‘t selectively resize some images but not others
• May require CSS to control image display sizes
• Increases risk of accidentally uploading non-optimized images

If you prefer not to use a plugin, you can also disable image scaling with code in method 3.

Method 3: Disable Image Scaling with Code

For more advanced users comfortable editing their theme files, you can disable WordPress‘ image scaling by adding a filter to your functions.php file.

Important: Before editing theme files directly, be sure you‘re using a child theme or custom theme, as your changes will be overwritten if you update a theme. It‘s also smart to make a backup before changing any code.

To disable big image scaling:

1. Open your theme‘s functions.php file.

2. Add the following code at the end of the file:

add_filter( ‘big_image_size_threshold‘, ‘__return_false‘ );

3. Save the file.

This simple filter hooks into WordPress‘ resizing function and disables it by returning false.

Like with the previous plugin method, this will prevent WordPress from scaling down any images you upload in the future. The same considerations about image optimization and potentially using CSS to control display sizes apply.

Pros of this method:

• Lightweight, adds no extra plugin overhead
• Works automatically for all future uploads
• Intuitive for developers familiar with WordPress hooks and filters

Cons of this method:

• Requires directly editing code
• No easy on/off toggle from the admin dashboard
• Can‘t selectively resize some images while preserving others at full size

If you want more granular control to only show certain images at full size, method 4 using lightboxes may be preferable.

Method 4: Display Full Size Images in a Lightbox

The final method is ideal if you want to display image thumbnails on the page but give users the ability to open the full size versions in a lightbox overlay.

This is a great option for photo galleries, portfolios, or any time you have multiple large images to display together. It keeps your page load times fast by using smaller thumbnails initially, but still allows access to the full-resolution files.

To set up image lightboxes, we recommend the popular FooBox Image Lightbox plugin. It‘s free, fully responsive, and works automatically with WordPress galleries and most page builders.

To use it:

1. Install and activate the FooBox Image Lightbox plugin.

2. Create a new image gallery or edit an existing one from the page/post editor.

3. In the Block settings, set "Link To" to Media File so the thumbnails open the originals.

4. Update or publish the page.

Now when a user clicks on any of your gallery thumbnails, FooBox will open the full size version in a lightbox popup!

Some tips for best results with this method:

• Make sure you‘ve disabled WordPress‘ default image scaling using one of the previous methods, or your lightboxes won‘t be true full size.

• Keep your thumbnail sizes reasonable so the page still loads quickly. You can set your thumbnail dimensions in Settings > Media.

• Consider lazy loading your thumbnails for even faster initial page load. FooBox has a lazy loading option in its settings.

Displaying full size images in lightboxes is a best-of-both-worlds approach. You get the performance benefits of resized thumbnails by default, but still provide access to full-resolution images in an elegant overlay when desired.

Whichever method you choose, always remember to optimize your images before uploading. Even if you‘re displaying them at full size, compressing your images can dramatically reduce the file size without sacrificing quality. Smaller files mean faster pages and happier visitors!

You should also consider how your full size images will look on a variety of screen sizes and devices. While you want to preserve the original resolution, you may need to use CSS styles like max-width to constrain the display size and prevent breaking your responsive layout. Tools like CSS media queries can help you set different image sizes for different devices.

That concludes our guide to displaying full size images in WordPress! Whether you just need the occasional oversized hero shot or want to build an immersive full-resolution gallery, one of the methods covered here should suit your needs. Always test thoroughly and keep an eye on your page load times to ensure you‘re delivering an optimal experience for your visitors.

Do you have a favorite method we didn‘t mention? Or additional tips for working with full size images in WordPress? Let us know in the comments!