A good picture must retain meaning, fit into the layout and quickly charge. Graphics are often responsible for a large part of the size of the page and at the same time they build the first impression of the brand. Wrong proportions lead to accidental facial or product cuts, and the file sent straight from the camera slows down loading. The process should include the choice of image role, frame preparation, export of modern format, variants for different screens and a description of availability. Optimization does not mean visible loss of quality.
Roles, staff and proportions
First you have to determine where the image will be used: as a full illustration of an article, background, miniature or product photo. Each role requires different proportions and focus points. If all information is important, you should use a fit without cropping.
It is worth preparing a source larger than the largest variant displayed, but do not publish the original with the resolution intended for printing. Team photographs should have consistent light and composition. The text placed inside the image makes it difficult to react, available and updated, so important messages are better left as HTML.
object-fit: coverKeeping the whole frame can be more important than filling every frame.Format, compression and variants
Photographs work well in the WebP or AVIF formats with the right quality, and simple illustrations can use SVG. It is worth keeping a compatible emergency variant where the environment requires it. Compression is visually assessed on the target size, because the same quality value looks different for different images.
The browser should be given a variant similar to the actual width. Responsible attributes allow you to select a smaller file on your phone. Images outside the first screen can be loaded lazyly, but the main picture should not be delayed unnecessarily.
Names, alternative text and management
The file name can briefly describe the subject instead of an accidental number. The alternative text transmits an image function or information in the context of the page; it is not used to pry key words. Decorative graphics should have an empty description so the screen reader skips it. The signature is appropriate when helping all users.
The CMS should store the source, generate variants and prevent the publication of too heavy files. The editor needs a frame preview and guidance for the required proportions. Regular audit allows you to find unused graphics, incorrect addresses and images of an inadequate size to the site.
Preparation of the image for publication
- Specify the role, proportion and important point of the staff.
- Export size matching the largest view.
- Use the appropriate format and controlled compression.
- Prepare variants for different screen widths.
- Book a seat by the dimensions of the image.
- Write an appropriate alternative text or mark the decoration.
- Check out the look on your phone and the big screen.
First evaluate the source, then export
If the image is moved, too small or repeatedly compressed, changing the format will not restore the lost detail. It's worth going back to the best available source. The zoom can increase the number of pixels, but does not automatically give a reliable picture of the details.
With the material presenting the product or the implementation, avoid amendments that change its actual appearance. Aesthetic design should not create a misleading impression about the offer.
View screenshots separately
The interface contains small letters, thin lines and flat colours. Parameters that look good on the photograph may worsen the readability of such a image. Compare exports in the place where the graphics will actually be presented.
If the full screen is too small to read, you can show the selected passage and explain its context. You do not need to place the entire long view in one small miniature.
Check important details
- Does the string in the interface remain legible?
- Do not the edges of the product have visible distortions?
- Does the color and contrast correspond to the source material?
- Does not framing delete the information needed for the recipient?
Do the test in the target size and on the screen with a higher image density if available. Highly zoomed source preview does not replace the finished page rating.
Save materials for subsequent applications
Store the source separately from the publication options and describe their purpose. When a bigger banner or other mobile frame is created, the team does not need to enlarge the small miniature.
We write about order in the library in media management guide in CMSQuality results from the entire preparation process, not from one sharpening or compression setting.
The most common questions
What size file is good?
There is no one value. Try the smallest file that looks good in the target application, and compare variants.
Is WebP always the best?
It is a very good choice for many photographs, but the format depends on the type of graphics, transparency, animation and compatibility requirements.
Does every picture need an alt description?
No. The information image needs a description appropriate to the context, and purely decorative should have an empty alt attribute.
Summary
Internet images require a conscious frame, format, size, variants and available description. This keeps the full information, looks coherent and does not unduly burden the pages.
