Best practice for responsive images

HTML

<picture>
    <source media="(min-width: 1025px)" srcset="image-1260px.jpg">
    <source media="(min-width: 769px) and (max-width: 1024px)" srcset="image-1024px.jpg">
    <source media="(min-width: 481px) and (max-width: 768px)" srcset="image-768px.jpg">
    <source media="(max-width: 480px)" srcset="image-480px.jpg">
    <img src="image-1260px.jpg">                   
</picture>

CSS

img {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
}