@jjlmoya/utils-social 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/package.json +60 -0
  2. package/src/category/i18n/en.ts +23 -0
  3. package/src/category/i18n/es.ts +23 -0
  4. package/src/category/i18n/fr.ts +23 -0
  5. package/src/category/index.ts +13 -0
  6. package/src/category/seo.astro +15 -0
  7. package/src/components/PreviewNavSidebar.astro +116 -0
  8. package/src/components/PreviewToolbar.astro +143 -0
  9. package/src/data.ts +11 -0
  10. package/src/env.d.ts +5 -0
  11. package/src/index.ts +27 -0
  12. package/src/layouts/PreviewLayout.astro +117 -0
  13. package/src/pages/[locale]/[slug].astro +146 -0
  14. package/src/pages/[locale].astro +251 -0
  15. package/src/pages/index.astro +4 -0
  16. package/src/tests/faq_count.test.ts +19 -0
  17. package/src/tests/locale_completeness.test.ts +42 -0
  18. package/src/tests/mocks/astro_mock.js +2 -0
  19. package/src/tests/no_h1_in_components.test.ts +48 -0
  20. package/src/tests/seo_length.test.ts +22 -0
  21. package/src/tests/tool_validation.test.ts +17 -0
  22. package/src/tool/redditFormatter/bibliography.astro +14 -0
  23. package/src/tool/redditFormatter/component.astro +246 -0
  24. package/src/tool/redditFormatter/i18n/en.ts +193 -0
  25. package/src/tool/redditFormatter/i18n/es.ts +193 -0
  26. package/src/tool/redditFormatter/i18n/fr.ts +193 -0
  27. package/src/tool/redditFormatter/index.ts +34 -0
  28. package/src/tool/redditFormatter/logic.ts +24 -0
  29. package/src/tool/redditFormatter/seo.astro +14 -0
  30. package/src/tool/redditFormatter/ui.ts +13 -0
  31. package/src/tool/safeZones/bibliography.astro +14 -0
  32. package/src/tool/safeZones/component.astro +857 -0
  33. package/src/tool/safeZones/i18n/en.ts +244 -0
  34. package/src/tool/safeZones/i18n/es.ts +244 -0
  35. package/src/tool/safeZones/i18n/fr.ts +244 -0
  36. package/src/tool/safeZones/index.ts +34 -0
  37. package/src/tool/safeZones/logic.ts +137 -0
  38. package/src/tool/safeZones/seo.astro +14 -0
  39. package/src/tool/safeZones/ui.ts +34 -0
  40. package/src/tool/socialImageResizer/bibliography.astro +14 -0
  41. package/src/tool/socialImageResizer/component.astro +498 -0
  42. package/src/tool/socialImageResizer/i18n/en.ts +211 -0
  43. package/src/tool/socialImageResizer/i18n/es.ts +211 -0
  44. package/src/tool/socialImageResizer/i18n/fr.ts +211 -0
  45. package/src/tool/socialImageResizer/index.ts +34 -0
  46. package/src/tool/socialImageResizer/logic.ts +133 -0
  47. package/src/tool/socialImageResizer/seo.astro +14 -0
  48. package/src/tool/socialImageResizer/ui.ts +7 -0
  49. package/src/tool/socialValueCalculator/bibliography.astro +14 -0
  50. package/src/tool/socialValueCalculator/component.astro +829 -0
  51. package/src/tool/socialValueCalculator/i18n/en.ts +310 -0
  52. package/src/tool/socialValueCalculator/i18n/es.ts +310 -0
  53. package/src/tool/socialValueCalculator/i18n/fr.ts +310 -0
  54. package/src/tool/socialValueCalculator/index.ts +34 -0
  55. package/src/tool/socialValueCalculator/logic.ts +60 -0
  56. package/src/tool/socialValueCalculator/seo.astro +14 -0
  57. package/src/tool/socialValueCalculator/ui.ts +31 -0
  58. package/src/tool/tinderPhotoOptimizer/bibliography.astro +14 -0
  59. package/src/tool/tinderPhotoOptimizer/component.astro +1514 -0
  60. package/src/tool/tinderPhotoOptimizer/i18n/en.ts +248 -0
  61. package/src/tool/tinderPhotoOptimizer/i18n/es.ts +248 -0
  62. package/src/tool/tinderPhotoOptimizer/i18n/fr.ts +248 -0
  63. package/src/tool/tinderPhotoOptimizer/index.ts +34 -0
  64. package/src/tool/tinderPhotoOptimizer/logic.ts +199 -0
  65. package/src/tool/tinderPhotoOptimizer/seo.astro +14 -0
  66. package/src/tool/tinderPhotoOptimizer/ui.ts +37 -0
  67. package/src/tool/youtubeThumbnail/bibliography.astro +14 -0
  68. package/src/tool/youtubeThumbnail/component.astro +419 -0
  69. package/src/tool/youtubeThumbnail/i18n/en.ts +207 -0
  70. package/src/tool/youtubeThumbnail/i18n/es.ts +207 -0
  71. package/src/tool/youtubeThumbnail/i18n/fr.ts +207 -0
  72. package/src/tool/youtubeThumbnail/index.ts +34 -0
  73. package/src/tool/youtubeThumbnail/logic.ts +7 -0
  74. package/src/tool/youtubeThumbnail/seo.astro +14 -0
  75. package/src/tool/youtubeThumbnail/ui.ts +13 -0
  76. package/src/tool/youtubeThumbnailPreviewer/bibliography.astro +14 -0
  77. package/src/tool/youtubeThumbnailPreviewer/component.astro +791 -0
  78. package/src/tool/youtubeThumbnailPreviewer/i18n/en.ts +321 -0
  79. package/src/tool/youtubeThumbnailPreviewer/i18n/es.ts +321 -0
  80. package/src/tool/youtubeThumbnailPreviewer/i18n/fr.ts +321 -0
  81. package/src/tool/youtubeThumbnailPreviewer/index.ts +34 -0
  82. package/src/tool/youtubeThumbnailPreviewer/seo.astro +14 -0
  83. package/src/tool/youtubeThumbnailPreviewer/ui.ts +19 -0
  84. package/src/tools.ts +10 -0
  85. package/src/types.ts +72 -0
@@ -0,0 +1,211 @@
1
+ import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { SocialImageResizerUI } from '../ui';
4
+
5
+ const slug = 'social-media-image-resizer';
6
+ const title = 'Social Media Image Resizer - Crop & Resize for Every Platform';
7
+ const description =
8
+ 'Resize and crop your photos for Instagram, TikTok, YouTube and more. Smart cropping with updated official dimensions for 2026.';
9
+
10
+ const faqData = [
11
+ {
12
+ question: 'Will image quality be lost when resizing?',
13
+ answer:
14
+ 'No, we use high-quality smoothing algorithms. It is recommended to upload an original image with a resolution equal to or greater than the target format.',
15
+ },
16
+ {
17
+ question: 'Is it safe to upload my photos here?',
18
+ answer:
19
+ 'Completely. Processing is done locally in your browser using the Canvas API. Your photos are never sent to any server.',
20
+ },
21
+ {
22
+ question: 'Which formats are supported?',
23
+ answer:
24
+ 'We support JPG, PNG, WebP and AVIF for upload. Downloads are optimized as high-quality JPG for maximum compatibility.',
25
+ },
26
+ ];
27
+
28
+ const howToData = [
29
+ {
30
+ name: 'Upload your image',
31
+ text: 'Drag your file or browse your device to start the process.',
32
+ },
33
+ {
34
+ name: 'Choose the format',
35
+ text: 'Select the social network and publication type you need from the side menu.',
36
+ },
37
+ {
38
+ name: 'Adjust and download',
39
+ text: 'Frame your photo by dragging it and use the zoom for a perfect crop. When done, click download.',
40
+ },
41
+ ];
42
+
43
+ const faqSchema: WithContext<FAQPage> = {
44
+ '@context': 'https://schema.org',
45
+ '@type': 'FAQPage',
46
+ mainEntity: faqData.map((item) => ({
47
+ '@type': 'Question',
48
+ name: item.question,
49
+ acceptedAnswer: { '@type': 'Answer', text: item.answer },
50
+ })),
51
+ };
52
+
53
+ const howToSchema: WithContext<HowToThing> = {
54
+ '@context': 'https://schema.org',
55
+ '@type': 'HowTo',
56
+ name: title,
57
+ description,
58
+ step: howToData.map((step, i) => ({
59
+ '@type': 'HowToStep',
60
+ position: i + 1,
61
+ name: step.name,
62
+ text: step.text,
63
+ })),
64
+ };
65
+
66
+ const appSchema: WithContext<SoftwareApplication> = {
67
+ '@context': 'https://schema.org',
68
+ '@type': 'SoftwareApplication',
69
+ name: title,
70
+ description,
71
+ applicationCategory: 'UtilityApplication',
72
+ operatingSystem: 'All',
73
+ offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
74
+ inLanguage: 'en',
75
+ };
76
+
77
+ export const content: ToolLocaleContent<SocialImageResizerUI> = {
78
+ slug,
79
+ title,
80
+ description,
81
+ faqTitle: 'Frequently Asked Questions',
82
+ faq: faqData,
83
+ bibliographyTitle: 'References',
84
+ bibliography: [
85
+ {
86
+ name: 'MDN Web Docs: Canvas API',
87
+ url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
88
+ },
89
+ {
90
+ name: 'Sprout Social: Social Media Image Sizes Guide 2026',
91
+ url: 'https://sproutsocial.com/insights/social-media-image-sizes-guide/',
92
+ },
93
+ ],
94
+ howTo: howToData,
95
+ schemas: [faqSchema, howToSchema, appSchema],
96
+ seo: [
97
+ {
98
+ type: 'title',
99
+ text: 'Social Media Image Resizer for Every Platform',
100
+ level: 2,
101
+ },
102
+ {
103
+ type: 'paragraph',
104
+ html: "In today's digital ecosystem, first impressions are visual. Each social network operates under specific algorithms that prioritize content natively adapted to its proportions. Our social media image resizer is not just a technical tool — it is your ally to ensure your message arrives without unwanted crops or quality loss.",
105
+ },
106
+ {
107
+ type: 'paragraph',
108
+ html: 'Whether you need to convert a landscape photo into a striking vertical for Instagram Stories or adapt a design for a complex YouTube banner, our utility uses a smart cropping system that lets you position and scale your image with precision directly in your browser.',
109
+ },
110
+ {
111
+ type: 'title',
112
+ text: 'Official Social Media Image Sizes 2026',
113
+ level: 3,
114
+ },
115
+ {
116
+ type: 'grid',
117
+ columns: [
118
+ { title: 'Instagram — Square Post', body: '1080 × 1080 px · Ratio 1:1' },
119
+ { title: 'Instagram — Vertical Post', body: '1080 × 1350 px · Ratio 4:5' },
120
+ { title: 'TikTok / Reels — Vertical', body: '1080 × 1920 px · Ratio 9:16' },
121
+ { title: 'YouTube — Thumbnail', body: '1280 × 720 px · Ratio 16:9' },
122
+ { title: 'YouTube — Channel Banner', body: '2560 × 1440 px · Ratio 16:9' },
123
+ { title: 'X (Twitter) — Standard Post', body: '1200 × 675 px · Ratio 16:9' },
124
+ { title: 'LinkedIn — Profile Cover', body: '1584 × 396 px · Ratio 4:1' },
125
+ ],
126
+ },
127
+ {
128
+ type: 'grid',
129
+ columns: [
130
+ {
131
+ title: 'Instagram',
132
+ body: 'The 1:1 square format remains a classic, but the 4:5 vertical takes up more screen space and generates up to 30% more engagement in the news feed.',
133
+ },
134
+ {
135
+ title: 'Short Form Content',
136
+ body: 'For TikTok and Reels, the standard is 9:16. This immersive format requires the focal point to be perfectly aligned to avoid being covered by the app UI.',
137
+ },
138
+ {
139
+ title: 'Visual Engagement',
140
+ body: 'From thumbnails to banners, every asset carries a specific weight in the click-through rate. Precise cropping ensures text and key elements are always readable.',
141
+ },
142
+ {
143
+ title: 'Professional Branding',
144
+ body: 'On professional networks like LinkedIn, sharpness is authority. Headers require specific ratios to avoid appearing pixelated on high-density screens.',
145
+ },
146
+ ],
147
+ },
148
+ {
149
+ type: 'title',
150
+ text: 'Why Aspect Ratio Matters',
151
+ level: 3,
152
+ },
153
+ {
154
+ type: 'paragraph',
155
+ html: 'The aspect ratio is the proportional relationship between the width and height of an image. Ignoring it forces platforms to zoom in or add black bars, which penalizes aesthetics and organic reach.',
156
+ },
157
+ {
158
+ type: 'list',
159
+ items: [
160
+ 'Prevents texts or logos from being cut off by native app icons.',
161
+ 'Maintains optimal pixel density without distorting or stretching the original photo.',
162
+ 'Saves time by centralizing all official measurements in a single web tool.',
163
+ 'Improves load speed by generating files with the exact weight and dimensions.',
164
+ ],
165
+ },
166
+ {
167
+ type: 'tip',
168
+ title: 'Composition Tip',
169
+ html: "<p>When using our manual drag feature, try placing the main subject of your photo at one of the grid's intersection points. This creates more dynamic and professional compositions for your social networks.</p>",
170
+ },
171
+ {
172
+ type: 'title',
173
+ text: 'Steps for a Perfect Crop',
174
+ level: 3,
175
+ },
176
+ {
177
+ type: 'list',
178
+ items: [
179
+ 'Select your format: Choose the platform and publication type from the side menu.',
180
+ 'Upload the image: Drag your file or use the file picker to import your photo.',
181
+ 'Adjust the frame: Drag the photo within the visible area and use zoom for precision.',
182
+ 'Instant export: Click download to get your image ready to publish.',
183
+ ],
184
+ },
185
+ {
186
+ type: 'title',
187
+ text: 'Privacy and Local Processing',
188
+ level: 3,
189
+ },
190
+ {
191
+ type: 'paragraph',
192
+ html: 'Your privacy is absolute. This resizer processes images locally in your browser using the Canvas API. Your photos are never uploaded to any external server, guaranteeing complete security and instant processing speed.',
193
+ },
194
+ {
195
+ type: 'title',
196
+ text: 'Professional Optimization for Social Media',
197
+ level: 3,
198
+ },
199
+ {
200
+ type: 'paragraph',
201
+ html: 'Adapting your visual content professionally is a direct growth strategy. Our tool simplifies the workflow for creators and community managers, ensuring every post looks perfect on any device and platform.',
202
+ },
203
+ ],
204
+ ui: {
205
+ sidebarTitle: 'Social Formats',
206
+ uploadTitle: 'Upload Image',
207
+ uploadSubtitle: 'Drag your photo here or click to browse',
208
+ btnReset: 'Reset',
209
+ btnDownload: 'Download Image',
210
+ },
211
+ };
@@ -0,0 +1,211 @@
1
+ import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { SocialImageResizerUI } from '../ui';
4
+
5
+ const slug = 'redimensionador-imagenes-rrss';
6
+ const title = 'Redimensionador de Imágenes para Redes Sociales';
7
+ const description =
8
+ 'Adapta y recorta tus fotos para Instagram, TikTok, YouTube y más. Recorte inteligente y medidas oficiales actualizadas para 2026.';
9
+
10
+ const faqData = [
11
+ {
12
+ question: '¿Se pierde calidad al redimensionar la imagen?',
13
+ answer:
14
+ 'No, utilizamos algoritmos de suavizado de alta calidad. Se recomienda subir una imagen original con resolución igual o superior a la del formato de destino.',
15
+ },
16
+ {
17
+ question: '¿Es seguro subir mis fotos aquí?',
18
+ answer:
19
+ 'Totalmente. El procesamiento se realiza localmente en tu navegador mediante la API de Canvas. Tus fotos nunca se envían a ningún servidor.',
20
+ },
21
+ {
22
+ question: '¿Qué formatos son compatibles?',
23
+ answer:
24
+ 'Soportamos JPG, PNG, WebP y AVIF para la carga. La descarga se optimiza en formato JPG de alta calidad para máxima compatibilidad.',
25
+ },
26
+ ];
27
+
28
+ const howToData = [
29
+ {
30
+ name: 'Carga tu imagen',
31
+ text: 'Arrastra tu archivo o búscalo en tu dispositivo para comenzar el proceso.',
32
+ },
33
+ {
34
+ name: 'Elige el formato',
35
+ text: 'Selecciona en el menú lateral la red social y el tipo de publicación que necesitas.',
36
+ },
37
+ {
38
+ name: 'Ajusta y descarga',
39
+ text: 'Encuadra tu foto arrastrándola y usa el zoom para un recorte perfecto. Al terminar, haz clic en descargar.',
40
+ },
41
+ ];
42
+
43
+ const faqSchema: WithContext<FAQPage> = {
44
+ '@context': 'https://schema.org',
45
+ '@type': 'FAQPage',
46
+ mainEntity: faqData.map((item) => ({
47
+ '@type': 'Question',
48
+ name: item.question,
49
+ acceptedAnswer: { '@type': 'Answer', text: item.answer },
50
+ })),
51
+ };
52
+
53
+ const howToSchema: WithContext<HowToThing> = {
54
+ '@context': 'https://schema.org',
55
+ '@type': 'HowTo',
56
+ name: title,
57
+ description,
58
+ step: howToData.map((step, i) => ({
59
+ '@type': 'HowToStep',
60
+ position: i + 1,
61
+ name: step.name,
62
+ text: step.text,
63
+ })),
64
+ };
65
+
66
+ const appSchema: WithContext<SoftwareApplication> = {
67
+ '@context': 'https://schema.org',
68
+ '@type': 'SoftwareApplication',
69
+ name: title,
70
+ description,
71
+ applicationCategory: 'UtilityApplication',
72
+ operatingSystem: 'All',
73
+ offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
74
+ inLanguage: 'es',
75
+ };
76
+
77
+ export const content: ToolLocaleContent<SocialImageResizerUI> = {
78
+ slug,
79
+ title,
80
+ description,
81
+ faqTitle: 'Preguntas Frecuentes',
82
+ faq: faqData,
83
+ bibliographyTitle: 'Referencias',
84
+ bibliography: [
85
+ {
86
+ name: 'MDN Web Docs: Canvas API',
87
+ url: 'https://developer.mozilla.org/es/docs/Web/API/Canvas_API',
88
+ },
89
+ {
90
+ name: 'Sprout Social: Social Media Image Sizes Guide 2026',
91
+ url: 'https://sproutsocial.com/insights/social-media-image-sizes-guide/',
92
+ },
93
+ ],
94
+ howTo: howToData,
95
+ schemas: [faqSchema, howToSchema, appSchema],
96
+ seo: [
97
+ {
98
+ type: 'title',
99
+ text: 'Redimensionador de Imágenes para Redes Sociales',
100
+ level: 2,
101
+ },
102
+ {
103
+ type: 'paragraph',
104
+ html: 'En el ecosistema digital actual, la primera impresión es visual. Cada red social opera bajo algoritmos específicos que priorizan el contenido adaptado nativamente a sus proporciones. Nuestro redimensionador de imágenes para RRSS no es solo una herramienta técnica, es tu aliada para garantizar que tu mensaje llegue sin recortes indeseados ni pérdida de calidad.',
105
+ },
106
+ {
107
+ type: 'paragraph',
108
+ html: 'Ya sea que necesites convertir una foto horizontal en un vertical impactante para Instagram Stories o ajustar un diseño para el complejo banner de YouTube, nuestra utilidad utiliza un sistema de recorte inteligente que te permite posicionar y escalar tu imagen con precisión directamente en tu navegador.',
109
+ },
110
+ {
111
+ type: 'title',
112
+ text: 'Medidas Oficiales para Redes Sociales 2026',
113
+ level: 3,
114
+ },
115
+ {
116
+ type: 'grid',
117
+ columns: [
118
+ { title: 'Instagram — Post Cuadrado', body: '1080 × 1080 px · Ratio 1:1' },
119
+ { title: 'Instagram — Post Vertical', body: '1080 × 1350 px · Ratio 4:5' },
120
+ { title: 'TikTok / Reels — Vertical', body: '1080 × 1920 px · Ratio 9:16' },
121
+ { title: 'YouTube — Miniatura', body: '1280 × 720 px · Ratio 16:9' },
122
+ { title: 'YouTube — Banner de Canal', body: '2560 × 1440 px · Ratio 16:9' },
123
+ { title: 'X (Twitter) — Post Estándar', body: '1200 × 675 px · Ratio 16:9' },
124
+ { title: 'LinkedIn — Portada de Perfil', body: '1584 × 396 px · Ratio 4:1' },
125
+ ],
126
+ },
127
+ {
128
+ type: 'grid',
129
+ columns: [
130
+ {
131
+ title: 'Instagram',
132
+ body: 'El formato 1:1 sigue siendo un clásico, pero el 4:5 (Vertical) ocupa más espacio en pantalla y genera hasta un 30% más de interacción en el feed de noticias.',
133
+ },
134
+ {
135
+ title: 'Short Form Content',
136
+ body: 'Para TikTok y Reels, el estándar es 9:16. Este formato inmersivo requiere que el centro de atención esté perfectamente alineado para evitar ser tapado por la UI.',
137
+ },
138
+ {
139
+ title: 'Visual Engagement',
140
+ body: 'Desde miniaturas hasta banners, cada asset tiene un peso específico en el clic. El recorte preciso garantiza que los textos y elementos clave sean siempre legibles.',
141
+ },
142
+ {
143
+ title: 'Branding Profesional',
144
+ body: 'En redes profesionales como LinkedIn, la nitidez es autoridad. Los encabezados requieren ratios específicos para no aparecer pixelados en pantallas de alta densidad.',
145
+ },
146
+ ],
147
+ },
148
+ {
149
+ type: 'title',
150
+ text: 'Por qué importa el Aspect Ratio',
151
+ level: 3,
152
+ },
153
+ {
154
+ type: 'paragraph',
155
+ html: 'El Aspect Ratio es la proporción entre el ancho y el alto de una imagen. Ignorar esto obliga a las plataformas a forzar un zoom o añadir barras negras, lo que penaliza la estética y el alcance orgánico del contenido.',
156
+ },
157
+ {
158
+ type: 'list',
159
+ items: [
160
+ 'Evita que los textos o logos sean cortados por los iconos nativos de la aplicación.',
161
+ 'Mantiene la densidad de píxeles óptima sin deformar o estirar la fotografía original.',
162
+ 'Ahorra tiempo al centralizar todas las medidas oficiales en una sola herramienta web.',
163
+ 'Mejora la velocidad de carga al generar archivos con el peso y dimensiones exactas.',
164
+ ],
165
+ },
166
+ {
167
+ type: 'tip',
168
+ title: 'Consejo de Composición',
169
+ html: '<p>Al usar nuestra función de arrastre manual, intenta situar el elemento principal de tu foto en uno de los puntos de intersección de la cuadrícula. Esto crea composiciones más dinámicas y profesionales para tus redes.</p>',
170
+ },
171
+ {
172
+ type: 'title',
173
+ text: 'Pasos para un Recorte Perfecto',
174
+ level: 3,
175
+ },
176
+ {
177
+ type: 'list',
178
+ items: [
179
+ 'Selecciona tu formato: Elige en el menú lateral la plataforma y el tipo de publicación.',
180
+ 'Carga la imagen: Arrastra tu archivo o utiliza el selector para importar tu fotografía.',
181
+ 'Ajusta el encuadre: Arrastra la foto dentro del área visible y usa el zoom para mayor precisión.',
182
+ 'Exportación inmediata: Haz clic en descargar para obtener tu imagen lista para publicar.',
183
+ ],
184
+ },
185
+ {
186
+ type: 'title',
187
+ text: 'Privacidad y Rendimiento Local',
188
+ level: 3,
189
+ },
190
+ {
191
+ type: 'paragraph',
192
+ html: 'Tu privacidad es absoluta. Este redimensionador procesa las imágenes localmente en tu navegador mediante Canvas API. Tus fotografías nunca se suben a ningún servidor externo, lo que garantiza una seguridad total y una velocidad de procesamiento instantánea.',
193
+ },
194
+ {
195
+ type: 'title',
196
+ text: 'Optimización Profesional para Redes Sociales',
197
+ level: 3,
198
+ },
199
+ {
200
+ type: 'paragraph',
201
+ html: 'Adaptar tu contenido visual de forma profesional es una estrategia de crecimiento directo. Nuestra herramienta simplifica el flujo de trabajo de creadores y community managers, asegurando que cada post luzca perfecto en cualquier dispositivo y plataforma.',
202
+ },
203
+ ],
204
+ ui: {
205
+ sidebarTitle: 'Formatos RRSS',
206
+ uploadTitle: 'Cargar Imagen',
207
+ uploadSubtitle: 'Arrastra tu foto aquí o haz clic para explorar',
208
+ btnReset: 'Reiniciar',
209
+ btnDownload: 'Descargar Imagen',
210
+ },
211
+ };
@@ -0,0 +1,211 @@
1
+ import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { SocialImageResizerUI } from '../ui';
4
+
5
+ const slug = 'redimensionneur-images-reseaux-sociaux';
6
+ const title = "Redimensionneur d'Images pour les Réseaux Sociaux";
7
+ const description =
8
+ "Adaptez et recadrez vos photos pour Instagram, TikTok, YouTube et plus encore. Recadrage intelligent avec les dimensions officielles mises à jour pour 2026.";
9
+
10
+ const faqData = [
11
+ {
12
+ question: "La qualité est-elle perdue lors du redimensionnement ?",
13
+ answer:
14
+ "Non, nous utilisons des algorithmes de lissage de haute qualité. Il est recommandé de télécharger une image originale avec une résolution égale ou supérieure à celle du format cible.",
15
+ },
16
+ {
17
+ question: "Est-il sûr de télécharger mes photos ici ?",
18
+ answer:
19
+ "Complètement. Le traitement est effectué localement dans votre navigateur via l'API Canvas. Vos photos ne sont jamais envoyées à un serveur.",
20
+ },
21
+ {
22
+ question: "Quels formats sont pris en charge ?",
23
+ answer:
24
+ "Nous prenons en charge JPG, PNG, WebP et AVIF pour le chargement. Les téléchargements sont optimisés en JPG haute qualité pour une compatibilité maximale.",
25
+ },
26
+ ];
27
+
28
+ const howToData = [
29
+ {
30
+ name: "Chargez votre image",
31
+ text: "Faites glisser votre fichier ou parcourez votre appareil pour commencer le processus.",
32
+ },
33
+ {
34
+ name: "Choisissez le format",
35
+ text: "Sélectionnez le réseau social et le type de publication dont vous avez besoin dans le menu latéral.",
36
+ },
37
+ {
38
+ name: "Ajustez et téléchargez",
39
+ text: "Cadrez votre photo en la faisant glisser et utilisez le zoom pour un recadrage parfait. Une fois terminé, cliquez sur télécharger.",
40
+ },
41
+ ];
42
+
43
+ const faqSchema: WithContext<FAQPage> = {
44
+ '@context': 'https://schema.org',
45
+ '@type': 'FAQPage',
46
+ mainEntity: faqData.map((item) => ({
47
+ '@type': 'Question',
48
+ name: item.question,
49
+ acceptedAnswer: { '@type': 'Answer', text: item.answer },
50
+ })),
51
+ };
52
+
53
+ const howToSchema: WithContext<HowToThing> = {
54
+ '@context': 'https://schema.org',
55
+ '@type': 'HowTo',
56
+ name: title,
57
+ description,
58
+ step: howToData.map((step, i) => ({
59
+ '@type': 'HowToStep',
60
+ position: i + 1,
61
+ name: step.name,
62
+ text: step.text,
63
+ })),
64
+ };
65
+
66
+ const appSchema: WithContext<SoftwareApplication> = {
67
+ '@context': 'https://schema.org',
68
+ '@type': 'SoftwareApplication',
69
+ name: title,
70
+ description,
71
+ applicationCategory: 'UtilityApplication',
72
+ operatingSystem: 'All',
73
+ offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
74
+ inLanguage: 'fr',
75
+ };
76
+
77
+ export const content: ToolLocaleContent<SocialImageResizerUI> = {
78
+ slug,
79
+ title,
80
+ description,
81
+ faqTitle: 'Questions Fréquentes',
82
+ faq: faqData,
83
+ bibliographyTitle: 'Références',
84
+ bibliography: [
85
+ {
86
+ name: 'MDN Web Docs: Canvas API',
87
+ url: 'https://developer.mozilla.org/fr/docs/Web/API/Canvas_API',
88
+ },
89
+ {
90
+ name: 'Sprout Social: Social Media Image Sizes Guide 2026',
91
+ url: 'https://sproutsocial.com/insights/social-media-image-sizes-guide/',
92
+ },
93
+ ],
94
+ howTo: howToData,
95
+ schemas: [faqSchema, howToSchema, appSchema],
96
+ seo: [
97
+ {
98
+ type: 'title',
99
+ text: "Redimensionneur d'Images pour les Réseaux Sociaux",
100
+ level: 2,
101
+ },
102
+ {
103
+ type: 'paragraph',
104
+ html: "Dans l'écosystème numérique actuel, la première impression est visuelle. Chaque réseau social fonctionne selon des algorithmes spécifiques qui privilégient le contenu adapté nativement à ses proportions. Notre redimensionneur d'images pour les réseaux sociaux n'est pas seulement un outil technique, c'est votre allié pour garantir que votre message arrive sans recadrages indésirables ni perte de qualité.",
105
+ },
106
+ {
107
+ type: 'paragraph',
108
+ html: "Que vous ayez besoin de convertir une photo paysage en un vertical percutant pour Instagram Stories ou d'adapter un design pour la bannière complexe de YouTube, notre utilitaire utilise un système de recadrage intelligent qui vous permet de positionner et de redimensionner votre image avec précision directement dans votre navigateur.",
109
+ },
110
+ {
111
+ type: 'title',
112
+ text: 'Dimensions Officielles pour les Réseaux Sociaux 2026',
113
+ level: 3,
114
+ },
115
+ {
116
+ type: 'grid',
117
+ columns: [
118
+ { title: 'Instagram — Post Carré', body: '1080 × 1080 px · Ratio 1:1' },
119
+ { title: 'Instagram — Post Vertical', body: '1080 × 1350 px · Ratio 4:5' },
120
+ { title: 'TikTok / Reels — Vertical', body: '1080 × 1920 px · Ratio 9:16' },
121
+ { title: 'YouTube — Miniature', body: '1280 × 720 px · Ratio 16:9' },
122
+ { title: 'YouTube — Bannière de Chaîne', body: '2560 × 1440 px · Ratio 16:9' },
123
+ { title: 'X (Twitter) — Post Standard', body: '1200 × 675 px · Ratio 16:9' },
124
+ { title: 'LinkedIn — Couverture de Profil', body: '1584 × 396 px · Ratio 4:1' },
125
+ ],
126
+ },
127
+ {
128
+ type: 'grid',
129
+ columns: [
130
+ {
131
+ title: 'Instagram',
132
+ body: "Le format carré 1:1 reste un classique, mais le 4:5 (vertical) occupe plus d'espace à l'écran et génère jusqu'à 30% d'engagement supplémentaire dans le fil d'actualité.",
133
+ },
134
+ {
135
+ title: 'Short Form Content',
136
+ body: "Pour TikTok et Reels, le standard est le 9:16. Ce format immersif exige que le centre d'attention soit parfaitement aligné pour éviter d'être caché par l'interface de l'application.",
137
+ },
138
+ {
139
+ title: 'Visual Engagement',
140
+ body: "Des miniatures aux bannières, chaque asset a un poids spécifique sur le taux de clics. Un recadrage précis garantit que les textes et éléments clés sont toujours lisibles.",
141
+ },
142
+ {
143
+ title: 'Branding Professionnel',
144
+ body: "Sur les réseaux professionnels comme LinkedIn, la netteté est synonyme d'autorité. Les en-têtes nécessitent des ratios spécifiques pour ne pas apparaître pixelisés sur les écrans haute densité.",
145
+ },
146
+ ],
147
+ },
148
+ {
149
+ type: 'title',
150
+ text: "Pourquoi le Ratio d'Aspect est Important",
151
+ level: 3,
152
+ },
153
+ {
154
+ type: 'paragraph',
155
+ html: "Le ratio d'aspect est la relation proportionnelle entre la largeur et la hauteur d'une image. L'ignorer oblige les plateformes à zoomer ou à ajouter des barres noires, ce qui pénalise l'esthétique et la portée organique du contenu.",
156
+ },
157
+ {
158
+ type: 'list',
159
+ items: [
160
+ "Évite que les textes ou logos soient coupés par les icônes natives de l'application.",
161
+ "Maintient une densité de pixels optimale sans déformer ni étirer la photo originale.",
162
+ "Fait gagner du temps en centralisant toutes les mesures officielles dans un seul outil web.",
163
+ "Améliore la vitesse de chargement en générant des fichiers avec le poids et les dimensions exacts.",
164
+ ],
165
+ },
166
+ {
167
+ type: 'tip',
168
+ title: 'Conseil de Composition',
169
+ html: "<p>Lors de l'utilisation de notre fonction de glissement manuel, essayez de placer le sujet principal de votre photo sur l'un des points d'intersection de la grille. Cela crée des compositions plus dynamiques et professionnelles pour vos réseaux sociaux.</p>",
170
+ },
171
+ {
172
+ type: 'title',
173
+ text: 'Étapes pour un Recadrage Parfait',
174
+ level: 3,
175
+ },
176
+ {
177
+ type: 'list',
178
+ items: [
179
+ "Sélectionnez votre format : Choisissez la plateforme et le type de publication dans le menu latéral.",
180
+ "Chargez l'image : Faites glisser votre fichier ou utilisez le sélecteur pour importer votre photo.",
181
+ "Ajustez le cadre : Faites glisser la photo dans la zone visible et utilisez le zoom pour plus de précision.",
182
+ "Export immédiat : Cliquez sur télécharger pour obtenir votre image prête à publier.",
183
+ ],
184
+ },
185
+ {
186
+ type: 'title',
187
+ text: 'Confidentialité et Traitement Local',
188
+ level: 3,
189
+ },
190
+ {
191
+ type: 'paragraph',
192
+ html: "Votre confidentialité est absolue. Ce redimensionneur traite les images localement dans votre navigateur via l'API Canvas. Vos photos ne sont jamais téléchargées sur un serveur externe, garantissant une sécurité totale et une vitesse de traitement instantanée.",
193
+ },
194
+ {
195
+ type: 'title',
196
+ text: 'Optimisation Professionnelle pour les Réseaux Sociaux',
197
+ level: 3,
198
+ },
199
+ {
200
+ type: 'paragraph',
201
+ html: "Adapter votre contenu visuel de manière professionnelle est une stratégie de croissance directe. Notre outil simplifie le flux de travail des créateurs et des community managers, garantissant que chaque post soit parfait sur n'importe quel appareil et plateforme.",
202
+ },
203
+ ],
204
+ ui: {
205
+ sidebarTitle: 'Formats Sociaux',
206
+ uploadTitle: 'Charger une Image',
207
+ uploadSubtitle: 'Faites glisser votre photo ici ou cliquez pour parcourir',
208
+ btnReset: 'Réinitialiser',
209
+ btnDownload: "Télécharger l'Image",
210
+ },
211
+ };
@@ -0,0 +1,34 @@
1
+ import type { SocialToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
2
+
3
+ import SocialImageResizerComponent from './component.astro';
4
+ import SocialImageResizerSEO from './seo.astro';
5
+ import SocialImageResizerBibliography from './bibliography.astro';
6
+
7
+ import type { SocialImageResizerUI } from './ui';
8
+ export type SocialImageResizerLocaleContent = ToolLocaleContent<SocialImageResizerUI>;
9
+
10
+ import { content as es } from './i18n/es';
11
+ import { content as en } from './i18n/en';
12
+ import { content as fr } from './i18n/fr';
13
+
14
+ export const socialImageResizer: SocialToolEntry<SocialImageResizerUI> = {
15
+ id: 'social-image-resizer',
16
+ icons: {
17
+ bg: 'mdi:image-size-select-large',
18
+ fg: 'mdi:crop',
19
+ },
20
+ i18n: {
21
+ es: async () => es,
22
+ en: async () => en,
23
+ fr: async () => fr,
24
+ },
25
+ };
26
+
27
+ export { SocialImageResizerComponent, SocialImageResizerSEO, SocialImageResizerBibliography };
28
+
29
+ export const SOCIAL_IMAGE_RESIZER_TOOL: ToolDefinition = {
30
+ entry: socialImageResizer,
31
+ Component: SocialImageResizerComponent,
32
+ SEOComponent: SocialImageResizerSEO,
33
+ BibliographyComponent: SocialImageResizerBibliography,
34
+ };