Changing Image Properties

Most often you will change both the file size and the display size of an image, but there might be cases where you want to change the display size only.

Be careful with this option in order not to “hide” a large image file behind a smaller display size, causing the page to load slowly.

Change the display size of an image as follows:

1. In Dimensions , ensure that Constrain proportions is selected in order to keep the image proportions. Enter the width of the image in pixels, and the height will be changed accordingly.
2. Click Update to save your changes.

Imagine that you have a large amount of text on a page and want to place an image in the top right corner with the text floating around it with some space padding between the image and the text. The preview window allows you to see the result of the different options you choose. Position an image as follows:

1. You have the following ways of positioning images in relation to text in the Editor:
   • Manual option. In Alignment , select Right to position the image in the top right corner. In Style you can see the values that have been set for the image.
   • Preset style option. If CSS classes are available for positioning images, you can select a class from the Class drop-down list, see "Formatting Text Using Style Templates".
2. In Vertical space and Horizontal space, add a value in pixels for the space between the image and the surrounding text.
3. In Border , add a value in pixels for the image border.
4. Click Update to save your changes.

Under Swap Images you have the following options:

1. Select Alternative image to add different images for mouse over and/or mouse out. For best results, these images need to have the same size proportions in pixels.
2. Browse to select the desired images in the File Manager.
3. Click Update to save your changes.

Under Miscellaneous you have the following options:

1. In ID, you can set a unique identifier for the image. The ID can be referenced by style sheets or by a java script providing additional functionality.
2. In Language direction, you can set the language direction (left to right or right to left) for the description, title and other text attributes specified for the image.
3. In Language code, set the desired language, for example, if you have an image showing content in a different language than the actual page. Enter the standard language code format, for example it (Italian), es (Spanish), en (English) etc.
4. In Image map you can associate an image map with the image. Image maps are used to map certain areas of an image to links or other actions. There is currently no built-in way to create image maps in TinyMCE.
5. In Long description link, type a link to provide a longer image description than what fits in the description field. Note that most visual browsers do not support this feature, this is primarily an accessibility feature.
6. Click Update to save your changes.