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

After 15 years as a webmaster, I‘ve seen how scaling down images can optimize websites. But sometimes you really do need to show full size images.

In this guide, let‘s explore 4 methods to display large images in their original size with WordPress.

Why WordPress Scales Your Images

When you upload an image over 2560px wide, WordPress will scale it down to that width. This keeps your page sizes smaller so the site loads faster.

For example, a 5000 x 3000 pixel image would get scaled down to 2560 x 1536 pixels.

According to Google research, 53% of mobile site visitors will leave a page that takes over 3 seconds to load. Scaling images helps prevent this.

However, sometimes you need the full size for things like:

• High resolution photography
• Print products like posters
• Detail shots with tiny elements
• Large background header images

Next, let‘s look at 4 ways you can show full size images when you need to.

1. Get the Full Size Image URL

If you only need to display the full size version of a single image, adjusting the URL is quick and easy.

When WordPress creates a scaled down version, the original stays in your media library.

To get the full size URL:

• Go to Media > Library and select the image.
• In the sidebar, copy the File URL.
• Remove -scaled from the end of the URL.

For example:

yourdomain.com/wp-content/uploads/image-name.jpg

You can now use this URL anywhere you want to show the full size image.

Tip: To make management easier, I suggest a plugin like SEO Image Optimizer that appends the dimensions to the filename like image-name-1000x600.jpg.

When to use this method

Getting the direct URL works well for adding individual full size images, like:

• A large header or hero image
• A detailed product photo on an ecommerce site
• Post highlighting a featured image

However, it‘s not the best choice if you need to consistently show galleries of full size images across your site. For that, the next methods are better options.

2. Disable Image Scaling with a Plugin

If you want to show all images in their full original size by default, a handy plugin like Perfect Images can disable WordPress image scaling completely.

When installed, Perfect Images gives you an option to turn off the scaling threshold. This prevents WordPress from creating scaled down versions of any images you upload.

The steps to disable image scaling are:

1. Install and activate Perfect Images.
2. Go to Settings > Perfect Images.
3. Check the "Image Threshold" box.

That‘s it! Now WordPress will stop scaling large images.

Perfect Images also includes automatic compression and converts images to WebP, speeding up your site.

When to use this method

Disabling the image threshold site-wide is great if:

• You have photographers showcasing full resolution images
• Your site sells digital downloads like posters or artwork
• You notice pixelation or poor quality on scaled images

The main downside is that very large files can slow down your site. That‘s why compression and serving WebP images helps counter the performance impact.

3. Disable Image Scaling with Code

You can also use a snippet of code to disable image scaling across your WordPress site.

There are two ways to do this:

Option 1

Add this to your theme‘s functions.php file:

add_filter( ‘big_image_size_threshold‘, ‘__return_false‘ );

Option 2

Use a plugin like Code Snippets and create a new PHP snippet with the same code as above.

Then set it to "Auto Insert" on "Run Everywhere" so it applies site-wide.

The benefit of using Code Snippets is that it won‘t get overwritten if you change your theme.

When to use this method

The code method works well if you are comfortable with some technical tweaking or want to avoid installing yet another plugin.

But overall, I find a dedicated plugin like Perfect Images easier to manage and turn off if needed.

4. Open Full Size Images in a Lightbox

My preferred way to display full size images for galleries and portfolios is using a lightbox effect.

Lightboxes show a thumbnail at first, then visitors can click on an image to open a popup with the full size version.

This technique is great because:

• Pages load faster with small thumbnails.
• Lightbox pops up the full image on click.
• Visitors can zoom in on details.

There are several WordPress lightbox plugins available, but I recommend Envira Gallery for its ease of use plus the option to add titles, captions, tags, and more metadata.

Comparing the best lightbox plugins

Plugin	Pros	Cons
Envira Gallery	Intuitive creation tools	Can be slow with 100s of images
WP Lightbox 2	Very lightweight	Limited options for controlling display
Simple Lightbox	Compatible with many gallery plugins	Requires manually adding classes

To use Envira Gallery for full size lightboxes:

1. Install and activate Envira Gallery.
2. Create a new gallery and upload your images.
3. Insert the gallery into a page or post.
4. Under Lightbox, switch to Yes.

Now clicking any thumbnail will open a lightbox with the full size image!

When to use this method

Lightboxes are ideal for:

• Photography websites and portfolios
• Ecommerce product pages to zoom in on details
• Presenting a collection of large images while optimizing load times

Just be sure you‘ve disabled image scaling first so the lightbox shows the original full size image, not the scaled down version.

Tips for Optimal Website Performance

When using full size images in WordPress, you‘ll want to make sure to:

Compress Images

Use an image optimizer like ShortPixel to compress image file sizes. This reduces the impact of loading full resolution images.

Resize for Display Size

While disabling WordPress scaling, you should still resize oversized images to the dimensions they‘ll actually be displayed at on the page. A 5000×5000 pixel image shown at 1000×1000 pixels doesn‘t need to be full size.

Serve Images from a CDN

Use a content delivery network like Optimole to serve your images globally and speed up load times.

Lazy Load Images

Make images only load when visible on the page with a lazy loading plugin. This drastically improves performance.

Optimize Database Queries

Use a query monitor to debug and optimize any inefficient database queries that may be slowing things down.

Conclusion

I hope this guide gave you a good overview of the options to display full size images with WordPress.

The best method depends on your specific needs and what works for your site and server configuration.

By optimizing your images properly and choosing the right technique, you can showcase beautiful full resolution photos while still ensuring fast page speeds for your visitors.

Let me know if you have any other questions!