"Save to Web" Files Not Usable

[Nicholas5C21]

Dear Community -

After learning how to embed links in photoshop images (using the slice tool and 'save to web' and 'HTML and images' format) so that, theoretically, when posted to Facebook or my website anyone viewing the page(s) can click on portions of the images and go to different websites, such as product pages on Amazon, I now find that they can't be used in Facebook or Wordpress. Facebook doesn't seem to recognize them at all, and Wordpress only recognizes them as files, not as images.

I'm attempting to create clickable images for use in advertisements/promotions, and after learning how to do so via web searches and Youtube tutorials I now find that the resultant files are worthless... What am I missing? Please help!

Thanks!

[mglush · Accepted solution]

Hi,

Unfortunately that is correct. What you are describing in creating clickable areas on images (Image maps) works with HTML, but not on your social media web posts. Facebook will not allow you to embed HTML in a post or a page. But you can embed your image map as a static image and users can click on a link to view your imteractive map. The image will appear in your followers feeds.

Here is some information I found on creating Image Maps for WordPress: https://torquemag.io/2021/03/how-to-create-a-wordpress-image-map-and-why-you-should/

Let us know if this helps!

Michelle

[Nicholas5C21]

Thank you for taking the time to provide that information. I will research image maps. But maybe I should follow Dan's general advice below and build pages with separate clickable images... I think, perhaps, I just got caught up on the idea of having an interactive, multiple click image, and I'm trying to make it work becuase I thought it would be cool, but that maybe it's not feasible, and I need to adapt... still considering it... but sincerely thanks for your time!

[mglush]

You're welcome! I think that is a good idea too. But, I am sure that down the road the multiple clickable image concept will come in handy with another project. I will work on something and then realize the concept doesn't fit the project and I have to change directions. But, sometimes that cocept works great on another project so all your work is not lost.

Michelle

[Bojan Živković]

"I now find that the resultant files are worthless... What am I missing?"

Results are not worthless just can not serve for what you have in your mind. You need to learn more about topic and how things work.

[Nicholas5C21]

What I meant is that I learned how to create a file with multiple embedded links that I can't use in any of the platforms that I learned it for, so the files aren't usable... at least not in any of the ways they might be used for most purposes, such as in Wordpress and social media applications.

[Dan Rodney]

You have to learn how each platform works. In this case it's not Photoshop that's doing something wrong... each platform you're talking about (Facebook, WordPress) etc. works differently.

Facebook does not have any feature where you can tap part of an image to go to one website and tap another to go somewhere else. It's just not have Facebook posts work.

WordPress makes webpages with can do a lot more than a simple Facebook post. There may be WordPress plugins that let you create what are called image maps, which create multiple clickable areas within an image. But normally that's not how I'd think about a WordPress page. There would be multiple photos, buttons, etc each with different links, not just one image with many links inside it. These days it's rare that I ever see image maps being used anymore. I can't remember the last time I saw one. Things are just designed differently.

In summary, you'll have to learn how to fully and properly utilize each platform. Photoshop will come in handy when creating photos and graphics for each platform. I know there's a lot to learn, but I hope this helps and best wishes!

[Nicholas5C21]

Thank you for such a considerate response! See my above response to Michelle... I think, perhaps, I have to give up on the 'multiple links in one graphic' idea and just use galleries or the like (multiple separate images side by side with their own links). Thanks again Dan!

[Conrad_C]

Image maps were used during a time, literally 20 years ago, when everyone assumed web pages would be seen on big desktop computer screens. An image map requires HTML code that locks the images to a specific positions and dimensions; the image map won’t work without that code. But that old code does not work with today’s dynamic, responsive layouts that can adapt to desktop and mobile displays of different sizes, shapes, and resolutions.

Of course, that history is not something many newer users know about, so it’s understandable that someone might learn about image maps today and not know that it’s already years out of favor as a practice. So that’s not your fault.

The reason an image map doesn’t work with Facebook and other social media sites is that they let you upload only the picture, not any custom layout code that you might to keep with it. This is partly for security reasons; sites can’t check all the code that might come through in case it has malware that would infect the network. So Facebook, Instagram, YouTube etc. only let in the picture or video, because that’s safe. The only clickable features they allow are the ones you can add within their respective services and apps, like the call-to-action buttons, end screens, and cards you can add to a YouTube video.

You might get away with posting an image map on web pages you control, such as on a self-hosted WordPress site by inserting the image map code into a Custom HTML block. But even if you do that, the old-style image map code might completely break down within today’s responsive layouts driven by CSS and JavaScript, especially on mobile devices which are now at least half of all web traffic. I’m not even sure how well web browsers support image maps any more. So even if you could implement image maps, they might not be effective where you most need them to be effective.

I think (but am not sure that) a way to make clickable image areas that follows today’s web standards might be to overlay interactive CSS layers over a single image. But even that only works on web pages you control so you can add any code you want; no social media site will allow that.

[Nicholas5C21]

Thank you for the information. I must say, however, that I'm generally surprised that something so simple and seeminly useful as producing an interactive, multi-click image isn't feasible in today's tech world - security and proprietary controls to blame, I suppose.

[mglush]

Just a note/reality check: Image maps go all the way back to the dawn of the web age. I was teaching people how to create  them when Dreamweaver was still an infant and Social Media wasn't born yet. So, Image Maps are not new, but as technology has changed, they are not as relevant as they used to be. Some things, that are really good, seem to go the way of the dodo bird...like Flash, Fireworks or Infini-D, etc. Sigh.

Michelle 🙂

[Per Berntsen]

I made a website some years ago that uses jQuery javascript to make a responsive image map.

It works when you resize the browser window on a computer, and it also works on my Android phone.

I haven't checked it on iPads or iPhones since I made it, so I don't know if it still works on those devices.

The script is here: https://github.com/stowball/jQuery-rwdImageMaps

And you can see it in action here: http://www.tinnmaalet.no/pages/stadnamn.php

The page is in Norwegian, but you'll probably get the general idea.

Click the blue text on the map, and the page moves to the text about the map location.

[mglush]

Thanks!