要使用 CSS 制作响应式图片布局并进行图片优化，需要遵循以下步骤：
img 标签的 srcset 和 sizes 属性实现响应式图片。其中，srcset 属性指定不同分辨率下的图片地址，sizes 属性指定不同屏幕尺寸下的图片大小。<img src="image.jpg"
srcset="image-480w.jpg 480w, image-800w.jpg 800w, image-1200w.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 800px) 50vw, 33.3vw">/* CSS Grid 布局 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 20px;
}
/* Flexbox 布局 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}/* 压缩图片 */
img {
max-width: 100%;
height: auto;
}
/* 使用 WebP 格式 */
@supports (webp) {
img {
background-image: url(image.webp);
background-size: cover;
}
}综上所述，使用响应式图片、CSS Grid 或 Flexbox 布局以及图片优化技术可以制作出优秀的响应式图片布局。