Understand why you shouldn't resize an image via HTML or CSS. Despite being a very common and often necessary practice, resizing images via HTML or CSS can bring serious harm to the user's browsing experience.
This behavior can also occur unintentionally or due to errors in the development of the WordPress theme . The use of very large images can make the site slow and even unnavigable due to the amount of resources used by the computer or cell phone to render the file on the site.
Large sized or high resolution images can result in a considerably large file size. An image or photo, for example, 3160px wide is reduced to 600px to fit the page. Although very common, several images in this situation can make the site extremely slow.
What is resizing image with HTML or CSS?
Image resizing with HTML and CSS consists of using the attributes of these languages to declare a smaller size than the image actually has. For example, an image has 1024 x 1024 px, however, a value like 500 x 500 px is informed in the HTML or CSS. In this way the image is “reduced” to a size smaller than the actual file size.
This is common on sites with Slides, where several images are placed with extremely high resolutions and then reduced to smaller sizes. Although this practice is necessary in some cases, a certain amount of “moderation” is needed to avoid large reductions.
Why does it slow down the website?
An image can have its size reduced by more than 80% , however, the file size remains the same (the reduction is only visual). When this occurs with large images, it uses up a lot of server resources unnecessarily.
The user's browser downloads an extremely large image to be displayed at a much smaller size. A lot of server resources and even your website visitor's computer are wasted. If accessing via cell phone, heavy images end up consuming more internet data than necessary.
How to resize correctly
When there is a need to display an image in reduced size , use image editors to resize the file . In this way, the image will be loaded with the correct size, without the need to resize it via HTML or CSS. When downloading the image with the size previously reduced in editors, the server and the visitor's computer did not waste resources downloading an image that was too large.
In the case of WordPress (and possibly other systems) there is an integrated image editor that allows you to resize the . With the WordPress media feature the image is automatically resized as per the WordPress “Media” settings. It is also possible to do the resizing manually just by informing the new dimensions of the images. This way you don't need to declare a smaller size than the image actually has.
How to resize image in WordPress
One of the correct ways to resize an image is to use the WordPress image resize tool .
To resize an image in WordPress, follow the steps below:
1. Upload the image to WordPress.
2. Select the image file from the media library.
3. Click the Edit Image button .
4. In RESIZE THE IMAGE , inform the new dimensions.
5. Click the Scale button to save the new size.
How to Change WordPress Media Settings
When uploading an image, WordPress automatically resizes it to several different sizes to avoid resizing via HTML . There are three sizes that are considered WordPress defaults and you can change them in the settings page.
To change WordPress media sizes, follow the steps below:
- In the WordPress admin panel, click Settings > Media .
- Enter the new sizes in Medium Size and Large Size .
- Click the Save Changes button .
Changing the Thumbnail Size dimension can cause problems. This size is used by the media gallery to display the image preview. Changing the other dimensions does not cause any problems for the site.
Changes to these dimensions are only applied to new images that are uploaded, images already uploaded are not affected by the change.
If you want to change the size of images already uploaded, without having to re-upload them, you can use the Regenerate Thumbnails plugin . It offers a tool that applies the dimension change to all images already uploaded to the site.
After changing image dimension , in media settings, you can insert image using Gutenberg and select its dimension in image block settings .
It is possible to choose between the dimensions configured in Media . It's not just the Gutenberg editor that lets you select the image dimension. Virtually all plugins that allow you to select an image offer the option to choose the image size.
The Elementor page builder also offers the possibility to change the image dimension. In this way, it is possible to choose between the default WordPress image sizes and the media sizes inserted by theme and plugins .