The image on the page should have the right size, frame and role. It is also important to know what information will be given to a person who does not see the image or uses another way of reading the content.
Determine why the image is on the page
The product image conveys information other than the decorative background fragment. The diagram explains the process and the icon can activate the action. This role should determine both the appearance and the description available to the user.
W3C Image tips They distinguish information, decorative and functional materials. An alternative description should correspond to the meaning or operation of the image. Clean decoration needs an empty alternative text to avoid adding unnecessary information when reading the page.
Prepare the frame for a specific location
A picture that looks good in the gallery may not be suitable for a narrow card or a wide banner. Check if the most important element remains visible after the cut. Do not insert the entire large file just because the browser can visually reduce it.
- Keep the proportions appropriate to the template.
- Check out the look on your phone and the big screen.
- Do not put the key text in the graphics only.
- Select the file quality so that the details remain legible.
Describe meaning, not keyword list
Alternative text should help you understand the material in context. It is not a place to repeat the name of the city and all services of the company. If the photo documents the implementation, describe the relevant element and detailed context put in the usual signature or content.
Check the publication after adding material
Open the page and make sure that the image does not move rapidly the text, does not obscure the header and does not lose any sense in a small view. When illustration is used as a button, also check the readability of the action. Technical issues develop speed and availability guideProfessional preparation of images combines aesthetics with information, instead of treating them exclusively as filling empty space.
