{"id":29797559,"url":"https://github.com/dharmveer97/svelte-image-speed-test","last_synced_at":"2025-07-28T06:13:45.595Z","repository":{"id":305173222,"uuid":"1022145057","full_name":"dharmveer97/svelte-image-speed-test","owner":"dharmveer97","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-18T14:50:29.000Z","size":31392,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-18T19:11:12.174Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dharmveer97.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-18T14:28:10.000Z","updated_at":"2025-07-18T14:50:33.000Z","dependencies_parsed_at":"2025-07-18T19:23:37.446Z","dependency_job_id":null,"html_url":"https://github.com/dharmveer97/svelte-image-speed-test","commit_stats":null,"previous_names":["dharmveer97/svelte-image-speed-test"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/dharmveer97/svelte-image-speed-test","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Fsvelte-image-speed-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Fsvelte-image-speed-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Fsvelte-image-speed-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Fsvelte-image-speed-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dharmveer97","download_url":"https://codeload.github.com/dharmveer97/svelte-image-speed-test/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Fsvelte-image-speed-test/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267470189,"owners_count":24092374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-28T06:13:43.595Z","updated_at":"2025-07-28T06:13:45.587Z","avatar_url":"https://github.com/dharmveer97.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SvelteKit Image Optimization Showcase\n\nA comprehensive demonstration of modern image optimization techniques using SvelteKit's recommended best practices. This project showcases four different approaches to image optimization, each with their specific benefits and use cases.\n\n## 🚀 Features\n\n- **@sveltejs/enhanced-img**: SvelteKit's official image optimization solution\n- **Vite-imagetools**: Build-time optimization with Sharp and responsive picture elements\n- **CDN-based optimization**: Dynamic optimization using Cloudinary and Imgix\n- **Svelte-Image**: Advanced lazy loading with blur-up placeholders\n- **Performance comparison**: Side-by-side demonstration of Core Web Vitals impact\n- **Responsive design**: Mobile-first approach with proper breakpoints\n- **Modern formats**: AVIF, WebP, and JPG fallbacks\n\n## 🛠️ Tech Stack\n\n- **Framework**: SvelteKit 2.x\n- **Styling**: Tailwind CSS\n- **Image Processing**: Sharp, Vite-imagetools\n- **Build Tool**: Vite\n- **Language**: TypeScript\n- **Deployment**: Static site generation\n\n## 📋 Prerequisites\n\nBefore running this project, make sure you have:\n\n- **Node.js** (version 18 or higher)\n- **npm** or **yarn** package manager\n- **Git** for version control\n\n## 🚀 Quick Start\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/dharmveer97/svelte-image-speed-test.git\ncd static-site\n```\n\n### 2. Install Dependencies\n\n```bash\nnpm install\n```\n\n### 3. Add Sample Images\n\nCreate the following directory structure and add your sample images:\n\n```\nstatic/\n└── images/\n    ├── first.jpg\n    ├── two.jpg\n    ├── three.jpg\n    ├── four.jpg\n    └── five.jpg\n```\n\n**Image Requirements:**\n\n- Format: JPG, PNG, or WebP\n- Recommended size: 1200x800px or larger\n- File size: Under 2MB each for optimal performance\n\n### 4. Development Server\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) in your browser.\n\n### 5. Build for Production\n\n```bash\nnpm run build\n```\n\n### 6. Preview Production Build\n\n```bash\nnpm run preview\n```\n\n## 📁 Project Structure\n\n```\n├── src/\n│   ├── lib/\n│   │   └── components/\n│   │       └── Gallery.svelte      # Main showcase component\n│   ├── routes/\n│   │   └── +page.svelte           # Home page\n│   └── app.html                   # HTML template\n├── static/\n│   └── images/                    # Static image assets\n├── package.json\n├── vite.config.ts                 # Vite configuration\n├── svelte.config.js              # SvelteKit configuration\n├── tailwind.config.js            # Tailwind CSS configuration\n└── postcss.config.js             # PostCSS configuration\n```\n\n## 🖼️ Image Optimization Methods\n\n### 1. @sveltejs/enhanced-img (Recommended)\n\n**Best for**: Most static images in SvelteKit projects\n\n**Features**:\n\n- Automatic AVIF/WebP/JPG format selection\n- Responsive image generation with srcset\n- Built-in lazy loading and priority hints\n- Automatic width/height to prevent layout shift\n\n**Installation**:\n\n```bash\nnpm install @sveltejs/enhanced-img\n```\n\n### 2. Vite-imagetools\n\n**Best for**: Fine control over optimization parameters\n\n**Features**:\n\n- Build-time optimization with Sharp\n- Manual control over responsive breakpoints\n- Multiple format generation (AVIF, WebP, JPG)\n- Cached optimization results\n\n**Already included** in this project's dependencies.\n\n### 3. CDN-based Optimization\n\n**Best for**: User-generated content and dynamic transformations\n\n**Features**:\n\n- On-the-fly image transformations\n- Global CDN distribution\n- Smart cropping and effects\n- Automatic format and quality optimization\n\n**Providers demonstrated**:\n\n- Cloudinary\n- Imgix\n\n### 4. Svelte-Image\n\n**Best for**: Blur-up placeholders and smooth loading transitions\n\n**Features**:\n\n- Blur-up placeholder effect\n- Intersection Observer lazy loading\n- Smooth loading transitions\n- Responsive image sizing\n\n## ⚡ Performance Optimization\n\n### Core Web Vitals Impact\n\n- **LCP (Largest Contentful Paint)**: Use `fetchpriority=\"high\"` for hero images\n- **CLS (Cumulative Layout Shift)**: Always include width/height attributes\n- **FID (First Input Delay)**: Lazy load below-the-fold images\n- **INP (Interaction to Next Paint)**: Optimize image loading with proper sizes\n\n### Best Practices Implemented\n\n✅ **Format Optimization**\n\n- AVIF for modern browsers\n- WebP for broad support\n- JPG/PNG fallbacks\n- Automatic format selection\n\n✅ **Responsive Design**\n\n- Multiple image sizes\n- Proper sizes attributes\n- Viewport-based loading\n- HiDPI/Retina support\n\n✅ **Performance**\n\n- Lazy loading implementation\n- Priority hints for critical images\n- Layout shift prevention\n- CDN distribution ready\n\n## 🔧 Configuration\n\n### Vite Configuration\n\nThe project uses Vite with imagetools plugin:\n\n```typescript\n// vite.config.ts\nimport { sveltekit } from '@sveltejs/kit/vite';\nimport { imagetools } from 'vite-imagetools';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  plugins: [sveltekit(), imagetools()],\n});\n```\n\n### SvelteKit Configuration\n\nStatic site generation is configured in `svelte.config.js`:\n\n```javascript\nimport adapter from '@sveltejs/adapter-static';\n\nconst config = {\n  kit: {\n    adapter: adapter(),\n  },\n};\n```\n\n## 🎨 Customization\n\n### Adding New Images\n\n1. Add your images to `static/images/`\n2. Update the import statements in `Gallery.svelte`\n3. Add corresponding entries to the image arrays\n\n### Modifying Optimization Parameters\n\nFor Vite-imagetools, modify the query parameters:\n\n```typescript\n// Example: Different sizes and formats\nimport myImg from '/images/photo.jpg?w=300;600;900\u0026format=webp;avif;jpg\u0026as=picture';\n```\n\n### Styling Changes\n\nThe project uses Tailwind CSS. Modify classes in `Gallery.svelte` or extend the Tailwind configuration in `tailwind.config.js`.\n\n## 📊 Performance Testing\n\n### Lighthouse Audit\n\nRun Lighthouse audits to measure performance:\n\n```bash\n# Install Lighthouse CLI\nnpm install -g lighthouse\n\n# Run audit on local build\nnpm run build\nnpm run preview\nlighthouse http://localhost:4173 --output html --output-path ./lighthouse-report.html\n```\n\n### WebPageTest\n\nUse [WebPageTest](https://www.webpagetest.org/) for detailed performance analysis of your deployed site.\n\n## 🚀 Deployment\n\n### Static Site Deployment\n\nThis project is configured for static site generation. Deploy to:\n\n- **Vercel**: `vercel --prod`\n- **Netlify**: Connect your Git repository\n- **GitHub Pages**: Use GitHub Actions\n- **Cloudflare Pages**: Connect your repository\n\n### Environment Variables\n\nFor CDN integrations, you may need:\n\n```bash\n# .env.local\nCLOUDINARY_CLOUD_NAME=your_cloud_name\nIMGIX_DOMAIN=your_domain.imgix.net\n```\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n**Module not found errors**:\n\n```bash\nnpm install\n```\n\n**Images not loading**:\n\n- Check that images exist in `static/images/`\n- Verify file names match import statements\n- Ensure proper file permissions\n\n**Build failures**:\n\n- Check Node.js version (18+ required)\n- Clear `.svelte-kit` directory: `rm -rf .svelte-kit`\n- Reinstall dependencies: `rm -rf node_modules \u0026\u0026 npm install`\n\n**TypeScript errors**:\n\n- Ensure all dependencies are installed\n- Check import paths are correct\n- Verify image files exist\n\n## 📚 Learning Resources\n\n- [SvelteKit Documentation](https://kit.svelte.dev/)\n- [Vite-imagetools Documentation](https://github.com/JonasKruckenberg/imagetools)\n- [Web.dev Image Optimization](https://web.dev/fast/#optimize-your-images)\n- [Core Web Vitals](https://web.dev/vitals/)\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Commit your changes: `git commit -m 'Add amazing feature'`\n4. Push to the branch: `git push origin feature/amazing-feature`\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- SvelteKit team for the excellent framework\n- Sharp team for the powerful image processing library\n- Tailwind CSS for the utility-first CSS framework\n- The open-source community for the amazing tools and libraries\n\n---\n\n**Happy coding! 🎉**\n\nFor questions or support, please open an issue in the GitHub repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdharmveer97%2Fsvelte-image-speed-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdharmveer97%2Fsvelte-image-speed-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdharmveer97%2Fsvelte-image-speed-test/lists"}