在前端编程中，制作好看的图片需要考虑多个方面，包括图片的选择、格式、压缩和优化等。以下是一些建议：
去掉无意义的修饰
确认设计是否需要那么多图片，是否可以更简洁。
尽可能使用CSS替代图片来实现修饰效果，如半透明、边框、圆角、阴影、渐变等。
使用矢量图替代位图
对于图案、图标等，矢量图更小且可缩放，无需生成多套图。
现在主流浏览器都支持SVG，因此可以放心使用。
使用恰当的图片格式
内容图片多为照片，适用于JPEG格式。
修饰图片通常更适合用无损压缩的PNG格式。
GIF适用于简单的动画，但建议用video元素或SVG动画取代。
WebP和JPEG XR是较新的格式，支持无损和有损压缩，具有更好的压缩比，但需要为不同的浏览器返回不同的图片，增加了开发成本和存储成本。
图片优化
使用图片压缩工具（如imagemin）来减小图片文件大小，同时保持良好的图像质量。
考虑使用CSS sprite技术将多个小图片合并成一个大图片，然后通过CSS背景定位来显示各个小图片，减少HTTP请求次数。
图片延迟加载，例如使用Angular框架的第三方插件me-lazy-load.js，可以提高页面加载速度。
使用CSS、SVG、Canvas或Iconfont代替图片
CSS可以用于实现简单的绘图效果，如伪元素（:before, :after）。
SVG适合绘制复杂的图形和动画，且具有良好的浏览器兼容性。
Canvas可以用于实时绘制图形，适合动态生成图像。
Iconfont是一种矢量图标格式，可以高效地展示大量图标，且可以自定义样式。
通过以上方法，可以在前端编程中制作出既好看又高效的图片，提升用户体验和页面性能。