R093 · 06 Website Assets

Images, text, audio, video and interactive elements used to build effective websites.

← Back to iMedia Genius Hub
Assets used on websites such as images, buttons, icons and media

Website assets include all of the individual items that make up a site: images, text, icons, buttons, audio, video, animations and downloadable files. Choosing the right assets and optimising them is vital for usability and performance.

What are Website Assets?

Website assets are the building blocks of a web page. They include logos, navigation icons, photographs, illustrations, background images, text content, buttons, audio clips, embedded videos, animations and downloadable resources such as PDFs.

Assets must be suitable for the target audience and purpose of the site, and they must also be stored in appropriate file formats and resolutions so that pages load quickly and look good on different devices.

Key points you must remember

Website Assets at a Glance

These infographics summarise the main types of website asset and how to prepare them so pages look professional and load quickly on different devices.

Types of Website Asset

The building blocks that appear on a web page.

  • Images: logos, hero images, icons, product photos, background graphics.
  • Text: headings, body copy, buttons, navigation labels and captions.
  • Media: embedded video clips, audio players and animations.
  • Interactive elements: menus, buttons, forms, carousels and accordions.
  • Downloads: PDFs, brochures, worksheets and other resource files.
  • Branding assets: colour scheme, fonts and repeated graphic elements.
Images · Text · Media · Downloads

Optimising Website Assets

Choices that affect quality, performance and accessibility.

  • Choose suitable file formats (e.g. PNG/SVG for logos, JPEG/WebP for photos, MP4 for video).
  • Use compression to reduce file size so pages load quickly.
  • Export images at an appropriate resolution for desktop and mobile screens.
  • Add clear alt text and captions to support accessibility and SEO.
  • Keep filenames and folder structure organised so assets are easy to update.
  • Test pages on different devices and connection speeds to check performance.
Formats · Compression · Accessibility

iMedia Matters Podcast

Flashcards & Mind Maps

For flash cards and mind maps, use our NotebookLM for this topic. It includes quick-fire revision prompts and visual links between key ideas.

📘 Open NotebookLM for Website Assets

Games to Practise Website Assets

Use these games to practise choosing suitable assets, selecting formats and planning pre-production documents for web projects.

Pre-production

Document Doctor

Choose the right planning document for each task and identify key components: mood boards, storyboards, scripts, wireframes and more.

MCQs Planning docs Components
Product design

Media Codes Challenge

Identify technical, symbolic and written codes in media examples and explain how they create meaning, impact and engagement.

Explain Codes & conventions Camera · Audio · Colour
Mega game · File types

File Types Forge

Tackle scenarios on images, audio and video to pick the best file format and compression (lossy or lossless) for each client brief.

Mega game Formats Compression
Website assets

Website Asset Inspector

Inspect mock web pages for problems with images, filenames, resolution and optimisation for different devices.

Arcade quiz Website assets Optimisation

Exam Practice – Website Assets

Q1. State one type of asset that could be used on a school website. (1 mark)

Technique: Give a clear, specific example such as a logo, navigation icon, photo gallery image or embedded video.

Q2. Explain one reason why images for a website should be compressed. (2 marks)

Technique: Make one point about file size or loading speed, then explain how this affects the user experience.

Example structure: “Images should be compressed because… This means that…”

Q3. Describe one way alt text can improve a website. (3 marks)

Technique: Describe what alt text is, then develop your answer by explaining how it helps users with screen readers and can support SEO.

Q4. Explain two factors a designer should consider when choosing images for a charity website homepage. (4 marks)

Technique: Give two separate factors (e.g. relevance, resolution, tone, diversity, file size). For each one, explain how it affects the audience’s response or the performance of the site.

Q5. A designer is creating a website for a new eco-friendly clothing brand. Discuss how they should select and prepare website assets so the site looks professional and loads quickly on mobile devices. (9 marks)

Technique: Cover choice of images, logos, icons, colour scheme, fonts and media, as well as file types, compression and responsive design. Reach a justified conclusion.

  • Paragraph 1–2: Choosing suitable images, logo style, icons and text content.
  • Paragraph 3: File formats and compression for images, audio and video.
  • Paragraph 4: Accessibility (alt text, contrast) and mobile responsiveness.
  • Final paragraph: Conclusion – which decisions are most important and why.

Can You Now…?