Images
Last updated
Last updated
Ensure high-resolution images with 72 DPI for web. Use PNG, JPEG, or SVG formats. Optimize images for web to reduce load time without quality loss. Images must be sharp, well-lit, and free from pixelation.
Use standard sizes with a 3:2 aspect ratio for banners, featuring scenic or context-specific imagery. Maintain consistent aspect ratios to avoid distortion. Provide multiple sizes for different devices to ensure optimized display across various screen sizes.
Follow a style aligned with the brand identity, whether minimalistic, vibrant, or otherwise, to ensure consistency. Each image should have a clear focal point, with clean backgrounds, especially for icons and standalone objects. Maintain neutral lighting and consistent color tones across all images.
Adhere to the brand's color scheme, adjusting saturation and brightness as needed to maintain color consistency. Include tonal variations, such as light, medium, and dark tones, where relevant. Ensure color contrast meets accessibility standards, especially for overlays, to support readability.
Select context-specific images that align with the content's purpose and reflect the entity's mission, such as landscapes for tourism or tech hubs for business. Position overlay text and icons on less busy sections of the image to enhance readability and ensure legibility.
Entities should choose images that align with their purpose or mission, reinforcing the brand’s relevance and message.
Use vibrant images of Dubai landmarks, such as the Burj Khalifa, Palm Jumeirah, or Dubai Frame, to highlight Dubai's unique attractions and appeal to tourists.
Focus on images of Dubai’s infrastructure, like Sheikh Zayed Road, metro stations, or buses, to convey efficient transport options and promote public transportation.
Use images of health facilities, medical staff, and community wellness, such as hospitals, clinics, or preventative health services, to emphasize Dubai’s healthcare standards.
Ensure all images are legally sourced, whether through licensed stock or original photography. Include attribution where required to acknowledge image sources. Avoid using copyrighted images without permission, opting for generic representations if necessary to stay within legal guidelines.
Add descriptive alt text to each image, conveying content and purpose for non-sighted users. For complex visuals like infographics, add a detailed description or link to one on the page. Decorative images without informational value should use an empty alt attribute (alt="") so screen readers skip them.
Product Image:
Image Description: A photo of a red running shoe with white soles.
Good Alt Text: "Red running shoe with white soles."
Why: Descriptive enough to inform the user about the product, including key details.
Bad Alt Text: "Shoe" or "Image of a product."
Why: Too vague; does not provide enough detail for users to understand what the product is.
Button Icon:
Image Description: A magnifying glass icon that opens a search field.
Good Alt Text: "Search"
Why: It conveys the function of the icon (initiating a search) rather than describing the image itself.
Bad Alt Text: "Magnifying glass icon"
Why: This does not describe the action or purpose, making it harder for users to know what it does.
Decorative Image:
Image Description: A decorative flourish or pattern used to separate sections of a webpage.
Good Alt Text: alt="" (empty alt attribute)
Why: Since the image is decorative, it does not add meaningful content, so screen readers should skip it.
Bad Alt Text: "Decorative line to separate sections."
Why: This is unnecessary information, adding clutter for screen reader users.
For icons or images functioning as interactive elements, the alt text should describe their action or function. For instance, an icon for submission should use alt text like "Submit" instead of a visual description like "Arrow icon."
Avoid using images as the only means to convey essential information; add text-based explanations as support to assist visually impaired users.
Ensure images scale appropriately across devices without losing quality. They should not become pixelated or distorted when zoomed or resized.
For images with text, maintain sufficient contrast between text and background, meeting minimum accessibility standards, such as a 4.5:1 contrast ratio.
Provide captions for images when they offer information that complements the main text. For complex visuals, such as charts, include links to detailed text descriptions for further accessibility.
When using interactive or dynamic images, employ ARIA attributes like aria-labelledby and aria-describedby to associate images with labels or descriptions, enhancing context for screen reader users.
