As part of our system, a web application, we have an image viewer. Previously we always displayed the full resolution image but scaled down with CSS to fit the page. For performance reasons we now display a properly scaled version of the image with the option to download the full resolution image with a button under the image.

As part of the users' workflow, they sometimes need to download this full resolution image to submit to another system. The problem is that many users just right-click the image and press "save image as". This used to work fine but now it will instead provide them with a low resolution image. The users don't notice this and this causes problems further down the line. How can we force users away from this behaviour? Sure, we could tell them not to do it but that doesn't feel very scalable. My least bad idea so far is to hijack the right-click in the browser but this is A) not super nice UI and B) not sure to cover all cases.

In short: How can we get users to use the download button instead of saving the low-res thumbnail?

  • 30
    Well, you kind of need to find out why they aren't using the download button already. So... usability testing; get people in to test the site and give them a task of downloading the image, then interview them afterwards to find out why they did what they did. Maybe they aren't noticing the button, maybe they think they're going to have to fill in a form... Find out the motiviation for the behaviour they currently have and design around that. – JonW Aug 16 at 12:11
  • 4
    Could you post an image of what the page looks like and potentially the userflow of screenshots – icc97 Aug 16 at 13:06
  • 14
    Could you make the image a download link for the full size image, so that a) when the cursor moves over the image, the cursor changes from a pointer to a hand, b) on click, the full size image downloads automatically? Since that's easier than right clicking and saving as, users will probably naturally gravitate to that method. – BallpointBen Aug 16 at 15:50
  • 13
    I see kind of an X/Y problem (you're looking for a solution to X, while you may have problem Y) here. Your question is how to get the users to use a button. The users definitively have the UX, that save-image is a lot nicer for them. An easy to see reason is, that it works in the same way across different websites. So why don't you support their workflow instead of trying to get them to use your workflow? – allo Aug 17 at 9:44
  • 10
    "Download" doesn't give a lot of information, and users normally assume they could just right-click and download the image to do the same thing. I would change it to "Download Full-Size" or just a hyperlink "full-size image" to the full size image. That gives them the knowledge that the image they are viewing isn't full size. You could also just have a transparent overlay that is a hyperlink to the full-sized image. – Jason Goemaat Aug 19 at 3:22

15 Answers 15

up vote 182 down vote accepted

As soon as the user hovers over the image add an overlay which enables him to hit the download button.

enter image description here

This is just an example, you can make this more subtle but I think it will work good with your users current behavior. Since they will hover over the image to start their "right-click-workaround" and will see the download option.

You should still have a download button which is visible without having to hover over the image just to be safe.

  • 11
    How do you account for Mobile users? – Adedoyin Akande Aug 16 at 13:48
  • 13
    By still providing them the button and the ability to use their learned behavior from other services like facebook (press and hold on image for download option). The OP does not mention mobile and i doubt that the problem will be found on mobile, since right-click as a option to save is not available on mobile. – Pectoralis Major Aug 16 at 13:50
  • 120
    To further discourage right-click workarounds, you could have the overlay say "download original size", or even "This is a preview. Download original size". – henning Aug 16 at 14:14
  • 27
    @dbkonXepts You can have the hover state respond to the initial touch of a touchscreen browser long-press; so a touchscreen user would see the overlay when they first touch, before the longpress menu appears. This is often the default in fact, depending on how the overlay is implemented. Also, everyone: don't forget that touchscreen !== smartphone - "desktop users" includes people touching the screens of hybrid devices like Surface. – user568458 Aug 16 at 15:51
  • 39
    On a side note, mb is millibits, not megabytes. – Dennis Aug 17 at 2:15

Do not do anything to the right-click. It's an expected behavior on the browser level. You know you shouldn't "hijack" the right-click or you wouldn't call it hijacking.

Provide users with a better tool.

If your users are essentially saving images themselves outside your app, your app must not be helping them save those images. Nobody wants to save images one-at-a-time.

Give them a way to select all the images they want and download all the images at once. Give users a good tool and show them how it works before they would want to save the first image. Give them a download list, make it easy to add images, show them their images in the list and give them easy way to download them all in one file at end.

Make the image filenames descriptive

Make the image filenames informative. You can communicate with users in the filename. Put the dimensions in the filename and include categorizations or whatever that tell the user the image's size within your system. So if a user right-clicks an image, the filename will indicate that there is a better file.

Product-Name-thumbnail-small-cropped-low-resolution-400x400.jpg

Product-Name-site-example-image-not-for-saving.jpg

The files that are downloaded properly can be named differently.

  • 9
    Adding the resolution, and maybe "thumb" etc., to the file name is very helpful. 1) As part of the save-as dialog they will see that name and realize the mistake, 2) With several images, and versions thereof, a good name helps the sorting and selecting later. – Gypsy Spellweaver Aug 18 at 15:32

There is a reason why your user is not selecting download button and usability testing is the best way to determine why. However in case it's a matter of positioning the download button in a place a user might look vs hidden some where in the UI, the following options/examples may help:

  • You could add a download button overlay image (in bottom right corner) which would provide a visual cue to download button.

enter image description here

Icon by Freepik via Flaticon and image randomly selected from Unsplash.

  • And if you'd like to add multiple resolutions to download you could a take a similar approach to what Flickr does showing a popover with a list of resolution (e.g. 600x400, 1200x600) options the user can download when the download button is clicked.

enter image description here Screenshot from Flickr.

  • 4
    It might be helpful if you describe better in text and not rely on the images. If you cut the images out of this answer, it doesn't make much sense. – can-ned_food Aug 17 at 4:44
  • @can-ned_food. Maybe you could clarify what is unclear to help me better explain? It's a pretty simple suggestion to add a download button overlay image as stated in response. The images are there to provide visual examples of it being executed in production (e.g. Flickr) and a quick mockup. – truleighsyd Aug 18 at 12:09
  • 3
    Well, I often browse webpages with the images disabled to save loading time, and only enable images when I need them. Looking at your answer with no images, I see that there are certain things which you rely on the images to portray: (A) where is the download button in relation to the corners of the image? (B) what does Flickr do? I have never really used it. Anyways, what if Flickr changes their UI? It could invalidate or confuse your answer; best that you describe it more verbosely as protection. – can-ned_food Aug 19 at 5:56
  • Thank you for your further articulating your critique. So is it fair to say that you have a similar experience if you were to disable the images from @Pectoralis response? Which by the way I think was a great response (as apparently does the community). – truleighsyd Aug 19 at 13:12
  • 1
    Well, when I saw that answer, I wrote my own. It really didn't seem worthwhile to comment there. Yours, however, went in further depth talking about positioning the button so as to make it more visible — so it seemed like the best place to suggest improvements. – can-ned_food Aug 20 at 0:37

As a dedicated right-click-save user, I can say that I wouldn't bother with a download button normally, and I'd assume I saved the full version (and be mildly annoyed at the website if I found I hadn't).

There are two issues here. The first is, your image isn't labelled (or doesn't identify itself) as a thumbnail. If it isn't, then I'm going to expect it is the full image, and my expectation won't be met. Bad UX.

The second is that the correct fix is never to hijack right-click. That's even more annoying.

The hover suggestions are closest here. Tell the user this is a thumbnail, and provide a way to view and/or download (or both) the full pic.

You can do this subtly, with a semitransparent thumb symbol or breakout arrow in the corner of the image, a "view full" or fullscreen symbol, or by having any click on the image overlay an image view of the full image with both right click working and a DL button. There are many ways to make this work, exemplified on many websites.

  • 9
    Re: tell the user this is a thumbnail: Watermark the thumbnail with the resolution and maybe the word "Preview" or the filename prominent on one of the sides of the image (top or bottom). That way, it will be clear that the saved image is not full resolution, and this works on any device capable of displaying the image in the first place. – htmlcoderexe Aug 17 at 11:36
  • 3
    I think you hit the nail on the head: the issue is information. A user presumes it is the full-size when it is really a thumbnail. My suggestion would be to treat it like a thumbnail. Perhaps have it small size on screen or significantly downsample the image so it looks low-resolution. I think all of the answers that suggest reaction to a user action are sub-par because a user should know what they need to do before the user takes action - this keeps the user from being frustrated. – BobtheMagicMoose Aug 17 at 13:47

I'd like to point out how Wikipedia does it.

When you enlarge a photo by clicking on it on Wikipedia, you're presented with the photo, some details on it, and an unobtrusive "download" button.

When you right click on the displayed photo, the "download" button is pressed for you, showing "Download original file".

Though this isn't the best way to do it, it does show an example of how you might do it in another scenario.

Lots of good answers but here is a KISS answer. You get the best of both worlds - fast load and render times and expected behavior.

<div style='background-image:url("/path/01-thumb.jpg");display:inline-block;'>
  <img  width=99 height=99 onmousedown='load(this,"/path/01.jpg")' ontouchstart='load(this,"/path/01.jpg")'>
</div>
<noscript>
  <a href="/path/01.jpg">
    <img title="click to get full image" src="download-button.png">
  </a>
</noscript>

<script>
  function load(o,s){
    if (!o.src){
      o.src=s;
      /* todo: fix busy loop*/
      while (!o.complete) /* act busy */;
    }
  }
</script>

Explanation:

  • This will use a thumbnail as the background image which will not give you a context menu to download the thumbnail.
  • The empty img tag (no src=) will fill the width and height specified (feel free to use css instead if they are all the same dimension)
  • The onmousedown event sets the src attribute to the full size image before context menu appears so it behaves as if the full size image was loaded. (Note that this may effect the perceived image quality depending on the browser's scaling vs. yours) I added the ontouchstart event to handle mobile.
  • The noscript tag provides a way for users with javascript disabled to get the full image without bothering other users. (Inspired by MonkeyZeus's answer)

    Edit: I added a busy loop to the javascript to (try to?) account for slow connections, but there are much better ways to wait depending on what libraries you are using.

  • Actually, this still doesn't work on slow connections in Chrome. The image has to at least start downloading (200 response received, image still streaming) for "Save as" to be shown correctly. – tehwalris Aug 17 at 11:19
  • @tehwalris you are right - I started with onmousedown and switched to oncontextmenu to avoid having to do an additional ontouchstart event for mobile. Will fix – technosaurus Aug 17 at 11:27
  • 3
    I'm pretty sure your busy loop will just block the event loop (preventing image load completion) and probably lockup the browser until the script timeout (unless the browser does something to prevent it). – Alexander O'Mara Aug 21 at 19:03
  • 2
    @AlexanderO'Mara Correct. NEVER use a busy loop in JavaScript. – wizzwizz4 Aug 22 at 8:05
  • 1
    Well, as is I don't think it will work in any browser, and I don't think it is possible to make it work. Image loading is asynchronous, and you can't block the queue with a synchronous operation waiting for an asynchronous operation to complete. – Alexander O'Mara Aug 22 at 17:43

It's difficult to answer this without a visual context of what the flow looks like at the moment, but one way to maybe work around this is to provide a zoom-in function on your image. When the user hovers the image, display the zoom-in cursor to invoke the user to view the full resolution image (in an overlay, load in a new page, or a new tab, maybe test this out).

Another way to go about this is to have a link overlay on the image, which on hover says "download image" and use the download attribute of the link to download the source image:

<a href="/images/myimage.jpg" download="MyImage">

I hope this has sparked some ideas. If not, maybe you could provide some more context of the current situation.

One option is to size a div to the same size as the thumbnail and use the CSS property background-image to supply the image instead of using the traditional <img> tag. This will make right-clicking impossible without hi-jacking anything.

Additionally, make the download button prominent and easily click-able.

After a few bouts of "Whoops, guess I need to click the download button." your users will learn to accept that the download button should be used.

<div style="width:272px; height:92px; background-image:url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');">
    <!-- pretend this is the thumbnail -->
</div>
<a href="#">Download full resolution image!</a> <!-- pretend this is a link to the full resolution image download -->

Example: https://jsfiddle.net/jryd5ubf/3/

  • 1
    I don't know why this was downvoted, but i will say that I use external tools to download images. I prefer to search through source code and element disassemblers to get image URLs, and only click script buttons as a last resort. – can-ned_food Aug 17 at 4:58
  • You could wrap the background image in the link to get a save link as context menu. I'm not sure if the OP actually wants good UX with simple solutions or a way to brain hack them into going against all their conditioning to avoid such buttons due to "download" links commonly being ads spam or annoying forms. Anyhow +1 for a solution that works with javascript disabled. – technosaurus Aug 17 at 9:16
  • @can-ned_food Based on OP's question it doesn't sound like the users are savvy enough nor have a need to do what you do; they seem to struggle with the difference between a full resolution image versus a thumbnail. There is nothing stopping you from implementing sophisticated image download solutions but OP's audience can probably be forced to use the intended functionality with minimal repercussions. – MonkeyZeus Aug 17 at 12:15
  • @technosaurus Thanks! There is always room for improvement with any UI solution; I just wanted to show a straight-forward example. – MonkeyZeus Aug 17 at 12:19
  • 2
    @can-ned_food I downvoted. I'll explain: Many users simply don't care about image resolution, or don't know what it is. I've seen people take screenshots with their phone of images that their friends/family share online. It's not a stretch to imagine that perhaps the user doesn't even have any interest in the benefit you're offering, and simply has been taught one way to save images that always works. I downvoted because this is a strong-handed way to solve the problem. "My users are doing A. How can I make them do B instead?" "Break A's functionality" is user-hostile. – maxathousand Aug 17 at 13:23

How many websites have you been to where you wanted to download a program and had to take a moment to find the real download button because of adverts mimicking it to bait your clicks?

Right-click/save-image is common across almost all browsers and websites, it's a reliable and trustworthy course of action. it's the default choice for many people explicitly because you know what you're getting.

Good UX is achieved by providing the service the user expects when they look at your UI.

If right click/save-image will achieve the same result, or a "good enough" result, then they'll continue doing that if that's what they're used to.

Hijacking their expectations by blocking or subverting the right-click context-menu will only ever weaken their trust in your website.
What you want to do is provide a tangible reason for them to press your button.

If it just says "Download", then the user's thought process is "Download what? Never mind, I don't care, Right-click/save-image"

If your image is a thumbnail and the download button gives a full-res version, then indicate that clearly and prominently with "Download HD image" or similar text, because that's the only reason the user is going to care about how you want them to use your site.

You could try simply renaming the download button to something that lets the user know they will get a better version:

  • "Download Hi-Res"
  • "Download HD image"
  • "Download full resolution image"
  • "Download full size image"
  • "Download original image" (though this one may have a negative connotation, they may think it's the image before adjustments).

You may add the resolution and/or picture size, like "Download full resolution image (4000 x 3000 pixels, 5 MB)"

Of course, the button needs to be clearly visible (i.e. no need to scroll to see it, for instance).

If that's not enough, you can add an overlay that specifies the size of the image currently being shown, and lets the user know there is a better one:

Preview size: 1600 x 900. [Download full-size (4000 x 3000)]

or

Currently displaying: 1600 x 900. [Download full-size (4000 x 3000)]

  • 3
    I think this gets to the nub of the problem, Given the choice between pressing a scripted button of unknown providence and using the browser-level Save Image button, all things being equal the browser button is better trusted. So give the users a tangible reason to use your button over their preferred options, generally telling them the image will be better if they press the button is a good one. – Ruadhan2300 Aug 17 at 12:12

From an ease-of-use point of view, your two best choices are:

  • Revert to having the images be the full resolution, or
  • Hijack the right-click button.

Neither of these options requires retraining your users. And you are in a situation where it is somewhere between impractical and impossible to retrain your users. Even if you put your users to the trouble of clicking the download button most of the time, they will sometimes slip up. The slip-ups will either cause frustration, or will cause inadequate-resolution images to be saved.

You have trained your users to treat the image as a download button. It is a huge, convenient button in the most obvious possible location -- the picture itself. Furthermore, you have trained your users to expect that the image is the resolution needed for the subsequent processes.

It is unlikely that your users want to think about the image's resolution, let alone do think about the image's resolution.

Can you even imagine a scenario where your users would want to download the reduced-resolution image? If not, then it does not matter that hijacking the right-click button overrides the browser's functionality that defaults to downloading the reduced-resolution image.


If you were writing this application as a desktop application, what would you do? You would implement this feature on either the image's left-click event or on the image's right-click event.

  • 1
    I agree that it's not poor design to hijack the right-click. Users have already been trained to use it, so make it give them what they want. – Auspex Aug 20 at 14:44

We'll still fall back on hijacking the right-click, but in style.

A visitor/user who right-clicks on an image definitely wants to do a "Save As", to curb this, instead of a hijack that involves some complex function to be carried out, a simple short duration tooltip upon right click telling the user to "Click the Download Button" goes a long way to further encourage the use of this button for downloading images.enter image description here

  • 4
    I'd say probably wants to do a "Save As", not definitely. There's also "Search Google for image..." in Chrome, which comes in handy sometimes. – Timo Aug 16 at 17:09
  • 4
    -1 why force behavior instead of encouraging it? The reason users are skipping the download button is because there are too many fakes of those. Those right-click users want to be in control. – Mindwin Aug 16 at 18:04
  • When the user right-clicks, is displaying a tooltip that says "click the download button" better than showing a popup menu with a "download image" option? It seems to me like displaying the tooltip is making the user put in extra effort, whereas displaying the popup menu would allow the user to use the page exactly the way they're expecting to. – Tanner Swett Aug 16 at 18:36
  • 1
    99% of the time that I right-click an image (okay, 85%) is to choose Open image in a new tab, or Copy image location. Many times, I am trying to create a bookmark to the image URL. Of course, in the case described by OP, I'd be getting the URL of a lower quality image, but in your suggested setup, I couldn't do it at all. – Kevin Fegan Aug 16 at 22:33
  • @KevinFegan The OP stated it clear that he doesn't want the User to load a lower quality of the image and get on with that when they could easily download a higher quality. Apart from that, he wants more clicks on that "Download Button" – Adedoyin Akande Aug 17 at 7:27

My recommendation is similar to a few others — e.g. 120326 from Pectoralis Major, — in that it features using a semitransparent overlay.

However, the overlay is not a popup shown when the image is clicked or when the pointer, cursor, or stylus hovers over the image:
Initially show the semitransparent overlay when the page is first loaded.
Behind the overlay is the preview — if, somehow, the overlay cannot be semitransparent, then it is opaque and partially obscures the preview.
On the overlay, you can have these buttons:

  • view preview
  • download full size

Each button should offer a href link, so that you fully accommodate any right–clickers.

This should make your provisions obvious and forefrontly.

When the user right clicks the image, prompt them to download the image in different resolutions. While normally hijacking the right click is a bad idea, I think this is the perfect situation where it is actually a good idea!

From my most popular StackOverflow answer, I'd like to suggest this modified snippet (Note: run it locally, outside JSFiddle for the <a download> to work):

right click example

How to direct the user to download the full-res image because the context-menu downloads the low-res thumbnail

a) Let the user download the low-res preview, but provide clear and visible link to the full resolution image

+-------------------------------+
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
|XXXXXXXXXXX THE IMAGE XXXXXXXXX|
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
+-------------------------------+
       [download full resolution]

b) For unexperienced users: Avoid icons and symbols. Be textual, plain, simple and direct.

Icons and symbols are not universally understood. They make the interface harder to learn. For the unexperienced user to understand what you mean, make a link with a written simple expression and highlight the key words.

Very artistic designs can be very bad for productivity and work. Most content oriented sites have a minimalistic interface. Take stackoverflow as an example: there is icons and symbols, but they are not needed to read the answers, navigate and answer a question.

c) You may limit the instructions to appear over the image only when the user selects

You may choose show the download link only when the user is selecting the image. Since it will appear close to where the user is looking it will probably will catch his o hers attention. This may make a cleaner design, but the down side is the user has to select the image to know it can be downloaded in higher resolution.

Normal

+-------------------------------+
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
+-------------------------------+

mouseover | mousedown | selected | touched | focus

+-------------------------------+
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
|XXXX Click to download fullres |
+-------------------------------+

Remember that smartphones and tablets doesn's not have "onmouseover" and browsers have different sets of events for mouse and touchscreen as described by Coebergh. Using onmousedown, pointerdown, touchstart, ondragstart and onfocus you probably will catch the user before he or she sees the context menu. But I don't know how stable this is. I never implemented that because in my line of work small screens are not an option.

d) override the context menu

I would advice you not to override the context menu. A standard browsing interface is comfortable to the user. It allows many users to do some actions automatically without thinking due to "muscle memory". But is an option. If you limit only to the image, it may not break the navigation too much.

protected by 4rchit3ct Aug 17 at 10:52

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.