Crushing images.

ImageOptim
This app is a actually a collection of other image optimizers for the different image file types.
It runs a file through each optimizer to minimize overall file size.
For the most part, it’s removing a metric ton of crufty meta data hiding in your images.
You’ll realize the biggest gains in pngs first, then jpgs, then gif.

SVGO GUI
For use when you save an image out as .svg and you are in fact using it as an image,
NOT for inline svg code
Works a lot like ImageOptim

IMAGE OPTIM https://imageoptim.com/mac
SVGO GUI https://github.com/svg/svgo-gui

Image Sprite

An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.

https://css-tricks.com/css-sprites/

Responsive Image Handling

srcset defines the set of images we will allow the browser to choose between, and what size each image is. Before each comma, we write:

An image filename (puppy-480w.jpg.)

A space.
The image’s inherent width in pixels (480w) — note that this uses the w unit, not px as you might expect. This is the image’s real size, which can be found by inspecting the image file on your computer (for example on a Mac you can select the image in Finder, and press Cmd + I to bring up the info screen.)
sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true — these are the hints we talked about earlier. In this case, before each comma we write:

a media condition ((max-width:480px)) - In this case, we are saying “when the viewport width is 480 pixels or less”.
A space.
The width of the slot the image will fill when the media condition is true (440px.)

https://codepen.io/martinwolf/pen/hFxyj/