Optimizing Images
Large images slow down your web pages which creates a less than optimal user experience. Optimizing images is the process of decreasing their file size, using either a plugin or script, which in turn speeds up the load time of the page. Lossy and lossless compression are two methods commonly used.
The two primary things to consider are the file format and type of compression you use. By choosing the right combination of file format and compression type you can reduce your image size by as much as 5 times. You’ll have to experiment with each image or file format to see what works best.
- PNG – produces higher quality images, but also has a larger file size. Was created as a lossless image format, although it can also be lossy.
- JPEG – uses lossy and lossless optimization. You can adjust the quality level for a good balance of quality and file size.
The two file sizes referenced are here just the two most popular the moment. GIFs still have their place for animation, but newer formats have come up, namely WebP and JPEG XR. They are unsupported now but will have a place in the near future.
There are many ways to compress and optimize images and it's critical to find a tool that works as you will need it to use it every time you upload an image. Plugins are great, as are generators and software applications like Adobe Photoshop and Gimp. Some other notables include:
Lastly, when possible, consider using SVGs in your project, whether they be an SVG logo lockup, icons, text, or simple images, they are a great lossless option that guarantees fast results.
Source: Kinsta Blog: How to Optimize Images for Web and Performance
