Edit screenshots to reduce file size

[skirtles-code]

This PR reduces the size of 5 images that show screenshots of code in an editor. They're shown across 2 pages:

• https://deploy-preview-1102--vue-docs-next-preview.netlify.app/guide/single-file-component.html
• https://deploy-preview-1102--vue-docs-next-preview.netlify.app/cookbook/debugging-in-vscode.html

These are some of the largest images in the docs. They're now reduced to about 15-20% of their original file size:

• breakpoint_hit.png: 610KB -> 98KB, 16%
• breakpoint_set.png: 536KB -> 79KB, 15%
• config_add.png: 518KB -> 75KB, 15%
• sfc-with-preprocessors.png: 160KB -> 32KB, 20%
• sfc.png: 111KB -> 21KB, 19%

For the cookbook page this is a reduction of about 1.4MB.

I used GIMP to reduce the file size. The process was:

1. Crop the image to remove the transparent margin. This also removed the drop shadow.
2. Fill in the rounded corners to remove any remaining transparency.
3. Convert the image to an indexed palette, with 255 colours.
4. Export the image with all meta data removed and compression turned up to full.

I then reapplied the rounded corners and drop shadow using CSS. It won't be a perfect match for what was there before but I think I got it pretty close.

I haven't resized the images (aside from the cropping). That could have reduced the file size further but I didn't think it was worth it. I would assume that having relatively large images helps to keep them rendering clearly at different sizes and resolutions.

Changing to 255 colours could, in theory, impact the quality of the image. In practice, they look the same to me. The original images are still in the Git history should we ever need them.

I applied the CSS using style attributes. That seemed to be how custom styles were applied elsewhere, though I'd usually use class instead. I suppose that might be to ensure that the styles aren't lost by theme updates?