If we have noticed that, after uploading a photo or image to WordPress, it changes its original-name-example.jpg a scaled-example-original-name–1080×500.jpg, we are facing a case of rescaling/resampling of the uploaded image. When we particularly deal with the compression and size of our pre-uploaded images, we don't want WordPress to later undermine that work by recompressing (and pixelating) an optimal image. In this guide we will see how to solve it.
As of version 5.3, WordPress added an SEO function where the size of the images we upload is checked. Basically, if an image happens to be larger than the default threshold of 2560px, WordPress takes care of shrinking that image without even asking us.
It doesn't do it without reason: images that are too large are synonymous with heavy images which is synonymous with longer load times for our site, affecting the user experience (and our ranking scores in search engines). In addition, we occupy more space on our server, all this for something that in principle has no reason to be.
In practice, this is not always the case: when we upload a large image of measurements but very well optimized, that extra compression goes unnoticed when seeing the image limited to the width of the screen. And that can (should) respond to a design decision. An example: I make a diagram or illustration in PNG format to 8 colors. The image has jagged silhouettes because color restriction produces aliasing. However, that image that we upload to a width of 3000px will be resampled by the web browser to the screen width of the display (eg: 1080). Then, what we lost in definition we gained in a tiny file size. The same goes for the .WebP format, which supports tremendous compression, so uploading large pixel images is not a problem.
To top, when we are familiar with the art of compression, and we have fine-tuned the image quality balancing quality with weight, we do not want an automatic system to recompress our media in any way. We also don't want the word “scaled” to be added to the file name, nor its new measurements.
To block the automatic resampling function that applies when we upload a large image, we must add a code in the file functions.php from our site.
One way to do this is through an FTP "client" such as Filezilla (which is Free download). The file will be in the folder wp-content/mytheme (my topic will be the name of your active theme). If we know this method and prefer it, go ahead. Opposite case, better to do it directly from the WordPress Dashboard.
For this we will click on Appearance, later Theme File Editor, and we will select our file functions.php as shown in the screenshot below.
Once we visualize the code of our file functions.php, we must add the following fragment to it at the end of everything (but, if it exists, before the closing line “?>” without the quotes).
add_filter( 'big_image_size_threshold', '__return_false' );
we will keep our functions.php edited and done.
If you have any questions, you can write us in the comments. We read and reply to all messages. Good luck, and thanks for reading.
We are Duplika
Give your site the hosting it deserves