Media asset governance: naming, compressing, and reusing images and videos

Bottom line first: The media library is the asset that spins out of control fastest on an overseas site. Two years after launch, a site’s media library usually holds between 800 and 3,000 files, and 30% to 50% of them have never been referenced on any page. Governance takes just three things: naming rules, a size baseline, and a quarterly audit. The first two are done once; the third takes two hours every quarter.

1. Set rules for file names first — this is the cheapest layer of governance

A media library doesn’t fall apart in a day. It starts with the first IMG_2043.jpg and by the time you need to swap out a product image, or a customer asks where a photo’s license came from, nobody can say.

Four signs of trouble, each with a different cost:

Sign of trouble	What it looks like	Cost
File names carry no meaning	A pile of dates and numbers	Nothing is searchable; you hunt by eye when replacing
Version chaos	Three versions of the same file name	The wrong one goes live
Unreferenced files pile up	Uploaded but never used	Eats storage, slows backups, makes migration heavier
License source unclear	No idea where the image came from	No evidence when a customer or platform complains

Naming rules need only four fields, joined in order with hyphens: category, model, scene, version.

Field	How it’s written	Example	Description
Category	Lowercase English word	cnc-machine	Matches your product categories; don’t invent words
Model	Keep as-is, all uppercase or all lowercase	gx-620	Exactly matches the model on the product page
Scenario	3 to 5 lowercase English words	workshop-install-02	Describes the content, not how the designer felt
Version	Two digits	v02	Only increments on a substantive change

Side by side, the difference between two naming approaches on the same image is clear:

Naming approach	File name	Searchability	Migration safety
Camera default	IMG_2043.jpg	Content can’t be judged from the file name	Renaming breaks links; high risk
Standard naming	cnc-machine-gx620-workshop-install-v02.webp	Can be located by file name	Has a version number; replacements don’t collide

One companion requirement of naming rules is easy to overlook:once a file name goes live, don’t change it. Changing a file name changes the URL, and the old address stops working. When you need to replace content, generate a new file with an incremented version number, update the page reference, and keep a redirect rule for the old file name. crater lists the media naming standard as a must-confirm item before launch in its /site/ delivery checklist, precisely because this layer is the cheapest to change but the most painful to fix after the fact.

2. Size and format: set the baseline before talking about compression

“The image is too big” isn’t actionable. You need actual numbers. The baseline table below can go straight into your spec document: set a target file size for each display width.

Image use	Display width	Target file size	Recommended format
Hero image	1,600 to 1,920 px	150 to 300 KB	WebP or AVIF
In-body image	800 to 1,200 px	60 to 150 KB	WebP
Product thumbnail	400 to 600 px	20 to 60 KB	WebP
Icons and line art	Any size, scaled as needed	5 to 20 KB	SVG
Images with transparency	Up to 800 px	40 to 120 KB	WebP or PNG

Don’t apply one format across the board. Each of the five common formats has its place:

Format	Compression	Transparency	Use cases	Where to avoid it
JPEG	Medium	Not supported	Photos that need maximum compatibility	Line art, screenshots
WebP	High	Support	The workhorse for photos and product images	Large hero images that need extreme compression
AVIF	Highest	Support	Hero images, high-quality photos	Cases that need to support older browsers
PNG	Low	Support	Screenshots and line art that must stay lossless	Photos, where file size multiplies
SVG	Highest	Built in	Icons, flowcharts, simple line drawings	Complex photos

Responsive images are another must-do. Serving different sizes of the same image to phones and desktops can cut more than half your traffic:

Breakpoint	Viewport width	Recommended served width	Description
Phone	Under 768 px	640 px	Don’t serve desktop sizes
Tablet	768 to 1,024 px	1,024 px	Works in both orientations
Desktop	1,024 to 1,600 px	1,600 px	The main tier for most pages
Large screen	Over 1,600 px	1,920 px	Only for the hero image

Video needs its own rules. Don’t put video files directly in the hero slot, and don’t self-host hero background video:

Video use	Where to host it	Reason
Product demos, installation tutorials	Third-party video platform, embedded in the page	Saves bandwidth, comes with a player and captions
Trade show highlights, company profile	Third-party video platform, embedded in the page	Earns backlinks and referral traffic
Hero background motion	Replace with a static image plus lightweight animation	Video slows down first render significantly
Operation demos under 10 seconds	Convert to an animated image or image sequence	Usually smaller than video

When this layer doesn’t apply: If your site mainly serves visitors on high-bandwidth networks who are mostly on desktop (say, industrial equipment buyers checking from the office), compressing the hero image below 150 KB actually costs you sharpness and makes spec plates harder to read. In that case you can relax the limit to 300 to 400 KB and prioritize keeping text and markings legible. The rule of thumb: when visitors need to read fine text in the image, sharpness beats file size.

3. Metadata: alt text states facts, title and captions each do their job

The most commonly botched piece of image metadata is alt text. It serves two purposes: it stands in for the image when it fails to load, and it tells screen readers and search engines what the image shows. The core rule is to describe what is actually there, not to stuff in keywords.

How it’s written	Example	Verdict
Keyword stuffing	cnc machine cnc machining china cnc factory	Reads as keyword stuffing, describes nothing
Leaving it blank	None	Throws away a spot for information
Describe what is there	CNC machining center with spindle assembly underway on the shop floor	Correct, stands on its own
Includes model and setting	GX-620 CNC machining center assembly line, on the shop floor	Correct, and more informative

Each of the three attributes does its own job, so don’t mix them up: alt describes what is in the image, title only appears on mouse hover and has almost no effect on search, and captions add how the image relates to the body text.

Attribute	Where it shows	Effect on search	Suggested length
alt	When the image fails to load, and in screen readers	Yes, as a signal of image content	15 to 40 characters
title	Tooltip on mouse hover	Minimal, not worth worrying about	Can be omitted
Caption	Usually shown below the image	Yes, as part of the body text	20 to 60 characters

EXIF data needs to be stripped, and this is not a formatting issue but a compliance one:

EXIF field	Risk	Handling
GPS coordinates	Leaks the exact location of the factory and shop floor	Always erase before uploading
Camera and serial number	Can be traced back to a specific device and person	Best to erase
Date taken	Usually harmless	Can keep
Copyright and author fields	Can serve as proof of licensing	Keep your company information

Stripping metadata takes no technical skill, and most image tools have a batch option to remove it, at the cost of a few extra seconds before each upload. But once a single on-site photo with GPS data goes public, what leaks is the location of your factory, and that damage cannot be undone.

4. Lazy loading has limits: the first-screen image must not be lazy loaded

Lazy loading saves bandwidth, but used in the wrong place it directly slows down the first screen. The rule is clear:Do not lazy load images in the visible first-screen area, especially the main image that determines your first-screen rendering metric.

Element	Lazy load?	Why
Hero image	No, and set it to high priority	It is what the first-screen rendering metric is calculated on
Product thumbnails within the first screen	No	Enter the viewport at the same time as the main image
Photos on the second screen and beyond	Yes	Not in the initial viewport
Small images in the footer and sidebar	Yes	Usually require scrolling to become visible
Embedded video	Yes, use a placeholder image	Embedding it directly loads a lot of scripts

One more thing that is easy to overlook: images must have fixed width and height. Without them, the browser cannot reserve space before the image loads, so the page jumps around repeatedly while loading, and a paragraph the user is reading suddenly shifts down, which is especially noticeable on mobile. You can track this with the layout shift metric; well-controlled sites usually keep it under 0.1.

5. Copyright and licensing: four sources of assets, four sets of requirements

The riskiest part of media assets isn’t the technology, it’s the licensing. Four sources, four completely different sets of requirements:

Source material	What you need	Common risks
Stock downloads	License scope documentation and download records	Use beyond the license scope, such as in resale materials
Shoots at customer sites	Written customer authorization stating the purpose and term	Using the customer’s production line without authorization, leading to complaints
Product images from suppliers	Written supplier consent to use	The supplier also sells to competitors, so the same image shows up elsewhere
AI-generated images	Record the generation tool and the generation date	Generated content closely resembles someone else’s work

Customer site photos are the easiest category to overlook. The authorization letter doesn’t need to be complicated; spelling out three things is enough: scope of use (website, social media, print materials), term of use, and whether the production line and equipment nameplates may appear. Also watch for third-party content that may show up in the frame:

On-screen element	Risk	Handling
Recognizable brand marks	May create trademark use disputes	Avoid during the shoot or fix in post
Recognizable employee faces	Involves personal likeness rights	Get the person’s consent or blur the face
Process details of the customer’s production line	May involve the customer’s business information	Ask the customer to confirm before publishing
Competitor equipment nameplates	Easily misread as a partnership	Keep out of frame at all times

The boundaries for using AI-generated images should also be written into the guidelines. The safe approach: use them for concept illustrations, scene imagery, and abstract graphics; don’t use them where you need to prove something is real, such as actual factory photos, inspection reports, certification certificates, or product photos. The risk with the former is “it looks fake”; the risk with the latter is “being accused of faking it.” They are different in nature.

6. Reuse matrix and governance cadence

The output of one shoot should cover five channels, not just go on the website once and then get tossed into the media library. Setting crop sizes in advance saves you from resizing images at the last minute every time.

Channel	Common sizes	Crop ratio	Notes
Website hero	1,600 to 1,920 pixels wide	16:9 or 21:9	Place the subject slightly left of center
Website body images	800 to 1,200 pixels wide	4:3 or 16:9	Leave room for captions
Email newsletter	600 pixels wide	3:2	Consider a pure white background
Social posts	1,200 pixels wide	One set each at 1:1 and 4:5	Compose vertical versions separately
Trade shows and quotes	300 resolution for print	By layout	Save a separate copy of the original file

Run governance quarterly, two hours each time, three tasks:

Cycle	Action	Test
Quarterly	Check the list of unreferenced files	Files unreferenced for two consecutive quarters become cleanup candidates
Quarterly	Naming convention audit	Spot-check 50 newly uploaded files; naming compliance must be at least 90%
Quarterly	Large file review	Confirm one by one whether images over 500 KB each are necessary
Every six months	License documentation review	Confirm one by one that documentation for customer site photos and stock images is still valid
Annually	Archiving and migration drill	The media library can be fully exported and restored in a test environment

Cleanup rules must be hard-coded to avoid “delete it if it seems useless”:

File status	Condition	What to do
In use	Currently referenced by at least one page	Keep and track in version control
Watch	Not referenced for two consecutive quarters, but has licensing documentation	Move to the archive folder; do not delete
Safe to delete	Not referenced, and no licensing documentation or unknown source	Delete after confirming there are no external links
Must keep	Appears in print materials, quotes, or trade show panels	Keep the original file even if the site doesn’t reference it

The last row is often overlooked. A photo gets pulled from the website, but it’s still printed in the brochure and on the trade show panel, and you may need it again next year. Delete it and you’ll have to reshoot. Cleanup decisions can’t rely on “is it referenced on the website” alone; you also need to ask “is it still in use off-site.”

One caveat: if your site’s media library has fewer than 200 files and you add no more than 20 per month, you can simplify the process above. Just do two things: naming conventions and a large-file audit, and switch the quarterly review to twice a year. Governance should match the scale of your assets. Don’t build process for process’s sake. For how images relate to page performance, see /insight/ and the performance-related cleanup there.

FAQ

Do I need to convert all images to WebP?

Not all of them, but WebP should become your primary format. The approach: keep the original files (usually lossless formats), output WebP for everything that goes live, and keep a JPEG fallback for the rare spots that need maximum compatibility. Use PNG only for screenshots and line art that require lossless quality. Don’t use PNG for photos; the file size will be several times larger. Watch the quality settings when converting. Some tools default to low quality; the parameter is usually called quality or compression level. Before going live, pull three images from each use case and compare them.

What’s a good file size for a product image?

Set tiers by display width instead of one number for everything. Thumbnails: 400 to 600 pixels wide, 20 to 60 KB. Main product detail images: 1,600 to 1,920 pixels wide, 150 to 300 KB. Product images with transparent backgrounds: under 800 pixels, 40 to 120 KB. The test is whether visitors can read the product nameplate and scale markings. If the spec plate gets blurry from compression, raise the size limit. For industrial products, clarity usually matters more than file size.

How do I write alt text without it being flagged as keyword stuffing?

Write one complete descriptive sentence that says what’s in the image and in what context, 15 to 40 characters long. The test is simple: read the alt text on its own. If it sounds like a normal sentence, it passes. If it sounds like a string of words, there’s a problem. Also avoid three things: using the same alt text for every image, repeating the same category word three or more times in the alt text, and alt text that has nothing to do with the image. Decorative icons can have empty alt text; that’s allowed by the guidelines.

Should videos go on our own site or a third-party video platform?

Use a third-party video platform and reference it on the page with an embed or a placeholder image that loads the video on click. Three reasons: self-hosted video puts significant strain on your hosting bandwidth; building a player and subtitle support takes extra development; and third-party platforms bring in search and recommendation traffic of their own. The one exception is very short looping demos (under 10 seconds), which you can convert to an animated image or image sequence and place directly on the page. When embedding, always use a placeholder image so the video script doesn’t load as soon as the page opens, which would slow down the first screen.

Can we use photos taken at a client site directly on our website?

Not directly. Get written permission first. The permission letter only needs to cover three things: scope of use (list website, social media, and print materials separately), duration of use, and whether production lines and equipment nameplates may appear. At the same time, check what’s in the frame: avoid or edit out identifiable brand logos, get the employee’s consent or blur their face if they’re recognizable, and have the client confirm any process details from their production line before publishing. If the client is a partner of a competitor, it’s best not to use the photo at all, to avoid the cost of explaining it later.

Our media library is huge. Can we just bulk clean it up?

Don’t bulk delete. The right order is to audit first, then clean up: export a table mapping media files to where they’re referenced, and mark which pages reference each file; list separately the files that haven’t been referenced for two consecutive quarters; then go through them one by one to confirm whether there’s a permission record and whether they appear in print materials or on display boards. Only delete files that meet all three conditions: not referenced, no permission record or unknown source, and not used off-site. Move the rest to an archive folder. Always make a full backup before cleaning up.

Final thoughts

Media asset governance looks like a trivial chore, but it affects three serious things at once: page performance, search readability, and legal compliance. A single naming convention improves all three, and the cost is just writing the convention once plus following it day to day.

Most sites’ media library problems aren’t unfixable. They’ve just never been treated as something that needs governing. By the time you’re rebuilding the site, migrating, or a client asks where a permission came from, you realize the cost is far greater than the time it would have taken to set up a convention.

One-line takeaway: the file name decides whether it can be found, the file size decides how fast it loads, and the permission record decides whether you can legally use it. Get all three right the first time you upload.