Why this matters
Images and video are often the largest files on a page. They also trigger layout shift when the browser does not know how much space to reserve.
Fixing media after upload is possible, but it is slower and more expensive than doing it right up front.
Before you upload an image
1) Choose the right dimensions
Do not upload a 4000 pixel photo to display it at 600 pixels wide.
- Decide the largest display size the image will need on your site.
- Export to that size, plus a sensible high density option if needed.
- Avoid oversized images that waste bandwidth on mobile.
2) Compress it properly
Compression is not optional. It is the easiest performance win you will ever get.
- Export JPG for photos where needed, with sensible quality settings.
- Export PNG only when you need transparency or sharp pixel edges.
- Use modern formats when available through your site pipeline.
- Avoid uploading camera originals.
3) Make it responsive
Your users have different screen sizes and different connection speeds. Serve the right size for the device.
- Provide multiple sizes so small screens do not download desktop assets.
- Use a clear rule for breakpoints and image widths.
- Avoid one size fits all images across every page type.
4) Prevent layout shift
Layout shift happens when media loads and pushes content around. It causes misclicks and frustration.
- Always include width and height so the browser reserves space.
- Keep aspect ratios consistent across a gallery grid.
- Do not inject banners above content after load.
5) Write useful alt text
Alt text is part of performance too. It is a fallback for when images do not load, and it supports users using assistive technology.
- Describe the purpose of the image, not every pixel detail.
- Keep it short.
- Skip alt text for decorative images where it adds no value.
Before you upload video
1) Decide if video belongs on the page
Video can improve engagement. It can also destroy landing page speed if it is used as a hero background.
- Put video where it supports a decision, such as explaining a service or showing a result.
- Avoid autoplay background video on high traffic landing pages.
- Consider a short clip and a still image instead of long video.
2) Use a poster image
A poster image gives the user something useful immediately, without loading the full video.
- Choose a clear frame that communicates what the video is about.
- Compress the poster image like any other image.
- Ensure the poster does not cause layout shift.
3) Control loading
Do not load heavy video assets before the user decides to watch.
- Load video on interaction where appropriate.
- Avoid loading multiple videos on one page.
- Prefer hosted video solutions that support adaptive streaming when needed.
4) Provide captions or transcripts
Video accessibility matters. It also supports people in noisy environments and people who do not want to play audio.
- Provide captions for spoken content.
- Provide transcripts for longer or information-heavy content.
- Avoid conveying key information through visuals only.
A simple media policy for small teams
Policies remove guesswork and keep content consistent.
- Set maximum image widths per page type.
- Define acceptable formats and when to use them.
- Define minimum compression rules.
- Require width and height for all media.
- Define when video is allowed and how it loads.
Next step
If your site feels slow, start by auditing media on the top landing pages. Reducing image weight and preventing layout shift often delivers the fastest improvements.