There are so many good articles on the net regarding image compressing. If you're serious about it a good place to start would be the Image Optimization page in Google Developers website
From a personal perspective these are some of the steps I take regarding images:
Use SVG whenever possible. A few applications allow for converting images to SVG's, I use Graphic
for this purpose. When using SVG's in smaller icons they tend to be lighter, depending on the icons color scheme and other factors. Overall I find that it's worth the time converting the files and comparing sizes.
Use JPEP instead of PNG, then compress it using a dedicated application or online service. I use jPEGmini
. Usually these applications reduce the file size by 3x, sometimes even more.
Resize images when using thumbnails, size the full images so to be around 100KB. This is the technique used in the example Portfolio 1
, where the images used for the thumbs where resized in the Dynamic Grid
. In the same example images are full sized in the Case Studies
In that case a thumb is around 20KB, whereas the full image around 100KB. This reduction is very important when working with grids and pages that require many thumbnails.