@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/imageCompressor/i18n/fr.ts

@@ -0,0 +1,230 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ImageCompressorUI, ImageCompressorLocaleContent } from '../index';
+
+const slug = 'compresseur-images-en-ligne-reduire-taille-sans-perte-qualite';
+const title = 'Compresseur d\'Images en Ligne - Réduisez le poids sans perte de qualité';
+const description = 'Optimisez et compressez vos photos JPG, PNG et WebP gratuitement. Réduisez la taille des fichiers pour améliorer la vitesse de chargement de votre site web localement.';
+
+const ui: ImageCompressorUI = {
+    dropTitle: "Optimiser les Images",
+    dropSubtitle: "Faites glisser vos photos pour réduire leur poids instantanément.",
+    settingsTitle: "Paramètres de Compression",
+    qualityLabel: "Qualité Visuelle",
+    widthLabel: "Largeur Maximale (Pixels)",
+    convertToWebpLabel: "Convertir en WebP (Recommandé)",
+    compressBtn: "Compresser l'Image",
+    processingLabel: "Traitement...",
+    resultsTitle: "Images Optimisées",
+    originalSizeLabel: "Taille Originale",
+    newSizeLabel: "Nouvelle Taille",
+    reductionLabel: "Économie",
+    downloadBtn: "Télécharger",
+    addMoreBtn: "Ajouter"
+};
+
+const faq: ImageCompressorLocaleContent['faq'] = [
+    {
+        question: "Comment fonctionne la compression sans perte ?",
+        answer: "Nous utilisons des algorithmes qui suppriment les métadonnées inutiles et optimisent l'encodage des pixels. En choisissant le WebP, une technologie de compression plus avancée que les formats traditionnels est utilisée.",
+    },
+    {
+        question: "Mes images sont-elles téléchargées sur un serveur ?",
+        answer: "Non. Tout le traitement se déroule à 100 % dans votre navigateur (côté client). Vos photos ne quittent jamais votre ordinateur, garantissant une confidentialité absolue.",
+    },
+    {
+        question: "Pourquoi devrais-je convertir en WebP ?",
+        answer: "Le WebP est le format standard moderne pour le web. Il offre une qualité supérieure au JPG et au PNG avec un poids jusqu'à 30 % inférieur, ce qui accélère le temps de chargement des pages.",
+    },
+];
+
+const howTo: ImageCompressorLocaleContent['howTo'] = [
+    {
+        name: "Charger l'image",
+        text: "Téléchargez le fichier que vous souhaitez compresser (JPG, PNG ou WebP).",
+    },
+    {
+        name: "Ajuster la qualité",
+        text: "Utilisez le curseur pour trouver l'équilibre parfait entre la taille du fichier et la qualité visuelle (recommandé : 75-85 %).",
+    },
+    {
+        name: "Redimensionner (optionnel)",
+        text: "Si l'image est très grande, vous pouvez indiquer une largeur maximale pour réduire sa résolution.",
+    },
+    {
+        name: "Télécharger le résultat",
+        text: "Appuyez sur le bouton de téléchargement pour obtenir votre image optimisée prête à l'emploi.",
+    },
+];
+
+const bibliography: ImageCompressorLocaleContent['bibliography'] = [
+    {
+        name: "WebP: An Image Format for the Web",
+        url: "https://developers.google.com/speed/webp",
+    },
+    {
+        name: "L'importance de l'optimisation des images pour le SEO",
+        url: "https://developers.google.com/search/docs/appearance/google-images",
+    },
+];
+
+const seo: ImageCompressorLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Optimisation Professionnelle d\'Images Web',
+        items: [
+            'Compression intelligente JPG, PNG et WebP',
+            'Réduisez le poids de 50 à 80 % tout en conservant la qualité visuelle',
+            'Traitement 100 % local - confidentialité garantie',
+            'Améliorez les Core Web Vitals et le positionnement SEO'
+        ]
+    },
+    { type: 'title', text: 'Optimisation des Images : Vitesse Web et Core Web Vitals', level: 2 },
+    { type: 'paragraph', html: 'À l\'ère de l\'immédiateté numérique, un site lent perd des utilisateurs. Les images non optimisées représentent 60 à 70 % du poids total d\'une page web. Les optimiser est la première étape pour améliorer vos métriques Google (LCP, CLS) et votre positionnement dans les résultats de recherche.' },
+
+    { type: 'stats', items: [
+        { value: '50-80%', label: 'Réduction Typique du Poids', icon: 'mdi:trending-down' },
+        { value: '100%', label: 'Confidentialité Locale', icon: 'mdi:lock' },
+        { value: '+30%', label: 'Plus Rapide que le JPG', icon: 'mdi:speedometer' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Formats de Compression Expliqués', level: 3 },
+    { type: 'table', headers: ['Format', 'Compression', 'Cas d\'Utilisation', 'Compatibilité'], rows: [
+        ['JPEG', 'Lossy 50-90%', 'Photos d\'appareil, contenu éditorial', 'Universel (100 %)'],
+        ['PNG', 'Lossless 30-50%', 'Graphiques, logos, transparences', 'Universel (100 %)'],
+        ['WebP', 'Lossy/Lossless 25-35% plus', 'Web moderne, réseaux sociaux', '95 % des navigateurs modernes'],
+        ['AVIF', 'Lossy/Lossless améliore 20%', 'Nouvelle génération web', 'Navigateurs récents uniquement']
+    ] },
+
+    { type: 'card', title: 'Pourquoi le WebP est l\'Avenir', html: 'Google a développé le WebP spécifiquement pour le web. Il offre une compression supérieure au JPEG et au PNG, tout en conservant ou en améliorant la qualité visuelle. Il est 25 à 35 % plus petit que ses équivalents en JPEG. Les navigateurs modernes le supportent à 95 %.' },
+
+    { type: 'title', text: 'Compression Avec Perte vs Sans Perte', level: 3 },
+    { type: 'comparative', items: [
+        {
+            title: 'Compression Avec Perte (Lossy)',
+            description: 'JPG, WebP - Supprime des informations visuelles imperceptibles',
+            icon: 'mdi:compress',
+            points: [
+                'Réduit de 70 à 90 % le poids d\'origine',
+                'Imperceptible à l\'œil humain si la qualité est maintenue > 75 %',
+                'Idéal pour la photographie réaliste',
+                'Non recommandé pour les logos ou les textes nets'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Compression Sans Perte (Lossless)',
+            description: 'PNG, WebP sans perte - Conserve 100 % des données visuelles',
+            icon: 'mdi:shield',
+            points: [
+                'Réduit de 20 à 50 % le poids',
+                'Qualité parfaite, sans dégradation',
+                'Idéal pour les graphiques, les logos, les transparences',
+                'Fichiers plus lourds que le Lossy'
+            ]
+        }
+    ], columns: 2 },
+
+    { type: 'title', text: 'Impact sur le SEO et la Conversion', level: 3 },
+    { type: 'list', items: [
+        '<strong>Core Web Vitals :</strong> Google pénalise les sites lents. Les images optimisées améliorent directement le LCP (Largest Contentful Paint).',
+        '<strong>Taux de Rebond :</strong> Chaque seconde de retard = 7 % de rebond en plus. Des images plus rapides = moins d\'utilisateurs qui partent.',
+        '<strong>Classement de Recherche :</strong> La vitesse est un facteur de classement. Optimiser les images booste le positionnement.',
+        '<strong>Conversion :</strong> Des temps de chargement plus rapides = plus de conversions. Les études montrent +10 % de conversion avec l\'optimisation.'
+    ], icon: 'mdi:check' },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Confidentialité totale : traitement 100 % local, sans serveurs cloud',
+            con: 'Nécessite un navigateur supportant l\'API Canvas (c\'est universel)'
+        },
+        {
+            pro: 'Le WebP est 25 à 35 % plus petit que le JPEG pour une qualité égale',
+            con: 'Les anciens Safari et IE ne supportent pas le WebP (fallback disponible)'
+        },
+        {
+            pro: 'Traitement instantané de plusieurs images',
+            con: 'Les images très volumineuses (>50 Mo) peuvent nécessiter un délai'
+        },
+        {
+            pro: 'Redimensionnement optionnel : réduit la résolution en plus de la compression',
+            con: 'Le redimensionnement entraîne une perte d\'information - mieux vaut optimiser à la source'
+        }
+    ], proTitle: 'Avantages', conTitle: 'Limitations' },
+
+    { type: 'diagnostic', variant: 'warning', title: 'Attention : Une Compression Excessive Dégrade', icon: 'mdi:alert', badge: 'Qualité', html: 'Maintenez une qualité > 75 % pour la photographie et > 85 % pour le contenu éditorial. En dessous, les artefacts de compression (taches, bandes) deviennent visibles. Une image de belle apparence en vignette peut être hideuse en grand.' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Compression Lossy',
+            definition: 'Supprime les données visuelles que l\'œil humain perçoit comme du "bruit". Idéal pour la photographie.'
+        },
+        {
+            term: 'Compression Lossless',
+            definition: 'Réduit la taille sans perdre d\'informations visuelles. PNG et WebP sans perte.'
+        },
+        {
+            term: 'Core Web Vitals (Google)',
+            definition: 'Indicateurs d\'expérience utilisateur : LCP (vitesse de chargement), FID (latence d\'interaction), CLS (stabilité visuelle). Affectent le SEO.'
+        },
+        {
+            term: 'WebP',
+            definition: 'Format développé par Google. 25 à 35 % plus petit que le JPEG. Supporté par 95 % des navigateurs modernes.'
+        },
+        {
+            term: 'Artefacts de Compression',
+            definition: 'Défauts visuels causés par une compression excessive : taches, bandes de couleur, bords flous.'
+        }
+    ] },
+
+    { type: 'message', title: 'Optimisation Web Professionnelle', ariaLabel: 'Informations sur l\'optimisation d\'images pour le SEO', html: 'Ce n\'est pas de la vanité technique : compresser les images est un investissement direct dans l\'expérience utilisateur et le classement Google. Chaque kilo-octet compte sur mobile. Notre outil transforme ce qui nécessitait auparavant un logiciel professionnel ($$$) en un processus gratuit en 3 clics.' },
+
+    { type: 'title', text: 'Prêt pour le Web Moderne', level: 3 },
+    { type: 'paragraph', html: 'Utilisez la compression intelligente et le format WebP pour que votre présence en ligne soit rapide, responsive et compétitive dans les recherches.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'fr',
+};
+
+export const content: ImageCompressorLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faqTitle: "Frequently Asked Questions",
+    faq,
+    bibliography,
+    bibliographyTitle: "References",
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/imageCompressor/index.ts

@@ -0,0 +1,50 @@
+import type { AudiovisualToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import ImageCompressor from './component.astro';
+import ImageCompressorSEO from './seo.astro';
+import ImageCompressorBibliography from './bibliography.astro';
+
+export interface ImageCompressorUI {
+    dropTitle: string;
+    dropSubtitle: string;
+    settingsTitle: string;
+    qualityLabel: string;
+    widthLabel: string;
+    convertToWebpLabel: string;
+    compressBtn: string;
+    processingLabel: string;
+    resultsTitle: string;
+    originalSizeLabel: string;
+    newSizeLabel: string;
+    reductionLabel: string;
+    downloadBtn: string;
+    addMoreBtn: string;
+    [key: string]: string;
+}
+
+export type ImageCompressorLocaleContent = ToolLocaleContent<ImageCompressorUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const imageCompressor: AudiovisualToolEntry<ImageCompressorUI> = {
+    id: 'compresor-imagenes',
+    icons: {
+        bg: 'mdi:image-size-select-small',
+        fg: 'mdi:file-image-outline',
+    },
+    i18n: {
+        es: async () => es as unknown as ImageCompressorLocaleContent,
+        en: async () => en as unknown as ImageCompressorLocaleContent,
+        fr: async () => fr as unknown as ImageCompressorLocaleContent,
+    },
+};
+
+export { ImageCompressor, ImageCompressorSEO, ImageCompressorBibliography };
+
+export const IMAGE_COMPRESSOR_TOOL: ToolDefinition = {
+    entry: imageCompressor as unknown as AudiovisualToolEntry,
+    Component: ImageCompressor,
+    SEOComponent: ImageCompressorSEO,
+    BibliographyComponent: ImageCompressorBibliography,
+};

package/src/tool/imageCompressor/logic.ts

@@ -0,0 +1,79 @@
+export interface CompressorSettings {
+    quality: number;
+    width: number | null;
+    convertToWebp: boolean;
+}
+
+export interface CompressedImage {
+    id: string;
+    originalName: string;
+    originalSize: number;
+    newSize: number;
+    originalWidth: number;
+    originalHeight: number;
+    newWidth: number;
+    newHeight: number;
+    dataUrl: string;
+    format: string;
+}
+
+export function formatBytes(bytes: number): string {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + (sizes[i] || "B");
+}
+
+export function generateId(): string {
+    return Math.random().toString(36).substring(2, 9);
+}
+
+function processCompressedImage(file: File, img: HTMLImageElement, settings: CompressorSettings, canvas: HTMLCanvasElement): CompressedImage {
+    const ctx = canvas.getContext("2d")!;
+    let targetW = img.naturalWidth, targetH = img.naturalHeight;
+    if (settings.width && settings.width < img.naturalWidth) {
+        targetW = settings.width;
+        targetH = Math.round((img.naturalHeight / img.naturalWidth) * targetW);
+    }
+    canvas.width = targetW;
+    canvas.height = targetH;
+    ctx.drawImage(img, 0, 0, targetW, targetH);
+    const format = settings.convertToWebp ? "image/webp" : (file.type || "image/jpeg");
+    const dataUrl = canvas.toDataURL(format, settings.quality / 100);
+    const newSize = Math.round((dataUrl.split(',')[1]?.length || 0) * 0.75);
+    return {
+        id: generateId(),
+        originalName: file.name,
+        originalSize: file.size,
+        newSize,
+        originalWidth: img.naturalWidth,
+        originalHeight: img.naturalHeight,
+        newWidth: targetW,
+        newHeight: targetH,
+        dataUrl,
+        format
+    };
+}
+
+export async function compressImage(file: File, settings: CompressorSettings): Promise<CompressedImage> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const img = new Image();
+            img.onload = () => {
+                const canvas = document.createElement("canvas");
+                if (!canvas.getContext("2d")) return reject("Canvas context not available");
+                try {
+                    resolve(processCompressedImage(file, img, settings, canvas));
+                } catch (err) {
+                    reject(err);
+                }
+            };
+            img.onerror = () => reject("Failed to load image");
+            img.src = e.target?.result as string;
+        };
+        reader.onerror = () => reject("Failed to read file");
+        reader.readAsDataURL(file);
+    });
+}

package/src/tool/imageCompressor/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { imageCompressor } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await imageCompressor.i18n[locale]?.();
+if (!content) return null;
+---
+
+<SEORenderer content={{ locale, sections: content.seo || [] }} />