图片优化时，避免陷入常见误区的关键在于以下几点：

避免将大图片或频繁使用的图片直接内嵌到HTML或CSS中。这种做法会增加文档体积，显著影响页面加载速度，尤其是在重复使用同一图片时。

注意图片格式的选择。JPEG适用于照片，PNG擅长处理透明背景和简单图形，而SVG则是矢量图形的理想选择。错误地将图片格式保存为不合适的类型会导致文件体积大幅增加。同时，应考虑使用WebP和JPEG XR等现代高效格式，它们能在保持高质量的同时显著减小文件大小。

第三，输出图片时尺寸应与实际使用尺寸匹配。生成大图后在网页上缩小显示不仅增加加载时间，而且浏览器缩放图片可能不如原生尺寸清晰。应确保图片在生成和输出时符合其在页面上的实际尺寸需求。

第四，设置合理的HTTP缓存策略。不设置缓存会导致用户每次访问都重新下载相同的图片资源，从而影响加载速度和用户体验。

第五，避免过度依赖图像编辑软件的默认设置。不调整压缩设置或使用高级优化工具，会导致图片优化潜力未被充分利用。应手动优化或使用自动化工具进行批量优化，以提高效率并确保图片质量。

第六，注意图标的使用。在现代网页设计中，SVG图标通常比字体图标更灵活且性能更好。应优先选择SVG格式，以提升页面性能。

第七，利用懒加载技术。不利用懒加载技术延迟非首屏图片的加载，或未根据资源重要性设置加载优先级，会导致关键内容加载延迟。应合理运用懒加载，以提升页面加载速度和用户体验。

第八，考虑设备像素比。不考虑DPR，导致在高分辨率屏幕上图片显得模糊，应该提供适合不同DPR的图片资源，以确保在高分辨率屏幕上也能保持清晰。

第九，避免为了追求极小的文件大小而过度压缩图片。过度压缩会导致图片变得模糊或出现明显的压缩痕迹，影响用户体验。应在保证图片质量的前提下进行压缩。

通过避免这些常见误区，可以显著提升网站的性能和用户体验。