Challenge 2: Blocky Text From Heavy JPG Compression — Solution Walkthrough

What went wrong:

Per this chapter's own material, aggressive JPG compression produces
visible blocky artifacts specifically around hard edges and text,
since JPG's own compression algorithm was originally designed around
smooth photographic content, not sharp, hard-edged graphics. Sharp
text edges over a solid background are exactly the kind of content
JPG's own compression handles poorly at aggressive settings —
producing the blocky, ugly artifacting the designer is now seeing.

Why this happens specifically to text and hard edges, not photos:

Photographic content tends to have smooth, gradual color transitions
that JPG's own compression algorithm approximates well even at
aggressive settings. Text and hard graphic edges instead have abrupt,
high-contrast transitions — exactly the kind of content JPG's
compression struggles to represent efficiently, producing visible
blocky compression artifacts concentrated right around those sharp
transitions.

The better choice for this specific graphic:

Per this chapter's own material, PNG would have been the more
appropriate format here — it's lossless, so sharp text and hard edges
remain perfectly crisp regardless of compression settings, at the
cost of a larger file size than an aggressively-compressed JPG. This
is exactly the kind of graphic-content scenario this chapter names as
PNG's own strength.

WHY THIS WORKS AS AN ANSWER
------------------------------
This exercise directly applies this chapter's own JPG-artifact material
to a concrete graphic-design scenario, correctly identifying both why
the artifacting happened and which format would have avoided it
entirely.