Responsive images without retina

With use attribute of tag <img> srcset Full screen image image description
                
                    <img src="http://via.placeholder.com/414x1024/CD853F/ffffff?text=Mobile+image+414x900px"
                    srcset="http://via.placeholder.com/414x1024/CD853F/ffffff?text=Mobile+image+414x900px 414w,
                            http://via.placeholder.com/768x1024/CD853F/ffffff?text=Tablet+image+768x1024px 768w,
                            http://via.placeholder.com/980x1024/CD853F/ffffff?text=Landscape+image+980x1024px 980w,
                            http://via.placeholder.com/1280x1440/CD853F/ffffff?text=Landscape+image+1280x1440px 1280w,
                            http://via.placeholder.com/1920x1440/CD853F/ffffff?text=Desktop+image+1920x1440px 1920w"
                      sizes="(min-width: 1280px) 1920px,
                      (min-width: 980px) 1280px, 
                      (min-width: 769px) 980px,
                      (min-width: 415px) 768px, 100vw" alt="image description">
                
            
Full width image image description
                
                    <img src="http://via.placeholder.com/414x500/CD853F/ffffff?text=Mobile+image+414px"
                            srcset="http://via.placeholder.com/414x500/CD853F/ffffff?text=Mobile+image+414px 414w,
                                    http://via.placeholder.com/980x500/CD853F/ffffff?text=Tablet+image+980px 980w,
                                    http://via.placeholder.com/1280x500/CD853F/ffffff?text=Landscape+image+1280px 1280w,
                                    http://via.placeholder.com/1920x500/CD853F/ffffff?text=Desktop+image+1920px 1920w"
                            sizes="100vw"
                            alt="image description">
                
            
Not full width image
image description
                
                    <div class="img-holder">
                        <img src="http://via.placeholder.com/414x500/CD853F/ffffff?text=Mobile+image+414px"
                                srcset="http://via.placeholder.com/414x500/CD853F/ffffff?text=Mobile+image+414px 414w,
                                        http://via.placeholder.com/800x500/CD853F/ffffff?text=Desktop+image+800px 800w"
                                sizes="(min-width: 800px) 800px,
                                        100vw"
                                alt="image description">
                    </div>
                
            
Multicolumn
image description
image description
image description
image description
                
                    <img src="http://via.placeholder.com/414x414/CD853F/ffffff?text=Mobile+image+414px"
                            srcset="http://via.placeholder.com/240x240/CD853F/ffffff?text=Desktop+image+240px 240w,
                                    http://via.placeholder.com/376x376/CD853F/ffffff?text=Mobile+image+376px 376w,
                                    http://via.placeholder.com/414x414/CD853F/ffffff?text=Mobile+image+414px 414w"
                            sizes="(min-width: 769px) 240px,
                                    (min-width: 415px) 376px,
                                    100vw"
                            alt="image description">
                
            
Multicolumn (full width)
image description
image description
image description
image description
                
                    <img src="http://via.placeholder.com/414x414/CD853F/ffffff?text=Mobile+image+414px"
                            srcset="http://via.placeholder.com/240x240/CD853F/ffffff?text=Desktop+image+240px 240w,
                                    http://via.placeholder.com/376x376/CD853F/ffffff?text=Mobile+image+376px 376w,
                                    http://via.placeholder.com/414x414/CD853F/ffffff?text=Mobile+image+414px 414w"
                            sizes="(min-width: 769px) 24vw,
                                    (min-width: 415px) 49vw,
                                    100vw"
                            alt="image description">
                
            
Multicolumn lazyLoad
image description
image description
image description
image description
                
                    <img class="lazy" data-src="http://via.placeholder.com/414x414/CD853F/ffffff?text=Mobile+image+414px"
                             data-srcset="http://via.placeholder.com/240x240/CD853F/ffffff?text=Desktop+image+240px 240w,
                                    http://via.placeholder.com/376x376/CD853F/ffffff?text=Mobile+image+376px 376w,
                                    http://via.placeholder.com/414x414/CD853F/ffffff?text=Mobile+image+414px 414w"
                             data-sizes="(min-width: 769px) 240px,
                                    (min-width: 415px) 376px,
                                    100vw" 
                             alt="image description">
                
            

Responsive images with retina

With use attribute of tag <img> srcset Full screen image image description
                
                    <img src="http://via.placeholder.com/828x2048/CD5C5C/ffffff?text=Mobile+image+828x2048px"
                    srcset="http://via.placeholder.com/828x2048/CD5C5C/ffffff?text=Mobile+image+828x2048px 414w,
                            http://via.placeholder.com/1536x2048/CD5C5C/ffffff?text=Tablet+image+1536x2048px 768w,
                            http://via.placeholder.com/1960x2048/CD5C5C/ffffff?text=Landscape+image+1960x2048px 980w,
                            http://via.placeholder.com/2560x2880/CD5C5C/ffffff?text=Landscape+image+2560x2880px 1280w,
                            http://via.placeholder.com/3840x2880/CD5C5C/ffffff?text=Desktop+image+3840x2880px 1920w"
                                    sizes="(min-width: 1280px) 3840px,
                                   (min-width: 980px) 2560px, 
                                   (min-width: 769px) 1960px,
                                   (min-width: 415px) 1536px, 100vw" alt="image description">
                
            
Full width image image description
                
                    <img src="http://via.placeholder.com/414x500/CD5C5C/ffffff?text=Mobile+image+414px"
                            srcset="http://via.placeholder.com/414x500/CD5C5C/ffffff?text=Mobile+image+414px 414w,
                                    http://via.placeholder.com/828x1000/CD5C5C/ffffff?text=Mobile+image+828px 828w,
                                    http://via.placeholder.com/980x500/CD5C5C/ffffff?text=Tablet+image+980px 980w,
                                    http://via.placeholder.com/1280x500/CD5C5C/ffffff?text=Landscape+image+1280px 1280w,
                                    http://via.placeholder.com/1920x500/CD5C5C/ffffff?text=Desktop+image+1920px 1920w,
                                    http://via.placeholder.com/1960x1000/CD5C5C/ffffff?text=Tablet+image+1960px 1960w,
                                    http://via.placeholder.com/2560x1000/CD5C5C/ffffff?text=Landscape+image+2560px 2560w,
                                    http://via.placeholder.com/3840x1000/CD5C5C/ffffff?text=Desktop+image+3840px 3840w"
                            sizes="100vw"
                            alt="image description">
                
            
Not full width image
image description
                
                    <div class="img-holder">
                        <img src="http://via.placeholder.com/414x500/CD5C5C/ffffff?text=Mobile+image+414px"
                                srcset="http://via.placeholder.com/414x500/CD5C5C/ffffff?text=Mobile+image+414px 414w,
                                        http://via.placeholder.com/800x500/CD5C5C/ffffff?text=Desktop+image+800px 800w,
                                        http://via.placeholder.com/828x1000/CD5C5C/ffffff?text=Mobile+image+828px 828w,
                                        http://via.placeholder.com/1600x1000/CD5C5C/ffffff?text=Desktop+image+1600px 1600w"
                                sizes="(min-width: 415px) 800px,
                                        100vw"
                                alt="image description">
                    </div>
                
            
Multicolumn
image description
image description
image description
image description
                
                    <img src="http://via.placeholder.com/414x414/CD5C5C/ffffff?text=Mobile+image+414px"
                            srcset="http://via.placeholder.com/240x240/CD5C5C/ffffff?text=Desktop+image+240px 240w,
                                    http://via.placeholder.com/376x376/CD5C5C/ffffff?text=Mobile+image+376px 376w,
                                    http://via.placeholder.com/414x414/CD5C5C/ffffff?text=Mobile+image+414px 414w,
                                    http://via.placeholder.com/480x480/CD5C5C/ffffff?text=Desktop+image+480px 480w,
                                    http://via.placeholder.com/752x752/CD5C5C/ffffff?text=Mobile+image+752px 752w,
                                    http://via.placeholder.com/828x828/CD5C5C/ffffff?text=Mobile+image+828px 828w"
                            sizes="(min-width: 769px) 240px,
                                    (min-width: 415px) 376px,
                                    100vw"
                            alt="image description">
                
            
Multicolumn (full width)
image description
image description
image description
image description
                
                    <img src="http://via.placeholder.com/414x414/CD5C5C/ffffff?text=Mobile+image+414px"
                            srcset="http://via.placeholder.com/240x240/CD5C5C/ffffff?text=Desktop+image+240px 240w,
                                    http://via.placeholder.com/376x376/CD5C5C/ffffff?text=Mobile+image+376px 376w,
                                    http://via.placeholder.com/414x414/CD5C5C/ffffff?text=Mobile+image+414px 414w,
                                    http://via.placeholder.com/480x480/CD5C5C/ffffff?text=Desktop+image+480px 480w,
                                    http://via.placeholder.com/752x752/CD5C5C/ffffff?text=Mobile+image+752px 752w,
                                    http://via.placeholder.com/828x828/CD5C5C/ffffff?text=Mobile+image+828px 828w"
                            sizes="(min-width: 769px) 24vw,
                                    (min-width: 415px) 49vw,
                                    100vw"
                            alt="image description">