I'm helping an artist friend with their website, and I've backed myself into a corner. They have multiple pages and a header div at the top of each one.

For each page's header, they want to design a really fancy image in Photoshop instead of creating one with HTML and CSS (they want the font to be really fancy, too, so we can't just lay text over an image).

Each page has a different header, e.g. "Welcome to the Home Page," "News and Upcoming Events," etc.

Here's the problem: If the person who views the website has images enabled, I don't want them to see the corresponding h1 (because the h1 just repeats the text in the image). If the person doesn't have images enabled, I do want the h1 to appear.

I could set the image's "alt" text to nothing, but the h1's CSS has "display:none". A viewer could end up with an empty header.

I could use the "alt" attribute instead of the h1, but I use h2,3,etc. later in the page, so I'd be skipping (and it doesn't seem appropriate to use h1 anywhere but at the top of each document). Also, do text-only browsers and screen-readers render h1 in such a fashion that an "alt" header can't replicate? I don't know, so I assume they do.

Is there a graceful solution to this awkward situation that keeps the Photoshop headers?