Just released my first coding tutorial after a few months. Here I’m talking about using new image formats in your Pinegrow websites. Enjoy!
9 Likes
Nice video!
Only at the beginning you talk about a 300dpi image and that’s confusing because dpi says nothing on the web only pixels count and that’s very important for beginners to know. There is also a other methode using w that instead of x:
For image width, you use a w instead of an x .
<img
srcset="
/wp-content/uploads/flamingo4x.jpg 4025w,
/wp-content/uploads/flamingo3x.jpg 3019w,
/wp-content/uploads/flamingo2x.jpg 2013w,
/wp-content/uploads/flamingo1x.jpg 1006w
"
src="/wp-content/uploads/flamingo-fallback.jpg"
>
For people that can’t work with a terminal to optimize/convert images you have:
Unfortunately AVIF is only working on the Windows version.
A handy tool for responsive cropping for free:
Thanks for the tips!
Can I clarify what you mean regarding 300dpi? I mention in the video that you would NOT use 300 and I proceed to change all my images to 72dpi. Is this not what you mean?
Thank you. This wasn’t a deep dive on the picture element just a tutorial to get responsive images to work specifically with different formats. Truthfully, I’ve never had much luck getting a w to work and in prep for this video I opted for this route with respect to the viewer. In theory going with w allows the browser to choose the correct image but again I was never happy with its image choice. Plus this route doesn’t cater for image formats, just image size. Happy to be enlightened a bit more though!
Was just doing some research in the 72 dpi thing. So from my understanding this isn’t relevant on the web anymore. However whether the image is 72 dpi or 300 is not harmful whereas I always thought it was hence mentioning it. now that I know this has no bearing I’m curious to know though why this is important to know for the user? I’d just omit any mention to save any confusion.
Don’t get me wrong it’s a excellent tutorial! 
The 300dpi part is around 0:46 on Youtube.
There is no need to convert any dpi to any other dpi/ppi, because it’s just meta data for print and on the web it doesn’t do a thing only resolution counts in pixels:
https://www.photocascadia.com/the-72-ppi-web-image-myth/
The problem with talking about dpi/ppi is that it makes it very complicated instead of only talking about the image dimensions in pixels. For beginners this is essential to know!
Example of using w instead of x with the help of Lazy Sizes:
Thank you! And I always appreciate feedback. Just wanting to make sure I understand properly.
Yeah that’s what I’ve understood now with some research. Some legacy myth which doesn’t actually apply! I agree it’s best to leave it out as this is the case but harmless nonetheless.
With all due respect there’s going to be 10’s of ways to do the same thing. Both your approaches are appreciated although I’m not about to bring in lazysizes to do something I can do in native HTML. I’ve never believed that’s a good habit to get into. Thank you for your insight though and maybe one day I’ll do an in depth tutorial on the picture element
2 Likes
What Lazy Sizes does can not be achieved with pure HTML and makes implementing <picture> and <srcset> or only <srcset> much easier, faster loading: lazy loading only loads what is visible, auto calculate the sizes attribute, better SEO. It even provides a background image plug-in and many other plugins.
This is also in that same demo page (No Lazy Sizes used) but w instead of x:
<picture>
<source srcset="assets/img/images-3D-parallax/layer01.webp 920w" sizes="100vw" type="image/webp">
<source srcset="assets/img/images-3D-parallax/layer01.png 920w" sizes="100vw" type="image/png">
<img src="assets/img/images-3D-parallax/layer01.png" alt="Alt Text!" class="img-fluid">
</picture>
Nice one. Thank you for the code snippet. I’m gonna play with that today!
I’m not denying that the lazysizes library is valuable and awesome but we are going off-piste from the purpose of the tutorial. For that, we don’t need lazy sizes
2 Likes