1.3Media: images, galleries & optimisation
The essentials in 30 seconds
- The media library centralises images, PDFs and videos; you reuse them without uploading twice.
- Resize before uploading and compress: a raw photo of several MB is the first cause of slowness.
- Always fill in the alt text (alt): accessibility for screen readers and search engine optimisation.
Running mini-case — Hassan's photos
Hassan sends photos of vases taken on a smartphone, sometimes 6 MB each. Samir has to publish them in a gallery without making the site slow. He shows Hassan how to resize, compress and describe the images. He takes the opportunity to explain alt text: useful for visually impaired people and for Google Images.
Sequel to case 1.2 — the page exists, now it needs proper illustrations.
1. Managing media
The media library (Media → Library) stores all the site's files: images, PDFs, videos. When inserting an image into a post or a page, you can upload it or choose it from the library — reusing avoids duplicates and lightens storage. The Image block handles a single image, the Gallery block assembles several visuals with an adjustable number of columns.
For each image, the alt text describes what it shows. It is read by screen readers and taken into account by search engines. "Blue glazed stoneware vase" is useful; "image1.jpg" is not. Samir makes this a rule for all the workshop's photos.
2. Optimising weight
A smartphone photo can weigh 5 to 8 MB while the display needs only a fraction of that. The first reflex is to resize to a useful width (often 1600 to 2000 px maximum) before uploading, then compress the image. The WebP format reduces the weight further at comparable quality; plugins such as ShortPixel or Imagify automate compression and conversion.
WordPress enables lazy loading natively: images off screen load only as they come into view, which speeds up the initial display. Samir checks the weight before and after and keeps clear file names, useful for organisation and SEO.
🔎 Concrete example — Preparing the workshop's photos (Samir's case)
Raw photo: 4032 px, 6.2 MB.
1. Resize to 1600 px wide.
2. Compress (quality 80) → 240 KB.
3. Upload to Media.
4. Alt: "Blue glazed stoneware vase, Atlas collection".
→ Gallery of 4 photos, fast loading.Result: a sharp visual for a weight divided by twenty.
Lesson: perceived quality does not depend on the file weight.
Section vocabulary
- Media library
- Centralised storage of the site's files, reusable in all content.
Simple example: Samir reuses a photo already uploaded for two pages.
What it is not: uploading the same image ten times.
Reflex: one file, several uses.
- Alt text (alt)
- A description of an image, read by screen readers and used by search engines.
Simple example: "Hand-thrown ceramic bowl".
What it is not: leaving "image1.jpg" as the description.
Reflex: no image without a useful alt.
- Image optimisation
- Reducing weight without visible loss: resize and compress before uploading.
Simple example: 6 MB brought down to 240 KB.
What it is not: uploading the raw smartphone photo.
Reflex: light = fast = better ranked.
- WebP
- Modern format lighter than JPEG/PNG at equal quality.
Simple example: the workshop's photos converted to WebP.
What it is not: keeping heavy PNGs for photos.
Reflex: photos → WebP if possible.
- Lazy loading
- Deferred loading of off-screen images, native in WordPress.
Simple example: the photos at the bottom of the gallery load only on scroll.
What it is not: disabling lazy loading for no reason.
Reflex: free speed gain.
In practice — Inserting images without weighing down the site
- Resize a photo to 1600 px wide on your computer.
- Upload it to Media and insert it with the Image block, filling in a descriptive alt.
- Create a gallery of 3 or 4 images and set the number of columns.
- Install a compression plugin, run the optimisation and compare the weight before and after.
Ready-to-say script — explaining optimisation (25s)
"I prepare your photos before putting them online: they stay sharp but weigh much less, so the site displays fast, even on a phone. I also describe each image for visually impaired people and for Google."
Talk about the speed the client experiences, not kilobytes.
Copy-paste template — image sheet
FILE: _______________
WIDTH AFTER RESIZING: _______________
WEIGHT BEFORE / AFTER: _______________ / _______________
FORMAT: WebP / JPEG / PNG
ALT TEXT: _______________
INSERTION PAGE: _______________Product gallery
Square images, WebP, precise alt with the name of the piece.
Atmosphere photo
Large header image compressed and loaded first.
Logo
Light PNG or SVG, alt with the workshop's name.
PDF documents
Compress PDFs too; name them clearly before uploading.
✓ Best practices
- Resize and compress before any upload.
- Write a descriptive alt for every image.
- Reuse existing media instead of duplicating it.
✗ Common pitfalls
- Uploading raw smartphone photos.
- Leaving the alt text empty.
- Uploading the same image several times.
Key takeaways
- The library centralises and reuses files.
- Resize + compress = fast site.
- Alt text serves accessibility and SEO.
- WebP and lazy loading lighten loading further.
48h Challenge — apply tomorrow
Take three photos: resize them, compress them and write their alt text. Insert them into a gallery and compare the total weight before and after. 20 minutes.
- I manage the media library.
- I optimise an image before uploading it.
- I fill in a useful alt text.
Frequently asked questions
What size and format for my images?
A width suited to the display (rarely more than 1600-2000 px), in WebP if possible, otherwise JPEG for photos and PNG for logos with transparency. A compression plugin automates conversion and resizing.
Can I reuse an image already uploaded?
Yes: the library keeps everything. When inserting, choose "Media library" rather than "Upload" to avoid duplicates that weigh down storage.
Is alt text mandatory?
Technically no, but strongly recommended: it makes the site accessible to screen readers and helps search engines understand the image. For a shop, it can also capture traffic on Google Images.
Hassan sends a 6 MB photo of a vase taken on a smartphone. What does Samir do before uploading it?