Cheatsheet: Images
Vector, logo, illustration?
SVG (or PNG)
In Illustrator: File → Export → Export As...
Check the box in the bottom of the save dialog for "Use Artboards" if you want the output file to match your artboard dimensions. Otherwise, the output file will size and crop to the visible objects.
Photograph or detailed image?
JPG
In Photoshop: File → Export → Save for Web (Legacy)
Pixel dimensions of the output image should be at least 2x the largest size the image will be displayed at in the browser. This ensures a sharp, detailed looking image on retina displays. Never scale images above their native pixel dimensions in the browser!
Compression should be as high as possible (i.e. "quality" slider as low as possible) without visible loss in image quality. This will produce the smallest possible file size with the fastest load time.
As a general rule, the output file size should be <1MB.
The more oversized the pixel dimensions of the image, the more compression you can get away with. In other words, you can get away with much more compression on an image whose width and height are 3x its intended display size, than an image that will be displayed at 1:1 its native width and height.
Oh, you want it to scale?
The display mode for images is inline by default, which isn't very intuitive. They are also stubbornly inflexible and will display at their native size regardless of the html container they've been put in.
This reset near the top of your style sheet makes images behave in a more expected way.
img {
display: block;
max-width: 100%;
height: auto;
}