IxDF Developer Docs

Appearance

Images for designers ​

Overview ​

This guide outlines the best practices and requirements for preparing images for our web application. By following these guidelines, designers will ensure optimal performance, accessibility, and quality across all platforms, enhancing user experience and maintaining consistency throughout the application.

This document was created for designers by developers and focuses on technical aspects important for designers, as designers have their own guidelines for images. For these reasons, it's also important to inform designers when you make major updates to this document.

Image Quality Requirements ​

Source Image Standards ​

  • High Resolution: Provide source images with sufficient resolution to prevent pixelation on high-density displays. A minimum of 72 DPI is standard for web images, but higher DPI may be needed for retina displays.
  • Color Profiles: Use the sRGB color profile to ensure color consistency across different devices and browsers.

Format Selection Guide ​

INFO

There are also some modern image formats for the web: WebP, AVIF, JPEG XL. They have many advantages, but tools and CPUs are not ready for them in 2024, so we decided to keep using classic formats at least until 2026.

Choose the appropriate format based on image content:

When to Use SVG ​

Only for vector graphics:

  • Icons
  • Logos
  • Simple illustrations
  • UI elements with solid colors or simple gradients
  • Hero images and content images created in vector editors

Advantages:

  • Scalable without loss of quality, ideal for responsive design.
  • Supports animations and interactivity.

When to Use PNG ​

Best for:

  • Text-heavy images (to maintain text clarity)
  • Images with sharp edges or fine details
  • UI elements requiring transparency
  • Gradients (to avoid banding)
  • Images that need lossless quality
  • Images with wide color ranges

Considerations:

  • Larger file sizes compared to other formats.
  • Use for smaller images to minimize performance impact.

When to Use JPEG ​

Best for:

  • Photographs
  • Images with smooth color transitions
  • Content where minor quality loss is acceptable
  • Images that don't need transparency
  • When file size is a priority

Quality Settings:

  • Balance quality and file size by adjusting compression levels.
  • Recommended quality percentages range from 60% to 80% for web use.

Format Features Comparison ​

FeaturePNGJPEGSVGWebPAVIF
TransparencyYesNoYesYesYes
Sharp TextYesNoYesYesYes
GradientsYes*NoYesYesYes
Photos**NoYesNoYesYes
AnimationsNoNoYesYesYes
File SizeLargeSmallTiny***Smaller than JPEG/PNGSmallest
  • *JPEG can display gradients but may show banding.
  • **PNG can store photos but results in much larger file sizes.
  • ***For simple graphics.

SVG file size

If you compare file sizes of different formats, please take into account that SVG is a text-based format, and it will be additionally compressed by the web server using gzip or Brotli algorithms, so the final size will be 2-3 times smaller.

Mixing Image Formats ​

Sometimes, to achieve the best results, we can mix different image formats using CSS techniques. For example:

  • A PNG background image for transparency.
  • A JPEG photograph for the main content.
  • An SVG logo for scalability and clarity.

Considerations:

  • Advanced techniques beneficial for important pages.
  • Offers creativity and optimization opportunities.
  • Requires more time for implementation.

Common Mistakes to Avoid ​

  • Using JPEG for:
    • Text-heavy images (causes artifacts)
    • Gradients (causes banding)
    • Images needing transparency
    • UI elements with sharp edges
    • Images with wide color ranges
    • Exporting vector graphics (use SVG or PNG instead)
  • Using PNG for:
    • Simple photographs (results in unnecessarily large files)
  • Neglecting Modern Formats:
    • Ignoring WebP or AVIF when appropriate can miss out on performance benefits.
  • Incorrect Color Profiles:
    • Using non-sRGB profiles may lead to inconsistent color rendering.
  • Over-Compressing Source Files:
    • Excessive compression can degrade image quality.

Exporting Files ​

General Export Guidelines ​

  • Consistent Settings: Use the recommended export settings for each format to maintain quality and performance.
  • Understand Settings: Know what each export option does to make informed decisions.

  1. Photoshop JPEG:

    • File → Export → Export As. Settings:
      • Format: JPEG
      • Quality: 95% (or 98% in rare cases, if you still see some artifacts)
      • Color Space: sRGB
      • Optimized: Yes
      • Convert to sRGB: Yes
      • Metadata: "Copyright only" or "Copyright and contact info"
      • Progressive: No

  2. Photoshop PNG:

    • File → Export → Export As. Settings:
      • Format: PNG
      • Transparency: Yes (if needed)
      • Smaller File (8-bit): Yes
      • Color Space: sRGB
      • Metadata: "Copyright only" or "Copyright and contact info"

  3. Figma SVG:

    • Select the frame/element, right-click → Export. Settings:
      • Format: SVG
      • Include "id" attribute: Yes
      • Outline text: Yes
      • Outline strokes: Yes

  4. Illustrator SVG:

    • File → Export → Export As. Settings:
      • Styling: Internal CSS
      • Font: Convert to Outlines
      • Images: Embed (the best practice is to avoid raster images in SVGs)
      • Object IDs: Layer Names
      • Decimal: 2 (often 1 is enough also)
      • Minify: No (developers will minify them)
      • Responsive: Yes
    • Share with developers and remind them to optimize it using SVGO.

Note: When sharing SVG files with developers, please remind them to optimize using tools like SVGO.

Image Delivery Process ​

Figma is a Single Source of Truth for images. Designers create and upload high-quality images to Figma, developers export them from Figma and use image optimization techniques to optimize them for different devices.

A high-quality image is usually a JPG, PNG or SVG file for the maximum supported resolution and pixel density.

TIP

What is the max resolution? — We support 3x pixel density (aka DPR), commonly used by phones in 2025 (Apple started to use it from iPhone X), while laptops use 2x DPR. Giving this, original images should be 3x bigger in px than the max size of the image.

Naming ​

TIP

Alies needs to understand Figma's functionality for filenaming: is it possible to group files by dirs, preserve filenames? This is what AI suggest (I need to verify it):

  • Follow a consistent scheme (e.g., heroBanner/desktop, heroBanner/mobile).
  • Keep names descriptive but concise (e.g., hero-banner-desktop.png).
  • Leverage Figma’s slash ("/") naming for organizational structure:
 heroBanners/
   └─ large
   └─ medium

> 1. **Embed Metadata & Annotations**
> - If additional context is needed (dimensions, safe zones, etc.), annotate the Figma frame.
> - Use Figma comments or description fields to note usage guidelines and variations (e.g., "Use for retina displays only").
> 2. **Leverage Figma Components When Possible**
  • Convert frequently reused graphics into Figma Components.
  • This ensures consistent updates and a single point of maintenance across multiple screens.
  1. Organize Frames and Pages
  • Group related images under dedicated frames or pages (e.g., Assets/Images, Assets/Icons).
  • Keep the Figma file tidy so developers can quickly find relevant images.

Image Extraction Instructions for Developers ​

> [!TIP]
> Alies please verify them
  1. Locate the Required Asset
  • Navigate to the appropriate frame or component in Figma.
  • Use Figma’s built-in search if you’re unsure where the image is located.
  1. Select the Image Layer
  • Click the specific layer or component.
  • Verify its name and inspect the layer properties to ensure you have the correct version.
  1. Check Export Settings
  • Use Figma’s Export panel (bottom-right).
  • Verify or set the correct format (e.g., .png, .jpg, .svg).
  • Ensure the image resolution is 3x bigger than the max image size on a screen (to support 3x DPR displays).
  1. Export the Image
  • Click Export [x].
  • Review the exported file and name it according to your project’s naming convention.
  • Immediately move it into your project’s assets or images folder.
  1. Apply Image Optimization
  • Before committing to the repo, run the exported file through the recommended image optimization workflow.
  • Confirm that final sizes meet performance targets (e.g., for mobile, large screens, etc.).
  1. Version Control
  • Commit the optimized file to your project’s repo under the correct directory.
  • If changes are required in the future, return to the Figma file (single source of truth) and repeat the process with updated settings.

Next steps ​

  1. Image optimization
  2. Image uploading

Contact & Support ​

For questions about these guidelines or assistance with image preparation, contact:
  • Design Team Lead
  • Frontend Team Lead
  • Backend Team Lead

Literature ​

  1. Descriptive syntaxes for images
  2. Responsive Images: A Reference Guide from A to Z