Skip to main content
Green binary audience decorative image for WebBuild

Working with Images and Graphics

Explore free image resources, recommended editors, and essential tips for using, editing, and optimizing graphics for the web.

Module 5 - Lesson 1

Working with Images and Graphics

Play

High-quality graphics are crucial in today’s online world. In this lesson, learn where to find free image resources, how to edit graphics, and best practices for web optimization.

Best Photo Resources

Great Free Image Resources

Christian Images

Other Sites

Windows / Mac

Mac

Online

  • Canva: User-friendly online editor.

Image Types and Advice

  • JPEG (JPG): Great for web use but doesn’t support transparency.
  • PNG: Best for smaller transparent graphics; avoid for large photos.
  • SVG: Vector format with no resolution issues; secure usage with plugins like “Safe SVG”.
  • Avoid TIFF or RAW formats for web use; export to JPEG instead.
  • Optimize image sizes:
    • Full-page images: Max 1600px width.
    • Background images: High compression JPEGs.

Basic Image Editing Skills

  • Understanding layers.
  • Adding text.
  • Cropping and editing.
  • Combining layers.
  • Erasing backgrounds.
  • Creating transparent images.
  • Working with vectors.

By mastering these resources and techniques, you’ll create stunning graphics that enhance your online presence while keeping performance optimized.