YAVACADO turned our technical equipment catalog into a clear, professional website that our team can manage. The CMS and CRM integration make it easier to present products, process enquiries, and support clinics from the first contact.
4
min to read
Website Images: Plan Alt Text, Captions and Crops Before Uploading
Web design
Educational
Explore all
February 9, 2026
Give every website image a purpose, prepare useful text alternatives and check that the important visual information survives responsive layouts.
In this article
Reviewed 12 September 2026.
An image can explain a product, demonstrate a result or simply support the visual atmosphere. Those are different jobs. Decide which job an image performs before writing its alternative text or placing it in a template.
Identify what the reader should learn
Write a short sentence describing why the image belongs on the page. If it shows a product workflow, identify the part of the workflow that matters. If it shows a finished website, explain which design decision it illustrates.
This exercise helps remove decorative repetition. Several nearly identical mockups can make an article longer without explaining more. Choose a broad view for context and a closer view for detail where necessary. Keep essential evidence visible at the size the reader will actually see, especially on mobile.
Write text alternatives for the image’s role
W3C’s image guidance distinguishes informative, decorative and functional images. Informative images need an alternative that conveys their relevant information. Decorative images can use an empty alternative. For an image acting as a control or link, its function matters.
A complex diagram may need an explanation in the surrounding text as well as a short alternative. Avoid stuffing keywords into image descriptions. Write for someone who needs the information without seeing the image, and use the nearby caption for additional context that benefits everyone.
Match image treatment to its purposeImage roleText treatmentVisual checkProject screenshotDescribe the relevant viewImportant detail is readableDecorative textureEmpty alternative when appropriateIt does not obscure textLinked iconDescribe the destination or actionThe action is recognisableComplex diagramProvide a fuller nearby explanationMeaning survives at narrow widths
Design crops with the content
Check where a responsive card crops the image. A face, product label or important interface control may disappear when the aspect ratio changes. Choose a focal area deliberately and preview the image in its actual card and article positions.
Avoid placing essential headings inside the image when ordinary page text can carry them. Text embedded in a graphic may become too small on mobile and is harder to maintain across languages. If an annotated screenshot is necessary, ensure the article explains the annotation in readable text too.
Make preparation part of the publishing workflow
Use a predictable naming approach and record where the source asset came from. Prepare dimensions and compression for the intended display rather than uploading a large original by habit. Preserve enough quality for the image to do its job.
After upload, inspect the page at both wide and narrow widths. Confirm that the image loads, the crop remains useful and the caption is accurate. When replacing a screenshot after a product change, update the text that explains it. The image and its explanation should describe the same version of the experience.
Write the image’s purpose first. The crop, caption and alternative text should all support it.
A related YAVACADO project
For The Fiscal Agency, YAVACADO translated supplied Figma pages into a responsive Webflow build, preserving typography, spacing and animation detail. The project illustrates careful implementation across layouts. The checks in this guide are recommendations, rather than a claim that every check was part of this project.
View project: The Fiscal Agency
Check your own website
Your review checklistIdentify the purpose of each imageWrite role-appropriate alternativesPreview card and article cropsKeep explanatory text currentUse these checks as you review. Selections are not saved.
Put it into practice
A screenshot includes a tiny chart that proves the article’s main point. Is a generic “dashboard screenshot” alternative enough?
Show the suggested approach
No. Explain the chart’s relevant finding in the article and provide an appropriate text equivalent for important data. Consider a closer view so sighted readers can also understand it on a phone. Do not rely on a tiny screenshot as the only evidence.
Continue reading
Website First Impressions: Design for Clarity, Trust and the Next Step
References
Discuss your website
Bring your current website and the task you want to improve. YAVACADO can help define the content, design and implementation work needed for the next step.
FAQs
Should every image have a long alt description?
Can a caption replace alt text?
Should filenames contain keywords?
How to Structure a Service Page for Qualified Enquiries
11/24/25
4
min to read
How to Write a Website Redesign Brief That Prevents Rework
11/10/25
4
min to read
Webflow Integrations: Plan What Happens When a Handoff Fails
3/16/26
4
min to read
Website First Impressions: Design for Clarity, Trust and the Next Step
9/18/23
4
min to read
Relevant project
Figma to Webflow Build for a Fiscal Advisory Firm
Tech
En The Fiscal Agency nos convertimos en tus consejeros y te ayudamos a rediseñar tu estructura fiscal y operativa para que se adapte a tu estilo de vida soñado.
The Fiscal Agency
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
LET’S WORK TOGETHER
Testimonials
What our clients say
A web design agency that cares about you and your brand, no matter the size or what industry your business is in.
YAVACADO turned a complex booking process into one clear platform. Our team can manage tours and content in Webflow, while parents can book and pay securely through WayForPay. The result is easy to operate and built around the needs of the Ukrainian market.
The website captures the premium feel of our brand perfectly. From the design to the multilingual functionality and payment integration, every detail was delivered to a very high standard.
Excellent implementation of our Figma design in Webflow. The final website feels fast, polished, and exactly aligned with the premium fintech experience we wanted.
.png)
The funnel feels significantly more polished than the original concepts and was delivered in a format our internal team could immediately continue working with. Smooth process and excellent execution.
Working with YAVACADO was a fantastic experience. They understood both the technical requirements and the business goals, delivering a fast, polished website that's easy to manage and built to generate qualified leads.
Impressive speed and quality. The landing page was delivered in just hours and looks clean, professional, and ready to use.
The turnaround was incredibly fast, and the result looks clean and professional. The site reflects our firm perfectly and was delivered exactly on time.
The YAVACADO team helped us present FromLab2Jab’s complex services in a clear and professional way. The structure, CMS, and filtering system make it easy for our team to manage and scale the content.
The final website matched the Figma design with impressive accuracy. The animations, sticky sections, and overall Webflow execution made the project feel polished and high-end.
%2520(1).png)
YAVACADO delivered a powerful, scalable platform that fully supports our operations. The CMS structure, CRM integrations, and automation tools significantly improved how we manage inquiries and camp programs.
The phased design and development approach made everything clear and efficient. The team delivered a professional SaaS website on time, and the training support helped us manage content confidently
The platform works exactly as we envisioned — secure, structured, and scalable. Subscription management and report access are fully automated, and everything runs smoothly.
The Webflow build perfectly matches the AI design and feels even better in motion. Everything from CMS to animations works smoothly—great work!
The redesign gave our website a completely new look. The layouts feel modern, the services are presented much clearer, and the site works perfectly on mobile.
The redesign elevated our corporate presence and made content much easier to manage. The Feensweet filtering and CRM integration streamlined our user experience and lead flow — great implementation!
%25201.png)
