Search code examples
vue.jstwitter-bootstrapnuxt.jscloudinary

What sizes to put for Nuxt Img module and Bootstrap grid columns?

If you use Bootstrap's grid system to lay out your pages, and there are six breakpoints:

image

Do I try to configure the nuxt-img sizes to match the column sizes for each breakpoint? In my case, I am just using the md columns to keep things simple like so:

<div class="container">
    <div class="row>
        <div class="col-md-8>
            <nuxt-img
            provider="cloudinary"
            :src="post.publicId"
            width="2450"
            height="3600"
            class="img-fluid card-img-top"    // <----- 'img-fluid' tells image to take width of its container
            sizes="XXXX" //<--- I am not sure what sizes to put here???
              />
        </div>
        <div class="col-md-4">
            ....etc....
        </div>
    </div>
</div>

Can someone provide some guidance on how I can tailor the Nuxt-img component best for Bootstrap grid columns? Thank you!

Update: Here's a sandbox test: https://codesandbox.io/s/billowing-butterfly-gi8j6?file=/layouts/default.vue

I have the below settings like so:

              <nuxt-img
                provider="cloudinary"
                src="117_acy7d3"
                width="431"
                height="600"
                class="figure-img img-fluid card-img-top shadow"
                sizes="sm:576px md:768px lg:992px xl:1200px xxl:1400px"
              />

Check out the network tab...you'll see that even if you start your browser viewport less than 400px wide, the browser still seems to download the large picture of 1200x1671:

enter image description here

Solution

  • Update

    Not sure about more optimizations, but I achieved to make it work with this

    <nuxt-img
  provider="static"
  src="/images/stairs.jpg"
  width="431"
  height="600"
  class="figure-img img-fluid card-img-top shadow"
  sizes="sm:100vw md:50vw lg:400px"
/>

    It is loading the images properly (regarding their size/weight), depending of the screen and generating them during yarn generate. My github repo can be found here: https://github.com/kissu/so-debug-nuxt-image

    This kinda depends of what your page is looking like. The fastest is to try some variants of 100vw in smaller resolutions and some absolute values like 600px as you would normally do while doing some responsive.

    Toggle your devtools and look how this is rendered with the emulated values, like this pretty much. enter image description here

    This documentation could be a good starting point too: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes

    Notice that the module will do that for you, it's just to understand the concept.