Page History

Versions Compared

Old Version 1

changes.mady.by.user Unknown User (wileyal)

Saved on Jun 01, 2010

compared with

New Version Current

changes.mady.by.user Frost, Ruth (NIH/NCI) [C]

Saved on Apr 14, 2020

Key

This line was added.
This line was removed.
Formatting was changed.

note

Panel

borderColor	blue
borderStyle	solid


title	Image Size Limits

Typically, images up to 13 inches wide are displayed without causing the horizontal scroll bar to appear when the browser is full-screen. Wider images make scrolling necessary and may cause the page, the wiki markup, or both, to be displayed improperly so that lines no longer wrap.

You can attach images at any size and change the display size in Confluence. Thus, you can use the original image capture which provides the best resolution with the least loss of data. Try specifying the width only, in even increments calculated based on 72 pixels per inch:

Image Width in Inches = 13, Width in Pixels = 936
Image Width in Inches = 12, Width in Pixels = 864
Image Width in Inches = 11, Width in Pixels = 792
Image Width in Inches = 10, Width in Pixels = 720
Image Width in Inches = 9, Width in Pixels = 648
Image Width in Inches = 8, Width in Pixels = 576

If you need to re-size your image, you can follow the steps in this tip.

To insert an image on a page:

Open the page on which you want to see the image.
Click the Insert/Edit Image icon and complete the dialog; this Atlassian page has detailed steps.

You can also insert an image in the wiki markup.

Click the Attachments tab and complete the dialog to upload an image from your computer.
Click the Edit tab and then the Wiki Markup tab.
At the place on the page where you want to display the image, type the wiki markup shown here, using the name of your image.

Markup	Displayed Image
!caBIGlogoR.jpg!	Image Removed

To insert an image that is attached to another page, use the wiki markup shown here, with the names of your image and page, and your space key (name of the space in the URL displayed in the browser).

Image Location	Markup	Displayed Image
Attached to another page in the same space (Be sure all users in your group can view the page.)	!Wiki FAQs, Tips and Guidelines^caBIGlogoR.jpg!	Image Removed
Attached to another page in a different space (Be sure all users in your group can view the page.)	!caCORE:EVS^EVSTiny80.jpg!	Image Removed

You can format images in a variety of ways using HTML image attributes. Examples are shown below, followed by a list of HTML image attributes supported in Confluence 2.8; most are also supported in version 2.7 which is installed at this time (May, 2008).

Action	Markup	Displayed Image
Display alternative text for an image (not rendered by the Firefox browser)	!caBIGlogoR.jpg\|alt="caBIG logo"!	Image Removed
Display an image flush right with a blue border	!caBIGlogoR.jpg\|align=right,border=2,bordercolor=blue!	Image Removed
Display a thumbnail	!caBIGlogoR.jpg\|thumbnail!	Image Removed

Info

title	HTML image attributes supported in Confluence 2.8

align — 'left', 'right', 'bottom', 'center', 'top'.
border — width of the border (in pixels).
bordercolor — specify the color of the image border created with the "border" tab by name or by hex value.
hspace — amount of whitespace to be inserted to the left and right of the image (in pixels).
vspace — amount of whitespace to be inserted above and below the image (in pixels).
width — width of the image (in pixels). Supersedes natural width of the image.
height — height of the image (in pixels). Supersedes the natural height of the image.
title — descriptive text for the image, which is displayed when the pointer hovers over the image
alt — alternative text, which is included in the HTML code. This text is retrievable via search, and contributes to accessibility of the page for text-only viewing.

Contents of this page

Table of Contents

Overview of Alt Text

Keep in mind the following points. Credit for the following list goes to https://webaim.org/techniques/alttext/

Multiexcerpt include

MultiExcerptName	ExitDisclaimer
nopanel	true
PageWithExcerpt	wikicontent:Exit Disclaimer to Include

Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master.
Alternative text may be provided in the alt attribute or in the surrounding context of the image.
Every image must have an alt attribute.
Alternative text should:
- present the CONTENT and FUNCTION of the image.
- be succinct.
Alternative text should not:
- be redundant (be the same as adjacent or body text).
- use the phrases "image of…" or "graphic of…".
Appropriate alternative text depends heavily on the image's context.
Alt text of a functional image (for example, an image within a link) should describe the function as well as the content.
Decorative images still need an alt attribute, but it should be null (alt="").

Adding Alt Text in the Insert Image Dialog Box

Confluence supports adding alternative text in the Image Properties dialog box.

In the page you want to change, click Edit.
Select the image. The image properties panel appears.
Image Added
Click Properties. The Image Properties dialog box appears.
Image Added
In the Alt text field, enter alt text. Until CONFSERVER-34728 has been fixed, avoid using the following special characters in alt text:
- forward slash (/)
- colon (:)
- question mark (?)
- double quote (")
- semi colon (;)
Do not add text in the Title text field.

Adding Alt Text in the Source Editor

To enter alt text in the Source Editor (XHTML), enter the ac:alt attribute in the ac:image element as follows.

Code Block
<ac:image ac:alt="caDSR logo">

Info

title	Special characters

Until CONFSERVER-34728 has been fixed, avoid using the following special characters in alt text:

forward slash (/)
colon (:)
question mark (?)
double quote (")
semi colon (;)

An image inserted this way has alt text, which is evident to the user of a screen reader for the following image.

caDSR logo Image Added

Checking Alt Text

To view the alt text, you can display the image properties in your browser. To view alt text inline with the images, consider using a checker such as the WAVE Web Accessibility Evaluation Tool, available at the following site:

https://wave.webaim.org/