Media Library & Images

By the end of this lesson you will upload images the right way, write alt text that helps every visitor, and understand the extra image sizes WordPress creates. You will also learn why a 6 MB phone photo can slow down your whole site, and how to avoid it.

What is the Media Library?

The Media Library is the store room for every file you upload: photos, logos, PDFs, audio and video. Open it from Media > Library. Each file you upload is called an attachment.

Think of it as the photo album and file cabinet of your site. You keep a file once in the cabinet, and then you can use it on many pages.

The library has two views:

• Grid view: thumbnails, good for finding photos by sight.
• List view: a table with file name, author, the page it is attached to and the date. Good for tidying up.

Uploading a file, step by step

Step 1: Go to Media > Add New Media File (or drag files straight onto the Media Library screen).

Step 2: Choose a photo, for example classroom-batch-2026.jpg.

Step 3: When the upload finishes, click the thumbnail. A details panel opens on the right.

Step 4: Fill in Alternative Text, for example "Twenty students in a bright classroom solving maths problems".

Step 5: Copy the File URL if you need to share the image directly.

You can also upload while editing: insert an Image block and click Upload, or pick an existing file with Media Library.

The largest file you can upload is shown on the upload screen as "Maximum upload file size". Your host sets this limit, not WordPress. If you need more, ask your host or change the PHP settings in your hosting panel.

Alt text, captions and titles

Each image has a few text fields. They have different jobs:

Alt text is the most important. A blind student using a screen reader hears it read aloud. Good alt text describes the picture as you would to a friend on the phone. For a purely decorative image, such as a background swirl, leave alt text empty so screen readers skip it.

<!-- Helpful alt text -->
<img src="topper-priya.jpg" alt="Priya holding her Class 12 mark sheet with 96 percent">

<!-- Not helpful -->
<img src="topper-priya.jpg" alt="image1">

Image sizes WordPress creates

When you upload one image, WordPress quietly makes several smaller copies. This way a phone can download a small version and a big screen gets a large one.

You can change the first three under Settings > Media. Also, if you upload a very large photo (more than 2560 pixels wide or tall), WordPress keeps the original but creates a scaled version and uses that instead. You will see -scaled in the file name.

srcset: the browser picks the right size

When WordPress outputs an image, it lists all the sizes in an attribute called srcset. The browser then chooses the best one for the screen. Developers can output an image in PHP like this:

<?php
// 42 is the attachment ID from the Media Library
echo wp_get_attachment_image( 42, 'large' );

The HTML it prints looks roughly like this (shortened, with line breaks added):

<img width="1024" height="683"
  src="https://brightfuture.in/wp-content/uploads/2026/11/classroom-batch-2026-1024x683.jpg"
  class="attachment-large size-large" alt="Twenty students in a bright classroom solving maths problems"
  decoding="async" loading="lazy"
  srcset=".../classroom-batch-2026-1024x683.jpg 1024w, .../classroom-batch-2026-300x200.jpg 300w, .../classroom-batch-2026-768x512.jpg 768w"
  sizes="auto, (max-width: 1024px) 100vw, 1024px">

Notice three helpful things: width and height stop the page from jumping while the image loads, loading="lazy" delays off-screen images, and srcset offers smaller files. Learn more about these attributes in the HTML course.

Themes can add their own size. This creates a 600 x 400 cropped size for course cards:

<?php
add_action( 'after_setup_theme', function () {
    add_image_size( 'course-card', 600, 400, true ); // true = crop to exact size
} );

New sizes only apply to images uploaded after the code is added. Old images need their sizes regenerated, for example with WP-CLI: wp media regenerate.

Keep uploads small

Phone cameras produce photos of 4 to 8 MB. A page with ten of those is like asking visitors on mobile data to download a film. Before uploading:

1. Step 1: Resize the photo so its longest side is around 1600 to 2000 pixels. A banner rarely needs more.
2. Step 2: Save it as WebP or a good-quality JPEG. WordPress supports WebP and also AVIF, if the server's image library supports them.
3. Step 3: Give the file a clear name, such as rohtak-coaching-classroom.webp, not IMG_20261102_0931.jpg.

You will learn about automatic compression plugins in Performance: Caching & Images.

Files and videos

You can upload PDFs, such as a fee structure or a timetable, and link to them with the File block. For video, upload to YouTube or Vimeo and paste the link into the editor: WordPress turns it into an embedded player. Video files are large, and most shared hosting is not built to stream them.

Common mistakes

• Uploading huge photos straight from the phone. Resize first; it is the single biggest speed fix on small sites.
• Using alt text for keywords. "best coaching Rohtak cheap coaching" helps nobody. Describe the image.
• Deleting an image that is still used. WordPress does not warn you everywhere. The page then shows a broken image.
• Uploading private documents. Files in uploads are public to anyone with the link, even if not linked anywhere. Never upload ID cards or mark sheets of students.

Key points

• The Media Library stores uploads; each file is an attachment you can reuse on many pages.
• Alt text describes an image for screen readers and search engines; leave it empty for decorative images.
• WordPress creates several sizes of each image and lists them in srcset so browsers choose wisely.
• Very large uploads are scaled down automatically and get -scaled in the name.
• Resize and compress photos before uploading; prefer WebP for photos.
• Files in the uploads folder are public, so never upload private documents.

<?php
add_action( 'after_setup_theme', function () {
    add_image_size( 'gallery-square', 500, 500, true );
} );