Why some tutorials supply measurements with px when other tutorials say that px unit is dead and nobody should use it

1

I was working on a little side documentary project when I hit the wall with the images, they are slow to load and blurry on some big screen devices, then I found about
srcset and sizes but there was another issue
how to know the proper dimensions for different image versions?

I found this on Google

Enter scaled images. A scaled image is an image that has been sized to fit the exact dimensions you’re using it for. Unlike cropping, which may ultimately alter the proportions of an image, scaling preserves the dimensions.

If you’re reading this post on a full-size screen, then the body of this post has a width of 600px. Since we’re all about optimization here at WPMU DEV, when I create images for blog posts I make them exactly 600px wide. That is the exact size I need so the browser doesn’t have to do any additional work and so you don’t have to use more data.

why they use px on that article when I had heard before that px unit is dead and no one should use it? in fact I use % or VW with text block so should I go inspector and get the dimensions of text block on px then use it to optimize my images?

2

Pixels are still huge when it comes to absolutely position elements (like little offsets), fixing spacing, some properties like border and shadow, max widths and heights, and more. Also, embedded media is in pixels.

But ofc for text and responsive design, etc % based and rem/em units are king.

2 Likes