Template:Client side resize/doc

This template is used to display an image and have the user's browser resize the image rather than the wiki backend.

There are a couple of reasons this may be preferred:

• This template can accept widths in units other than pixels, including percentages, which may be the most useful. 100% can be used to ensure a larger image doesn't show up wider than the page.
• If the image is used repeatedly but at slightly different sizes, such as card images, this can reduce the number of images sent to the browser, as well as the number of versions of the image cached on the server. That can keep image updates when new versions of images are uploaded better synchronized since there are fewer versions on the server to regenerate.

Usage:

{{client side resize|image link|width}}

• The image link is a full link, including the braces, as in [[File:Hearthstone heroes.png]].
  • Most image options can be included, such as link= or a caption.
  • Positioning such as left, center, or right will not work as expected, however.
  • Usually, you shouldn't include width or height in the link itself. The exception would be for images much bigger than any size it's likely to be displayed at. For example, if the full size of the image is 4000px and it's going to be displayed at 100%, it might be better to use {{client side resize|[[File:Example.jpg|2400px]]|100%}} instead of just {{client side resize|[[File:Example.jpg]]|100%}}.
• The width can be any value that CSS accepts as a valid width, including auto, though that wouldn't resize the image at all.
• This template cannot be used for height-based resizing.