feat: add optimized image component and integrate into profile modal …#3
Merged
feat: add optimized image component and integrate into profile modal …#3
Conversation
…and card - Added `OptimizedImage` component for lazy loading and WebP support. - Updated `ModalProfile` to use `OptimizedImage` for profile images. - Updated `ProfileCard` to use `OptimizedImage` for displaying images. - Added `vite-plugin-imagemin` for image optimization in the build process. - Updated `vite.config.ts` to configure image optimization settings. - Modified `package.json` to include `vite-plugin-imagemin` as a dependency.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
1. Optimización de Imágenes
Se creó el componente OptimizedImage que:
Intenta cargar versiones WebP de las imágenes si el navegador lo soporta, mejorando el rendimiento y la calidad visual.
Añade un efecto de carga (placeholder animado) para mejorar la experiencia de usuario.
Permite definir tamaño y clases personalizadas para adaptarse a diferentes contextos visuales.
###2. Refactorización de Componentes para Usar Imágenes Optimizadas![]()
, lo que:
ProfileCard.tsx y ModalProfile.tsx ahora utilizan el nuevo componente OptimizedImage en lugar de la etiqueta
Mejora la velocidad de carga.
Asegura una presentación visual consistente y moderna.
Permite aprovechar la optimización automática de imágenes.
3. Integración de Plugin de Optimización en el Build
Se añadió e integró el paquete vite-plugin-imagemin en el proyecto:
Optimiza imágenes automáticamente durante el proceso de build.
Reduce el peso de los archivos estáticos (JPG, PNG, SVG, WebP), mejorando el rendimiento general del sitio.
4. Actualización de Configuración de Vite
Se actualizó vite.config.ts para incluir y configurar el plugin de optimización de imágenes con parámetros personalizados para cada formato.
5. Actualización de Dependencias
Se añadió vite-plugin-imagemin a las dependencias de desarrollo en package.json