How to Display Full Size Images in WordPress (4 Easy Ways)

Have you ever uploaded a stunning, high-resolution photo to your WordPress site, only to find it looks disappointingly small or blurry? It’s a frustrating experience, especially when you need to showcase detailed work like photography, art, or product images.

Since version 5.3, WordPress automatically shrinks large images to help with site speed, which is a great feature. However, it can feel like a roadblock when image quality is essential for your portfolio or online store.

At WPBeginner, we’ve navigated this exact problem on our own projects. We learned that you don’t have to choose between beautiful images and a fast website.

In this guide, we will walk you through four easy ways to display full-size images in WordPress without slowing down your site.

When Should You Display Full-Size Images in WordPress?

One example of when you may need to display full-size images in WordPress is if you run a photography portfolio or graphic design store. If you sell your work as digital downloads, then you might want to display large images to show potential customers their true quality.

Even if you run a WooCommerce store for physical eCommerce products, you may still need to display some full-size images. You can use a product thumbnail image, which users can then click on to see the image’s original size and zoom in on the item’s details.

That said, large images can cause a lot of problems. They can slow down your website, which can then negatively affect its search engine optimization (SEO).

For this reason, WordPress now automatically resizes large images when you upload them. If an image is bigger than 2560 pixels in height and/or width, WordPress will proportionally scale it down to a smaller size, maintaining the original image dimensions.

Most WordPress hosting providers also limit the file size you can upload to the media library. This can be an obstacle if you have a lot of large images to display.

If you want to change the size limit, then you can read our guide on how to increase the maximum file upload size in WordPress.

Now, let’s see how you can display full-size images on your WordPress website. We have 4 methods to do this. Some may work better for single images, while others are better for multiple ones. Simply use the links below to jump straight to your preferred method:

Method 1: Use the Full Size Image URL (Best for Single Images)

If you only want to display one or two large images on your website, then you can simply add them using the original image URLs.

When you upload an image that exceeds the maximum dimensions, WordPress will scale that image to create a smaller version. However, the original, larger image remains intact.

First, go to Media » Library from the WordPress dashboard. Make sure to change your view to the ‘List’ view.

After that, hover your mouse over your large image. Look for the one whose file name has ‘-scaled’ at the end.

When the ‘Copy URL’ button appears, click on it.

With that done, you can paste the image URL into your browser’s address bar and delete ‘-scaled….’ from the end of the image URL. Be careful not to remove the image format (.png, .jpg, .gif, and so on).

So, if the scaled image URL is http://example-website.local/wp-content/uploads/2024/03/example-image-scaled.jpg, then your original image URL is http://example-website.local/wp-content/uploads/2024/03/example-image.jpg.

When you visit that URL, then you will see the image in its original dimensions.

Now, you can add the image anywhere on your website. Since we are adding the image using a link, you will need to embed it rather than selecting it from the media library.

To do this, open the Gutenberg block editor for the post or page where you want to use the image. Then click on the ‘+ Add Block’ icon to add a new block. Here, you can select the Image block.

With that done, click on ‘Insert from URL.’

You can then simply paste the full-size or large image URL into the field, and press the ‘Enter’ key on your keyboard.

When you are 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 repeat the same process described above.

Method 2: Disable Image Scaling in WordPress (Recommended for Multiple Files)

If you plan to display multiple large images, disabling the automatic scaling feature is the best approach. While you can do this by editing your theme’s functions.php file, this method can be risky and may break your site if you make a mistake.

That’s why we recommend using the free WPCode plugin instead. As we explain in our full WPCode review, it’s the safest way to add code snippets, and they won’t be erased when you update your theme.

First, you’ll need to install and activate the plugin. For this method, the free version of WPCode is all you need.

Once activated, go to Code Snippets » Add Snippet. Here, select ‘Add Your Custom Code (New Snippet)’ and click ‘Use snippet.’

Now, type in a title for the custom code snippet. This is just for your reference. 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' );

Next, scroll down to the ‘Insertion’ section. Make sure the location is set to ‘Run Everywhere’ so the code works across your entire website.

When you’re ready, scroll to the top of the screen and click the ‘Inactive’ toggle to change it to ‘Active.’ Finally, click ‘Save Snippet’ to make the code live.

From now on, WordPress will use the original dimensions for any large image you upload, giving you access to the full-size version.

Method 3: Disable Image Scaling With a Plugin (For Complete Beginners)

If you find the code method too intimidating, then you can disable image scaling using Perfect Images. This free 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 Disable 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 the full size by default.

Method 4: Open Full-Width WordPress Images in a Lightbox (Best for Galleries)

The final option is adding a full-size image lightbox to your site. This is perfect if you are creating an image gallery, slider, 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-size image in a popup.

Just be aware that you need to disable image scaling beforehand using one of the methods above. If you don’t, your lightbox will only show the scaled-down version of your images.

Once you’ve disabled scaling, it’s time to create a gallery. We recommend using Envira Gallery. As we explain in our full Envira Gallery review, it’s the best image gallery plugin for WordPress because of its power and ease of use.

After installing and activating Envira, you can follow our step-by-step tutorial on how to add a gallery with a lightbox effect in WordPress.

Another great option is NextGEN Gallery. We found this plugin to be excellent for pro photographers or artists who need advanced features to display and sell their work professionally.

Frequently Asked Questions About Full-Size Images

At WPBeginner, we frequently get questions about managing images in WordPress. Here are some of the most common ones about displaying them at full size.

Will displaying full-size images make my website slower?

Yes, large image files can increase your page load times, which can harm user experience and SEO. This is why it’s very important to optimize your images for the web before uploading them, even when displaying them at full size.

What is the easiest way to show a single full-size image?

The simplest method is to use the direct URL of the original image. When WordPress creates a scaled version, it keeps the original file, which you can then embed using the Image block.

Is it better to use a plugin or code to disable image scaling?

For most users, especially beginners, using a plugin like WPCode is the safest option. Adding code directly to your theme files can break your site if not done correctly, while a plugin handles it in a secure environment.

Can I show a thumbnail that opens the full-size image when clicked?

Absolutely. Using a lightbox gallery plugin like Envira Gallery is the best way to do this. Visitors see smaller, fast-loading thumbnails and can click to view the high-resolution version in a popup.

Bonus: Optimize Your Images for Better Speed and SEO

Displaying full-size images can be great for showing off your work, but large graphics can slow down your website’s load times and negatively impact your SEO.

Because of this, we strongly recommend optimizing your images for performance. A plugin like EWWW Image Optimizer can help by compressing your files to make them smaller and faster to load.

We hope this article helped you learn how to display full-size images in WordPress. For more tips on managing your media files and improving your site, you can explore our other guides:

• How to Easily Optimize Image Files for the Web Without Losing Quality
• Beginner’s Guide to Image SEO – Optimize Images for Search Engines
• How to Easily Lazy Load Images in WordPress
• Ways to Prevent Image Theft in WordPress
• How to Add Text on Top of an Image in WordPress
• Great WordPress Plugins for Managing Images (Updated)

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.