Improve accessibility and SEO with zero runtime overhead. Works with React, Vue, Svelte, and any web framework. Process all images at build time automatically.
Install with npm:
npm install image-alt-title-generatorInstall with yarn:
yarn add image-alt-title-generatorLatest Version
Monthly Downloads
Package Size
Built specifically for modern web development workflows with powerful features that make accessibility effortless.
All processing happens during build time with zero runtime overhead. Your production bundle stays lean and fast.
Converts image filenames into meaningful, human-readable descriptions automatically. No manual work required.
Works with React, Vue, Svelte, vanilla HTML, and any other web framework that uses standard img tags.
Only processes images without existing alt/title attributes. Your custom descriptions are never overwritten.
Customize parsing options, add custom mappings, and control exactly how your alt text is generated.
Built specifically for Vite projects with Webpack support. Easy integration with your existing build setup.
Get started in minutes with our simple setup process. Works with Vite and Webpack projects.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' // or vue, svelte, etc.
import { imageAltGenerator } from 'image-alt-title-generator'
export default defineConfig({
plugins: [
react(), // or your framework plugin
imageAltGenerator({
parserOptions: {
prefix: '',
suffix: '',
removeNumbers: true,
customMappings: {
'logo': 'Company Logo',
'avatar': 'User Avatar Image'
}
},
generateTitle: true,
generateAlt: true,
fallbackAlt: 'Image',
fallbackTitle: 'Image'
})
],
})module.exports = {
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx|html|vue|svelte)$/,
use: [
{
loader: 'image-alt-title-generator/webpack',
options: {
parserOptions: {
prefix: 'Photo of',
suffix: 'image',
removeNumbers: true,
customMappings: {
'logo': 'Company Logo',
'avatar': 'User Avatar Image'
}
},
generateTitle: true,
generateAlt: true,
fallbackAlt: 'Image',
fallbackTitle: 'Image'
}
}
]
}
]
}
};Works seamlessly with all major web frameworks and vanilla JavaScript. No framework lock-in.
Everything you need to know about image accessibility and our automatic alt text generator.
Alt attributes (alt text) provide text descriptions of images for screen readers and assistive technologies. They're crucial for web accessibility as they help visually impaired users understand image content. Alt text also improves SEO by providing context to search engines about your images, and serves as fallback text when images fail to load.
The library analyzes image filenames and converts them into human-readable descriptions using intelligent parsing algorithms. For example, 'user-profile-photo.jpg' becomes 'User profile photo' and 'product-hero-banner.png' becomes 'Product hero banner'. This happens at build time, so there's zero runtime overhead and your production bundle stays lean.
The library works with any web framework including React, Vue, Svelte and vanilla JavaScript. It supports Vite (as a plugin) and Webpack (as a loader), making it compatible with most modern development workflows. The build-time processing ensures it works seamlessly with static site generators and server-side rendering.
Alt attributes are essential for accessibility and SEO - they provide the primary description of an image. Title attributes provide additional information that appears on hover and are optional. Alt text should be descriptive and meaningful, while title text can be more detailed or provide context. This library generates both automatically, ensuring your images are both accessible and informative.
No performance impact! All processing happens during build time, not runtime. The library has zero runtime overhead and doesn't add any code to your production bundle. It only processes images during development and build phases, making your final application faster and lighter while ensuring all images have proper accessibility attributes.
Still have questions?
Ask on GitHubWatch how your image tags are automatically transformed with meaningful alt and title attributes.
// React/JSX <img src="/images/user-profile.jpg" /> <img src="/images/avatar.png" /> <img src="/images/product_photo_1.webp" /> <img src="/images/logo.svg" /> // Vue <img src="/images/hero-banner.jpg" /> <img src="/images/icon-home.svg" /> // Vanilla HTML <img src="/images/background.jpg" /> <img src="/images/logo.png" />
// React/JSX
<img src="/images/user-profile.jpg"
alt="Photo of User Profile image"
title="Photo of User Profile image" />
<img src="/images/avatar.png"
alt="User Avatar Image"
title="User Avatar Image" />
<img src="/images/product_photo_1.webp"
alt="Photo of Product Photo image"
title="Photo of Product Photo image" />
<img src="/images/logo.svg"
alt="Company Logo"
title="Company Logo" />
// Vue
<img src="/images/hero-banner.jpg"
alt="Photo of Hero Banner image"
title="Photo of Hero Banner image" />
<img src="/images/icon-home.svg"
alt="Photo of Icon Home image"
title="Photo of Icon Home image" />
// Vanilla HTML
<img src="/images/background.jpg"
alt="Photo of Background image"
title="Photo of Background image" />
<img src="/images/logo.png"
alt="Company Logo"
title="Company Logo" />Join thousands of developers who are making their websites more accessible and SEO-friendly with zero effort.