Website images: prepare files without losing information
An image can look good in a folder and fail on the page: the product is cropped, an important detail disappears or the file takes too long to arrive. Preparing website images requires deciding which information must remain visible and in what situation it will be viewed. Reducing file size is part of this work but does not replace content review.
The framework below organizes preparation around decisions. It works for gathering files before creating a website and for reviewing an existing page. The proposal is to retain an original reference, compare alternatives and record why each version was chosen.
Website image preparation: start with each image’s function
Before exporting, write a sentence about what the image should clarify. Does it show a product’s finish? Identify a person? Present a space? If the answer is only “fill the section,” reconsider the choice. A photograph requiring extensive explanation may be occupying the place of information that should appear in the text.
Fictional example: a woodworking business prepares a page for a worktop. The main photo presents the whole; another shows a close-up of the edge and joints. Using the same wide photograph in both positions does not resolve the second task. The team chooses different framing and keeps the specifications customers need to compare in the text.
Define the crop before reducing the file
Build a preview in the page’s actual position and check desktop and mobile versions. Mark elements that must not disappear: handle, face, logo or joint. If a narrow crop cannot accommodate that information, change the composition or select another image. Do not ask visitors to infer what was left out.
Keep the original file and name versions by purpose, such as worktop-overall-view and worktop-edge-detail. We also suggest recording who chose the photo and which page uses it. This inventory helps when someone replaces the image months later and needs to understand the previous decision.
Display width guides delivery
web.dev explains that responsive images allow file selection according to available space and the device’s pixel density. The page width in CSS pixels and file width are related measurements but are not equivalent on every screen. web.dev: image performance
In a fictional example, a photo occupies about 600 CSS pixels in a particular section. This is a starting point for testing versions, not an instruction to export everything at 600 pixels. Ask the website implementer to check which file the browser actually downloads in each scenario. This verification is especially useful when the platform automatically generates variations.
Choose the format by comparison
WebP and AVIF can offer good compression, but the result needs evaluation for each image and setting. Photographs, transparency and drawings have different requirements; format choice should consider those characteristics. web.dev: choosing a format
Export alternatives and observe the image at its usage size. Look for changes to edges, areas of soft color and details that justify the photograph. Also compare file sizes. web.dev notes that the same quality number does not produce equivalent results across formats and tools, so compare the resulting images. web.dev: compression level
Write context alongside the photograph
Google recommends placing images near relevant content, using descriptive names and writing alt text useful in context without piling up keywords. This text also contributes to accessibility. Google Search Central: image best practices
In the woodworking example, “wooden worktop with a rounded edge” says more than “photo of our work.” Still, do not turn alt text into a catalog: measurements, options and engagement terms should be available in the page content. Review the description whenever the image changes; copying the old one without checking can describe a different product.
Review the whole and measure on the page
Our review form can have five items. Complete it after publishing a test version and before considering the image approved:
Function: can I say what this image clarifies for the visitor?
Framing: does the necessary detail appear in desktop and mobile previews?
File: have I recorded the chosen version’s dimensions, format and size?
Context: do the nearby text and description match the current image?
Delivery: have I checked which file the browser requested and how the page behaved?
Compare performance before and after under similar conditions, recording device and connection. Search Central identifies PageSpeed Insights as a speed analysis tool. Use the report to investigate the page; one file replacement alone does not explain the entire loading process. Google Search Central: speed and quality
If file size and information conflict, return to the function defined at the beginning. It may be better to replace the photograph or separate a detail from the overall view. To plan these decisions within the project, explore Briccitly’s website creation service. Website creation by Briccitly
Comments