User Guide Cancel

Best practices for creating web graphics

  1. Illustrator User Guide
  2. Get to know Illustrator
    1. Introduction to Illustrator
      1. What's new in Illustrator
      2. Common questions
      3. Illustrator system requirements
      4. Illustrator for Apple silicon
    2. Workspace
      1. Workspace basics
      2. Learn faster with the Illustrator Discover panel
      3. Create documents
      4. Toolbar
      5. Default keyboard shortcuts
      6. Customize keyboard shortcuts
      7. Introduction to artboards
      8. Manage artboards
      9. Customize the workspace
      10. Properties panel
      11. Set preferences
      12. Touch Workspace
      13. Microsoft Surface Dial support in Illustrator
      14. Undo edits and manage design history
      15. Rotate view
      16. Rulers, grids, and guides
      17. Accessibility in Illustrator
      18. Safe Mode
      19. View artwork
      20. Use the Touch Bar with Illustrator
      21. Files and templates
    3. Tools in Illustrator
      1. Tools at a glance
      2. Select tools
        1. Selection
        2. Direct Selection
        3. Group Selection
        4. Magic Wand
        5. Lasso
        6. Artboard
      3. Navigate tools
        1. Hand
        2. Rotate View
        3. Zoom
      4. Paint tools
        1. Gradient
        2. Mesh
        3. Shape Builder
      5. Text tools
        1. Type
        2. Type on a Path
        3. Vertical Type
      6. Draw tools
        1. Pen
        2. Add Anchor Point
        3. Delete Anchor Point
        4. Anchor Point
        5. Curvature
        6. Line Segment
        7. Rectangle
        8. Rounded Rectangle
        9. Ellipse
        10. Polygon
        11. Star
        12. Paintbrush
        13. Blob Brush
        14. Pencil
        15. Shaper
        16. Slice
      7. Modify tools
        1. Rotate
        2. Reflect
        3. Scale
        4. Shear
        5. Width
        6. Free Transform
        7. Eyedropper
        8. Blend
        9. Eraser
        10. Scissors
        11. Dimension
    4. Generative AI (not available in mainland China)
      1. Generate a vector graphic using a text prompt
      2. Recolor your artwork using a text prompt
    5. Quick actions
      1. Retro text
      2. Neon glow text
      3. Old school text
      4. Recolor
      5. Convert sketch to vector
  3. Illustrator on the web (beta)
    1. Illustrator on the web (beta) overview
    2. Illustrator on the web (beta) FAQ
    3. Troubleshooting issues FAQ
    4. Keyboard shortcuts for Illustrator on the web (beta)
    5. Create and combine shapes on the web
    6. Add and edit text on the web
    7. Apply colors and gradients on the web
    8. Draw and edit paths on the web
    9. Work with cloud documents on the web
    10. Invite collaborators to edit on the web
  4. Illustrator on the iPad
    1. Introduction to Illustrator on the iPad
      1. Illustrator on the iPad overview
      2. Illustrator on the iPad FAQs
      3. System requirements | Illustrator on the iPad
      4. What you can or cannot do on Illustrator on the iPad
    2. Workspace
      1. Illustrator on the iPad workspace
      2. Touch shortcuts and gestures
      3. Keyboard shortcuts for Illustrator on the iPad
      4. Manage your app settings
    3. Documents
      1. Work with documents in Illustrator on the iPad
      2. Import Photoshop and Fresco documents
    4. Select and arrange objects
      1. Create repeat objects
      2. Blend objects
    5. Drawing
      1. Draw and edit paths
      2. Draw and edit shapes
    6. Type
      1. Work with type and fonts
      2. Create text designs along a path
      3. Add your own fonts
    7. Work with images
      1. Vectorize raster images
    8. Color
      1. Apply colors and gradients
  5. Cloud documents
    1. Basics
      1. Work with Illustrator cloud documents
      2. Share and collaborate on Illustrator cloud documents
      3. Share documents for review
      4. Upgrade cloud storage for Adobe Illustrator
      5. Illustrator cloud documents | Common questions
    2. Troubleshooting
      1. Troubleshoot create or save issues for Illustrator cloud documents
      2. Troubleshoot Illustrator cloud documents issues
  6. Add and edit content
    1. Drawing and dimensioning
      1. Drawing basics
      2. Edit paths
      3. Draw pixel-perfect art
      4. Draw with the Pen, Curvature, or Pencil tool
      5. Draw simple lines and shapes
      6. Draw rectangular and polar grids
      7. Draw and edit flares
      8. Image Trace
      9. Simplify a path
      10. Symbolism tools and symbol sets
      11. Adjust path segments
      12. Design a flower in 5 easy steps
      13. Create and edit a perspective grid
      14. Draw and modify objects on a perspective grid
      15. Use objects as symbols for repeat use
      16. Draw pixel-aligned paths for web workflows
      17. Measure and plot dimensions
    2. 3D objects and materials
      1. About 3D effects in Illustrator
      2. Create 3D graphics
      3. Map artwork over 3D objects
      4. Create 3D Text
      5. Create 3D objects
    3. Color
      1. About color
      2. Select colors
      3. Use and create swatches
      4. Adjust colors
      5. Use the Adobe Color Themes panel
      6. Color groups (harmonies)
      7. Color Themes panel
      8. Recolor your artwork
    4. Painting
      1. About painting
      2. Paint with fills and strokes
      3. Live Paint groups
      4. Gradients
      5. Brushes
      6. Transparency and blending modes
      7. Apply stroke on an object
      8. Create and edit patterns
      9. Meshes
      10. Patterns
    5. Select and arrange objects
      1. Select objects
      2. Layers
      3. Group and expand objects
      4. Move, align, and distribute objects
      5. Stack objects    
      6. Lock, hide, and delete objects
      7. Copy and duplicate objects
      8. Rotate and reflect objects
      9. Intertwine objects
      10. Create realistic art mockups
    6. Reshape objects
      1. Crop images
      2. Transform objects
      3. Combine objects
      4. Cut, divide, and trim objects
      5. Puppet Warp
      6. Scale, shear, and distort objects
      7. Blend objects
      8. Reshape using envelopes
      9. Reshape objects with effects
      10. Build new shapes with Shaper and Shape Builder tools
      11. Work with Live Corners
      12. Enhanced reshape workflows with touch support
      13. Edit clipping masks
      14. Live shapes
      15. Create shapes using the Shape Builder tool
      16. Global editing
    7. Type
      1. Add text and work with type objects
      2. Create bulleted and numbered lists
      3. Manage text area
      4. Fonts and typography
      5. Convert text within images into editable text
      6. Add basic formatting to text
      7. Add advanced formatting to text
      8. Import and export text
      9. Format paragraphs
      10. Special characters
      11. Create type on a path
      12. Character and paragraph styles
      13. Tabs
      14. Find missing fonts (Typekit workflow)
      15. Arabic and Hebrew type
      16. Fonts | FAQ and troubleshooting tips
      17. Create 3D text effect
      18. Creative typography designs
      19. Scale and rotate type
      20. Line and character spacing
      21. Hyphenation and line breaks
      22. Spelling and language dictionaries
      23. Format Asian characters
      24. Composers for Asian scripts
      25. Create text designs with blend objects
      26. Create a text poster using Image Trace
    8. Create special effects
      1. Work with effects
      2. Graphic styles
      3. Appearance attributes
      4. Create sketches and mosaics
      5. Drop shadows, glows, and feathering
      6. Summary of effects
    9. Web graphics
      1. Best practices for creating web graphics
      2. Graphs
      3. SVG
      4. Slices and image maps
  7. Import, export, and save
    1. Import
      1. Place multiple files
      2. Manage linked and embedded files
      3. Links information
      4. Unembed images
      5. Import artwork from Photoshop
      6. Import bitmap images
      7. Import Adobe PDF files
      8. Import EPS, DCS, and AutoCAD files
    2. Creative Cloud Libraries in Illustrator 
      1. Creative Cloud Libraries in Illustrator
    3. Save
      1. Save artwork
    4. Export
      1. Use Illustrator artwork in Photoshop
      2. Export artwork
      3. Collect assets and export in batches
      4. Package files
      5. Create Adobe PDF files
      6. Extract CSS | Illustrator CC
      7. Adobe PDF options
      8. Document info panel
  8. Printing
    1. Prepare for printing
      1. Set up documents for printing
      2. Change the page size and orientation
      3. Specify crop marks for trimming or aligning
      4. Get started with large canvas
    2. Printing
      1. Overprint
      2. Print with color management
      3. PostScript printing
      4. Print presets
      5. Printer's marks and bleeds
      6. Print and save transparent artwork
      7. Trapping
      8. Print color separations
      9. Print gradients, meshes, and color blends
      10. White Overprint
  9. Automate tasks
    1. Data merge using the Variables panel
    2. Automation with scripts
    3. Automation with actions
  10. Troubleshooting 
    1. Known issues
    2. Crash issues
    3. Recover files after crash
    4. File issues
    5. Supported file formats
    6. GPU device driver issues
    7. Wacom device issues
    8. DLL file issues
    9. Memory issues
    10. Preferences file issues
    11. Font issues
    12. Printer issues
    13. Share crash report with Adobe
    14. Improve Illustrator performance

Illustrator provides a variety of tools for creating layout for web pages, or creating and optimizing web graphics. For example, use web-safe colors, balance image quality with file size, and choose the best file format for your graphic. Web graphics can take advantage of slices and image maps, and you can use a variety of optimization options to ensure your files display well on the web.

About web graphics

When designing graphics for the web, you must consider different issues than when designing graphics for print. 

To help you make informed decisions about web graphics, keep in mind the following three guidelines:

Use web‑safe colors.

Color is often a key aspect of artwork. However, the colors you see on your artboard aren’t necessarily the colors that will appear in a web browser on someone else’s system. You can prevent dithering (the method of simulating unavailable colors) and other color problems by taking two precautionary steps when creating web graphics. First, always work in RGB color mode. Second, use a web-safe color.

Balance image quality with file size.

Creating small graphics file sizes is essential to distributing images on the web. With smaller file sizes, web servers can store and transmit images more efficiently, and viewers can download images more quickly. You can view the size and the estimated download time for a web graphic in the Save For Web & Devices dialog box.

Choose the best file format for your graphic.

Different types of graphics need to be saved in different file formats to display their best and create a file size suitable for the web. For more information on specific formats, see Web graphics optimization options.


There are many Illustrator templates made specifically for the web, including web pages and banners. Choose File > New From Template to choose a template.

About pixel preview mode

To enable web designers to create pixel accurate designs, the pixel-aligned property has been added in Illustrator. When the pixel-aligned property is enabled for an object, all the horizontal and vertical segments in the object get aligned to the pixel grid, which provides a crisp appearance to strokes. On any transformation, as long as this property is set for the object, it gets realigned to the pixel grid according to its new coordinates. You can enable this property by selecting the Align to Pixel Grid option from the Transform panel. Illustrator also provides the Align New Objects to Pixel Grid option at the document level, which is enabled by default for Web documents. With this property enabled, any new objects that you draw have the pixel-aligned property set by default.

For more information, see Drawing pixel-aligned paths for web workflows.

When you save artwork in a bitmap format, such as JPEG, GIF, or PNG, Illustrator rasterizes the artwork at 72 pixels per inch. You can preview how objects will appear when rasterized by choosing View > Pixel Preview. This is especially helpful when you want to control the precise placement, size, and anti-aliasing of objects in a rasterized graphic .

To understand how Illustrator divides objects into pixels, open a file that contains vector objects, choose View > Pixel Preview, and magnify the artwork so that you can see its individual pixels. The placement of pixels is determined by the pixel grid that divides the artboard into 1‑point (1/72 inch) increments. You can view the pixel grid if you zoom in to 600% view. If you move, add, or transform an object, the object snaps to the pixel grid. As a result, any anti-aliasing along the “snapped” edges of the object (usually the left and top edges) disappears. Now deselect the View > Snap To Pixel command, and move the object. This time, you’ll be able to position the object between the grid lines. Notice how this affects the anti-aliasing of the object. As you can see, making very minor adjustments can affect how the object is rasterized.

Pixel Preview off (top) compared to on (bottom)
Pixel Preview off (top) compared to on (bottom)


The pixel grid is sensitive to the ruler origin (0,0). Moving the origin of the ruler will change how Illustrator rasterizes artwork.

Tips for creating Illustrator images for mobile devices

To optimize graphical content for mobile devices, save artwork created in Illustrator in any SVG format, including SVG‑t, which is especially designed for mobile devices.

Use the following tips to ensure that images created in Illustrator display well on mobile devices:

  • Use the SVG standard to create content. Using SVG to publish vector graphics on mobile devices results in a small file size, display independence, superior color control, zooming ability, and editable text (within the source code). Also, because SVG is XML-based, you can incorporate interactivity into images, such as highlighting, tool tips, special effects, audio, and animation.

  • Work within the final dimensions of your target mobile device(s) from the beginning. Although SVG is scalable, working within the correct size will ensure that final graphics are optimized in quality and size for the target device(s).

  • Set Illustrator color mode to RGB. SVG is viewed on RGB raster display devices, such as a monitor.

  • To reduce file size, try reducing the number of objects (including groups) or making it less complex (fewer points). Using fewer points significantly reduces the amount of textual information needed to describe the artwork in the SVG file. To reduce points, select Object > Path > Simplify and try different combinations to find a balance between quality and number of points.

  • Use symbols when possible. Symbols define the vectors that describe an object once, instead of multiple times. This is useful if artwork contains objects like button backgrounds that are reused.

  • When animating graphics, limit the number of objects used and try to reuse objects whenever possible to reduce file size. Apply animations to groups of objects instead of to individual objects to avoid code repetition.

  • Consider using SVGZ, the compressed gzipped version of SVG. Compression can reduce file size dramatically, depending on the content. Text can usually be heavily compressed, but binary-encoded content, such as embedded rasters (JPEG, PNG, or GIF files), cannot be compressed significantly. SVGZ files can be uncompressed by any application that expands files compressed with gzip. To use SGVZ successfully, check that your target mobile device can decompress gzip files.


Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online