El sistema editorial de WordPress genera miniaturas de imágenes y recortes solo en los siguientes tamaños:
- Miniatura (150 px, corte cuadrado);
- Tamaño mediano (máximo 300 px en anchura y altura);
- Imagen grande (máximo 1024 px en anchura y altura);
- Imagen original (tamaño original).
Como puede ver, la elección no es muy amplia. Aquí le mostramos cómo añadir recortes personalizados y tamaños de imagen sin tener que editar el código fuente de su sitio.
¿Por qué es importante generar vistas previas de imágenes en diferentes tamaños? Si utiliza los tamaños de imagen originales que cargó en todas partes (por ejemplo, 1920 × 1080 píxeles), esto significaría que incluso en el lugar donde se muestra la imagen en el área de 640 × 360, el gran tamaño original se cargará en el fondo. El navegador reduce la imagen para el visitante solo después de la descarga. La página y su carga son innecesariamente más lentas, el usuario ha descargado innecesariamente más datos y la carga del servidor es mayor. Esto puede ser visto no solo por un visitante del sitio, sino también por los motores de búsqueda que penalizan los sitios más lentos por algún tiempo con peores posiciones de búsqueda.
Simple Image Sizes – Añadir tamaños de imagen personalizados en unos pocos clics
El complemento gratuito Simple Image Sizes es una solución elegante para crear sus propios tamaños de imagen y recortes. Además de crearlos, proporciona una configuración clara de las dimensiones que el usuario ve en el editor y que se usan solo para la plantilla de página.
Para instalar y configurar el complemento, haga lo siguiente:
- Vaya al sitio del sistema de gestión de contenido de WordPress y seleccione "Complementos"> "Instalar complementos".
- Busque "Simple Image Sizes".
- Seleccione "Instalar" y active el complemento haciendo clic en el botón "Activar".
- Vaya a "Configuración" > "Medios", donde puede ver un resumen de los tamaños de imagen definidos.
- Navegue hacia abajo y haga clic en el botón "Añadir un nuevo tamaño de miniatura", que se utiliza para añadir un nuevo tamaño de vista previa.
- Después de hacer clic, seleccione el nombre y confirme haciendo clic en "Validar nombre de tamaño de imagen".
- Aparecerá una nueva fila con el título seleccionado. Ahora seleccione la anchura y la altura preferida. Use la ventana "Nombre público" para seleccionar un nombre que verá en el editor.
- El elemento “Recortar" es muy importante. Esto define cómo se cortará la imagen, dónde se cortará y qué se conservará. La opción más común "Centrar centro" marca el corte del centro de la imagen. Sin embargo, depende de usted qué corte elija. Si, por ejemplo, sabe que una parte importante de la imagen en su caso se encuentra regularmente en la esquina inferior derecha, seleccione "Abajo derecha".
- La última opción es si el nuevo tamaño se mostrará en el editor, es decir, si lo inserta en páginas y artículos. En nuestro caso, hemos marcado el elemento y hemos hecho clic en el botón final "Validar".
- Ahora cargue una nueva imagen y debería ver la opción de insertarla en un nuevo tamaño en el editor. Esta opción no estará disponible todavía para imágenes existentes. Veamos ahora cómo solucionarlo.
Aquí puede ver que se han agregado cuatro tamaños de imagen más que se adaptan mejor al contenido y que corresponden a la plantilla del sitio a los cuatro tamaños de imagen originales.
¿Cómo regenerar recortes de imagen?
Después de crear un nuevo tamaño de imagen y recorte, puede observar que los archivos multimedia que cargó antes de crear un nuevo tamaño no se pueden insertar en el artículo o la página en el nuevo tamaño. La razón es que todas los tamaños y recortes se generan en el momento en que se carga la imagen. Los creadores del complemento pensaron incluso en eso e incluyeron la función de "Regeneración de miniaturas".
Puede encontrarla en la misma página que para configurar los tamaños de imagen en el menú "Configuración" > "Medios". En la parte inferior de la página, puede seleccionar qué tamaños de imagen se van a regenerar. Como primera cosa, le recomendamos que desactive todos los tamaños haciendo clic en la primera casilla. Luego, simplemente seleccione las dimensiones recién añadidas creadas al principio y haga clic en el botón "Regenerar miniaturas".
Se calculará la cantidad de tiempo que se tarda en generar las nuevas miniaturas. Entonces solo espere hasta que todo esté terminado. Después de generar las vistas previas con éxito, el editor tendrá la opción de insertar un nuevo tamaño para todas las imágenes, incluidas las cargadas antes de crear su propio tamaño de vista previa.