To solve this problem, the developers introduced 2 new attributes to the image tag which are srcset and sizes. It’s all very nice but the idea now is to tell the browser to choose among all the different sizes available to us (6 in the case of our blog novo-monde), the image that has the most suitable dimensions according to the size and type of screen… So understand that if you look at the site on a mobile phone, you don’t want it to load the image in its original size 🙂 because the image would be much too heavy for the quality at which it would be displayed (and it would not be good for your loading speed and SEO) The arrival of srcset and sizes attributes This kind of CSS rule is called “media queries”and is the basis of any good adaptive website. if the width is less than 481px, the image is 100% of the width.if the width is between 481px and 861px, the image is 50% of the width.
if the width is greater than 861px, the image is 363px wide.You can see that there are 3 scenarios and that depending on the width of the screen, the image behaves differently: Here is how an image aligned on the left behaves on novo-monde: on screens with a width between 481 and 861px, the image takes 50% of the width On screens with a width of less than 481px, the image takes up 100% of the space To better represent all this, let’s take the classic example of an image aligned on the left on a site with a design that adapts to the size of the screens (responsive) as on our own blog. A smarter way to insert images had to be found so that the browser could choose the most appropriate copy of the image for the size and type of screen. The concrete case of a responsive websiteīut with the arrival of responsive websites (which adapt to screen size) and the emergence of mobile phones, this way of inserting images was no longer appropriate. When you added media to your page, wordpresse simply added an html image tag as follows: For more details, I wrote a complete article about this updateīut why does wordpress create copies of images of different sizes? Responsive images: Different images depending on the size and type of screen Images in WordPress before version 4.4īasically, wordpress created these different image sizes so that you could simply choose whether you wanted to insert a larger or smaller image into your web pages. Since version 5.3 of WordPress it is no longer 5 images but 8 that are created each time you add an image to your media library. So it is quite possible that you have more than 5 images created each time (for example, for the theme I created for our novo-monde travel blog, I added an extra size so that each time I put an image in the library, it is actually 6 images that are created). Without going into details, you should also know that wordpress theme developers also have the ability to add different image sizes that may be necessary for a specific design. 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).
HOW DO I RESIZE A PHOTO IN WORDPRESS NEWSLETTER PLUGIN 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.
0 kommentar(er)
