Flat Image Localization with CSS

Although Photoshop makes it easy to add text in multiple language layers and contain them all in one file package, once the localized image is exported, it’s just a flat image. It’s useful for a lot of things, but even with my basic knowledge of SEO, I can see how having a flat image with text that isn’t recognizable to search engine crawlers is an issue.

One solution is to go through and add localized alt text to each image, but that would be a painstaking process that would need to be repeated on each page of the site in each language. The other option is to add text to an image with CSS, which allows us to still consolidate language files, while also enabling the text to be read by web crawlers and aid the site’s SEO. While I think this would be very difficult to do with complex designs or typography, it’s a very simple process for straightforward images with text overlays.

Step 1: Create a Blank Canvas

The first step is to use Photoshop to remove existing text from the selected image. This creates a blank slate to add localized text over. Of course, it’s still important to keep a copy of the original image in order to replicate formatting and typography as closely as possible.

Step 2: Setup CSS and HTML Structures

Next, an HTML file and accompanying CSS stylesheet need to be created in Visual Studio Code or a similar program. To practice this technique, I created an HTML file containing only the image I was working with. In an actual web design environment, the image would obviously be only a small part of the overall HTML document. In the body area of the HTML, I specified a <div> with the dimensions of my image, and created a class to place the image in. I also created classes for each section of text that needed different formatting.

    <div style="width: 1280px" style="height: 720px" class="butterfly">
      <span class="pacificgrove">pacific grove</span>
      <span class="museum">museum</span>
      <span class="of">of</span>
      <span class="natural">natural</span>
      <span class="history">history</span>
      <span class="monarch"
        >Pacific Grove's<br />Monarch Grove<br />Butterfly Sanctuary</span

In the CSS, I created a container for the image, then added the image in the previously designated class. The container specifies the dimensions of the image, and other elements like margins, and padding if necessary.

Step 3: Font Matching

My image contains several different fonts, so I had to figure out what to use in my recreation. I’m not knowledgeable enough about fonts to judge a good match by eye, so I used Font Squirrel’s font identifier engine. Although some of the fonts aren’t exact matches, I was able to find substitutes close enough that I am satisfied with the results. In this case, my goal was only to replicate the original image using CSS, so I did not search for fonts in other languages that would match the style.

Step 4: Insert and Arrange Text in CSS

Using my already designated text classes, I started adjusting text size, color, weight, spacing, and margins to match the original image. During the formatting process, I used the complete image, not the one I cleared the text from. This is so I could use the image to make sure my formatting is as spot-on as possible, and then switch the background image to the blank version when the formatting is finished. I also made my formatted text a different color from the original to make it easier to see the difference between my text and the original.

Step 5: Final Check and Completion

My last step was to check the completed HTML document in a browser, to make sure everything looked right and my web fonts were displaying properly. When comparing my version with the original, I can still see some differences, but overall I’m pleased with the results. I look forward to trying this exercise again sometime in the future with a more complex image after developing some more skills in CSS and web design.