Image responsive resize css full size#

So you see that by default, wordpress already creates 5 images on your server each time you upload media to your library. Thumbnail : the default image has a maximum width of 150px and a maximum height of 150pxĪlso note that since wordpress 4.4, a 5th image size between large and medium is automatically created with a width of 768px (no max height).Medium : the default image has a maximum width of 300px or a maximum height of 300px.Large : the default image has a maximum width of 1024px or a maximum height of 1024px (this can be changed in the media settings).

Image responsive resize css full size#

Full size : the original dimensions of the image you uploaded.

Besides, you may have noticed that when you insert a media in an article, you can choose by default between 4 image sizes: When you add an image to the Media Library, WordPress will automatically create multiple copies of that image with different dimensions. What happens when you upload an image in the WordPress admin But know that most of the things I will talk about below are valid for any website that displays different images depending on the size and type of screen (which is really important in 2019 😉 ). In this article I will focus on the case of images in the WordPress CMS.

But even if your images have been well compressed, this does not mean that the browser displays the right image according to the type and size of the screen (understand that it is possible that the browser loads an image of 1500X1000 and actually displays it in 900X600… this is not optimal because the loaded image is much heavier than it should be). In my last article I explained you how you could compress your images to reduce their weight while keeping a beautiful quality (you will also find a detailed comparison and test of the best WP image optimization plugin here). With all the types and sizes of screens that now exist on our smartphones and computers, the topic of image optimization of a website has become quite complicated.