#+TITLE: Images at advanced level
#+SHORT-TITLE: images-2
#+KEYWORDS: images
#+TOC-KEYWORDS: manuals
#+DESCRIPTION: how to insert an image on a web page

* Related topics
- basic instruction: [[image-1][how to insert an image.]]
- [[gallery][image gallery]]

Suppose you've got [[files/cat2.jpeg][pretty high-resolution photo]] of a cat and you would like it to be published on your personal "about my cat" web page.
There are several levels of doing that.

* Simple embedding
The simplest way is to write\\
\[\[image:cat2.jpeg\]\]\\
in the web page text source.

Since our image is large, the resulting picture will take most of the screen width:\\
[[image:cat2.jpeg]]

*:max-width=60ex Fixed width
To specify image's width (number of pixels) we provide an extra option: *width=400px*

** Example
\[\[image:cat2.jpeg:width=400px\]\]\\
** Result
[[image:cat2.jpeg:width=400px]]

In this case instead of original large high-resolution picture, its smaller copy is used.
 
* Variable width
Small screens may require more subtle treatment.
The following example limits image's screen width to 40% of the block width.

** Example
\[\[image:cat2.jpeg:width=400px:max-width=40%\]\]

** Result
[[image:cat2.jpeg:width=400px:max-width=40%]]

* Placement
Suppose we want to place the image in the upper-left part of the surrounding text.

** Example
You have to agree that I am beautiful; otherwise I may scratch you.\\
You have to agree that I am beautiful; otherwise I may scratch you.\\
\[\[image:cat2.jpeg:width=400px:max-width=40%:upper:left\]\]\\
You have to agree that I am beautiful; otherwise I may scratch you.\\
You have to agree that I am beautiful; otherwise I may scratch you.\\
You have to agree that I am beautiful; otherwise I may scratch you.\\

** Result
You have to agree that I am beautiful; otherwise I may scratch you.
You have to agree that I am beautiful; otherwise I may scratch you.
[[image:cat2.jpeg:width=400px:max-width=40%:upper:left]]
You have to agree that I am beautiful; otherwise I may scratch you.
You have to agree that I am beautiful; otherwise I may scratch you.
You have to agree that I am beautiful; otherwise I may scratch you.