Skip to main content
replaced http://meta.stackexchange.com/ with https://meta.stackexchange.com/
Source Link
  1. Stack Exchange supports the width attribute; see "What HTML tags are allowed on Stack Exchange sites?""What HTML tags are allowed on Stack Exchange sites?".

  2. The answer to that question emphatically states:

You must enter the tags exactly as shown. Any deviation from this list—adding extra spaces, using single quote or no quotes, etc.—means the tag will be stripped.

and:

The attribute order is important! Using a different order (e.g., height before width) will strip the tag!

This means that your example code, above, should use:

<img src=\"%@\" width=\"320\">

However, don't post/link images this way! **Resize the image to the desired dimensions** and link to that. That is a standard best practice for a variety of usability, speed and efficiency reasons.

Also, images should be hosted on Stack Exchange's partner host. This ensures that the image is not lost sometime (soon) in the future.
Images are hosted on the special i.sstatic.net domain, although I'm not sure if the SE API makes this easy.

If you upload images to Stack Exchange's host, it makes handling different sizes easymakes handling different sizes easy.

For example, if you upload an image to Stack Exchange's host and get a base URL of:

https://i.sstatic.net/GLbK3.jpg

You can use the m suffix for a 320 px (half width) image and the l suffix for a 640 px (full width) image. EG:

https://i.sstatic.net/GLbK3m.jpg
https://i.sstatic.net/GLbK3l.jpg

This allows you to easily do neat, user-friendly tricks like this post markup:

[(Click for a larger image)  
![Puppies!][3]][4]

[3]: https://i.sstatic.net/GLbK3m.jpg "Click for a larger view."
[4]: https://i.sstatic.net/GLbK3.jpg "Click for a larger view."

(Note that there are two spaces at the end of the [(Click for a larger image) line.)


Which looks like this (hover over and click the image):

(Click for a larger image)
Puppies!

  1. Stack Exchange supports the width attribute; see "What HTML tags are allowed on Stack Exchange sites?".

  2. The answer to that question emphatically states:

You must enter the tags exactly as shown. Any deviation from this list—adding extra spaces, using single quote or no quotes, etc.—means the tag will be stripped.

and:

The attribute order is important! Using a different order (e.g., height before width) will strip the tag!

This means that your example code, above, should use:

<img src=\"%@\" width=\"320\">

However, don't post/link images this way! **Resize the image to the desired dimensions** and link to that. That is a standard best practice for a variety of usability, speed and efficiency reasons.

Also, images should be hosted on Stack Exchange's partner host. This ensures that the image is not lost sometime (soon) in the future.
Images are hosted on the special i.sstatic.net domain, although I'm not sure if the SE API makes this easy.

If you upload images to Stack Exchange's host, it makes handling different sizes easy.

For example, if you upload an image to Stack Exchange's host and get a base URL of:

https://i.sstatic.net/GLbK3.jpg

You can use the m suffix for a 320 px (half width) image and the l suffix for a 640 px (full width) image. EG:

https://i.sstatic.net/GLbK3m.jpg
https://i.sstatic.net/GLbK3l.jpg

This allows you to easily do neat, user-friendly tricks like this post markup:

[(Click for a larger image)  
![Puppies!][3]][4]

[3]: https://i.sstatic.net/GLbK3m.jpg "Click for a larger view."
[4]: https://i.sstatic.net/GLbK3.jpg "Click for a larger view."

(Note that there are two spaces at the end of the [(Click for a larger image) line.)


Which looks like this (hover over and click the image):

(Click for a larger image)
Puppies!

  1. Stack Exchange supports the width attribute; see "What HTML tags are allowed on Stack Exchange sites?".

  2. The answer to that question emphatically states:

You must enter the tags exactly as shown. Any deviation from this list—adding extra spaces, using single quote or no quotes, etc.—means the tag will be stripped.

and:

The attribute order is important! Using a different order (e.g., height before width) will strip the tag!

This means that your example code, above, should use:

<img src=\"%@\" width=\"320\">

However, don't post/link images this way! **Resize the image to the desired dimensions** and link to that. That is a standard best practice for a variety of usability, speed and efficiency reasons.

Also, images should be hosted on Stack Exchange's partner host. This ensures that the image is not lost sometime (soon) in the future.
Images are hosted on the special i.sstatic.net domain, although I'm not sure if the SE API makes this easy.

If you upload images to Stack Exchange's host, it makes handling different sizes easy.

For example, if you upload an image to Stack Exchange's host and get a base URL of:

https://i.sstatic.net/GLbK3.jpg

You can use the m suffix for a 320 px (half width) image and the l suffix for a 640 px (full width) image. EG:

https://i.sstatic.net/GLbK3m.jpg
https://i.sstatic.net/GLbK3l.jpg

This allows you to easily do neat, user-friendly tricks like this post markup:

[(Click for a larger image)  
![Puppies!][3]][4]

[3]: https://i.sstatic.net/GLbK3m.jpg "Click for a larger view."
[4]: https://i.sstatic.net/GLbK3.jpg "Click for a larger view."

(Note that there are two spaces at the end of the [(Click for a larger image) line.)


Which looks like this (hover over and click the image):

(Click for a larger image)
Puppies!

Source Link
Brock Adams
  • 13k
  • 5
  • 39
  • 64

  1. Stack Exchange supports the width attribute; see "What HTML tags are allowed on Stack Exchange sites?".

  2. The answer to that question emphatically states:

You must enter the tags exactly as shown. Any deviation from this list—adding extra spaces, using single quote or no quotes, etc.—means the tag will be stripped.

and:

The attribute order is important! Using a different order (e.g., height before width) will strip the tag!

This means that your example code, above, should use:

<img src=\"%@\" width=\"320\">

However, don't post/link images this way! **Resize the image to the desired dimensions** and link to that. That is a standard best practice for a variety of usability, speed and efficiency reasons.

Also, images should be hosted on Stack Exchange's partner host. This ensures that the image is not lost sometime (soon) in the future.
Images are hosted on the special i.sstatic.net domain, although I'm not sure if the SE API makes this easy.

If you upload images to Stack Exchange's host, it makes handling different sizes easy.

For example, if you upload an image to Stack Exchange's host and get a base URL of:

https://i.sstatic.net/GLbK3.jpg

You can use the m suffix for a 320 px (half width) image and the l suffix for a 640 px (full width) image. EG:

https://i.sstatic.net/GLbK3m.jpg
https://i.sstatic.net/GLbK3l.jpg

This allows you to easily do neat, user-friendly tricks like this post markup:

[(Click for a larger image)  
![Puppies!][3]][4]

[3]: https://i.sstatic.net/GLbK3m.jpg "Click for a larger view."
[4]: https://i.sstatic.net/GLbK3.jpg "Click for a larger view."

(Note that there are two spaces at the end of the [(Click for a larger image) line.)


Which looks like this (hover over and click the image):

(Click for a larger image)
Puppies!