Todo cuanto precisa saber sobre el tamaño de la imagen de WordPress

El tamaño de la imagen de WordPress es más complejo de lo que cree. Es esencial entender de qué manera marcha el tamaño de la imagen en WordPress, cuál es la imagen predeterminada y cómo definir un tamaño de imagen personalizado para una administración eficiente de su sitio web.

Una vez que haya gobernado esta información, asegúrese de tener el tamaño y el tipo de imagen correctos en el sitio preciso para aprovechar al máximo su estrategia de contenido visual.

Estas tácticas asimismo aumentan el valor para comunicar de sus mensajes, lo que incrementa la visibilidad y el tráfico. Las estadísticas detallan que tras tres días, los lectores recuerdan solo el 10% del contenido textual que leen, pero si añade imágenes visualmente atractivas a su contenido, ese número incrementa hasta el 65%.

Aprenda todo sobre el tamaño de la imagen de WordPress en esta guía detallada.

¿emocionado? ¡Vamos!

De qué forma gestiona WordPress las imágenes subidas

Cargar imágenes en WordPress es muy simple, pero suceden varias cosas cuando se procesan en un fondo de pantalla de WordPress.

En el momento en que carga una imagen, WordPress primero crea tres imágenes de diferentes tamaños. Esto significa que obtienes cuatro imágenes por cada imagen que subes:

• Vista en miniatura
• Moderar
• Grande
• Tamaño original

WordPress crea todos estos tamaños diferentes para prestar la imagen mucho más correcta para cada visitante. Su portal web siempre muestra a los que leen la imagen adecuada en función del dispositivo que utilizan, lo que hace que su experiencia sea mucho más rápida y mejor.

Siempre puede editar la imagen de forma manual para obtener estas dimensiones auxiliares, pero no es moco de pavo de llevar a cabo en una herramienta como Photoshop. Esto implica mucho trabajo tedioso, por lo que WordPress le ahorra problemas.

Conocer el tamaño de la imagen de WordPress puede parecer simple, pero sin la información correcta, puede perder la capacidad de comunicar visitantes y contenido.Realice clic en el tweet

Tamaño de imagen de WordPress: conceptos básicos a tener en cuenta

Antes de profundizar en los aspectos especialistas de los tamaños de imagen de WordPress, debe entender algunas referencias importantes.

Hablamos de cómo WordPress crea tres tamaños de imagen estándar para usted, pero ¿qué pasa si necesita un tamaño que difiera del tamaño estándar de WordPress? ¿Y si quieres mucho más tallas?

¡buenas novedades! Puedes llevar a cabo esto de forma fácil. Con WordPress, puede cambiar el tamaño de imagen predeterminado y agregar tantos otros tamaños como quiera. Explicaremos esto con mucho más detalle mucho más adelante.

Pero antes de empezar, debe saber que hay requisitos especiales a fin de que pueda trabajar de la manera que quiera.

Uno es que debes procurar subir la imagen mucho más grande que necesitas. Si bien WordPress lo reduce en dispositivos mucho más pequeños, emplea tamaño terminado (tamaño original) donde la imagen debe ser la más grande.

Suponga que la imagen cargada es más pequeña que el tamaño máximo especificado en WordPress. En un caso así, WordPress no exhibe esa imagen adecuadamente. Además, la calidad se estropea significativamente.

En otras palabras, también debe asegurarse de no cargar una imagen que exceda el tamaño máximo requerido. WordPress jamás utiliza semejantes imágenes pues son muchos grandes y ocupan espacio insignificante en su servidor.

Por lo tanto, debe contrastar el tamaño de la imagen cargada y asegurarse de que tenga el tamaño máximo requerido antes de cargarla en WordPress, pero no más grande que ese tamaño.

¿Dónde y de qué manera guarda WordPress las imágenes?

En lo que se refiere al panel de control, WordPress guarda las imágenes que descarga en su biblioteca multimedia. Para poder ver todas las imágenes descargadas, ponga el cursor sobre las opciones de medios y lleve a cabo click en la biblioteca.

Puede ordenarlos por tipo de medio (imagen, video, audio, etcétera.) y fecha, pero recuerde que si no lo está Establecer.

Asimismo hay un cuadro de búsqueda a la derecha que le permite buscar imágenes descargadas. Sencillamente ingrese las palabras que utiliza en el título, descripción o descripción de la imagen.

La imagen se almacena en la carpeta de descargas de su sitio web (wp-content / upload /). Debe emplear un cliente FTP / SFTP para entrar a esta carpeta; La carpeta de descarga de su sitio web contiene varios subdirectorios que guardan la imagen por fecha de carga (suponiendo que tenga la opción de organizar por fecha Establecer).

Asimismo puede crear carpetas adaptadas para sus archivos multimedia, pero le aconsejamos que lo lleve a cabo solo si se considera un usuario adelantado.

¿Cuál es el tamaño de imagen ya establecido de WordPress?

Cuando se trata de WordPress y tamaños de imagen, siempre y en todo momento miramos cuatro imágenes diferentes, incluido el fichero de imagen original y tres tamaños diferentes que WordPress crea de forma predeterminada:

• Tamaño de la uña del pulgar: 150 píxeles (cuadrado)
• Medio: Ancho y alto máximo 300 píxeles
• talla grande: Ancho y alto máximo 1024 pixeles
• Tamaño terminado: El tamaño original de la imagen.

Como se mencionó previamente, si solo quiere usar estos tamaños de imagen estándar, deberá cargar una imagen de 1024 píxeles. Esto deja que la imagen se muestre correctamente hasta el tamaño máximo, lo que puede no ser posible si el tamaño de la imagen es menor que el tamaño máximo empleado por WordPress (el valor ya establecido es 1024 pixeles).

Cambie el tamaño de imagen predeterminado (y si lo precisa)

Más allá de que el tamaño de imagen ya establecido de WordPress es conveniente para la mayoría de los usuarios, algunos usuarios pueden tener diferentes requisitos. Prefiere una miniatura un poco más grande o un tamaño de imagen grande mucho más pequeño.

Si está editando la mayor parte de las imágenes que descarga, tiene sentido cambiar el tamaño de imagen predeterminado en WordPress, por el hecho de que el tamaño de imagen ya establecido en WordPress no se adapta a su caso de empleo.

Antes de agregar un nuevo tamaño de imagen personalizado aparte del tamaño de imagen estándar, recuerde que está guardando mucho más archivos de imagen de los que precisa en la base de datos del ubicación. Esto puede ocasionar problemas de desempeño en su página web y emplear mucho más espacio en disco del que precisa.

Lo mismo sucede con los sitios web basados ​​en imágenes, que deben adherirse a un determinado tamaño de imagen. Los fotógrafos, diseñadores y otros que ofrecen muchas imágenes desean sostener el mismo tamaño en todo el lugar para garantizar la coherencia.

De la misma forma, ciertas páginas de destino también tienen que enseñar un tamaño de imagen determinado, y es posible que el tamaño de imagen por defecto de WordPress no se ajuste. Las tiendas on-line a menudo precisan emplear miniaturas mucho más enormes para enseñar información más descriptiva.

Existen muchas razones por las que es posible que desee cambiar el tamaño de imagen ya establecido, pero tenga una idea.

WordPress también comprende esto, con lo que puede cambiar estos valores por defecto.

Los pasos cambian WordPress Tamaño de imagen estándar

Este es un proceso pasito a pasito para cambiar el tamaño de imagen ya establecido en WordPress.

Etapa 1: Mueva el puntero del mouse sobre Detallar Y lleve a cabo clic en medios de comunicación Opciones que aparecen:

La configuración de medios de WordPress cambia el tamaño de imagen ya establecido.

Paso 2: Cambie el tamaño al tamaño que desee editando el número como se expone ahora:

Ejemplo de actualización del tamaño de la imagen en la configuración de medios.

Paso 3: Clickear almacena los cambios Botón en la parte de abajo.

Todas y cada una de las imágenes que cargue aquí en este momento emplearán estos nuevos tamaños estándar.

Ciertos tutoriales recomiendan que escriba "0" como tamaño de imagen por defecto. Sin embargo, no hacemos esto, aunque puede ayudar a ahorrar espacio.

Si cambia estos valores a "0", WordPress empleará sus imágenes (originales) de tamaño terminado en todas las áreas y en todos y cada uno de los dispositivos, aumentando el uso de ancho de banda en su página web. Además, es casi seguro que esto ralentizará el tiempo de carga de la página en la parte donde se muestran muchas de estas imágenes.

Cómo agregar un tamaño de imagen personalizado a WordPress

Si desea cambiar el tamaño de todas sus imágenes anteriores de WordPress a estos nuevos tamaños, hay varias extensiones excelentes que tenemos la posibilidad de emplear en detalle a continuación.

Para los individuos que acostumbran a utilizar varios tipos diferentes de imágenes, puede ser importante utilizar más tamaños de imagen que los tres tamaños estándar proporcionados por WordPress.

Para imágenes estándar, la imagen ya establecida puede ser bastante, pero las imágenes como ventanas emergentes, widgets o controles deslizantes tienen la posibilidad de necesitar tamaños de imagen mucho más grandes.

Cambiar el tamaño de la imagen le brinda La flexibilidad mejora el desempeño de su lugar de WordPress y ahorra mucho tiempo ajustando el tamaño de la imagen de uno en uno.

Ahora que hemos reconocido esto como la base, echemos un vistazo más de cerca al desarrollo implicado en agregar estos tamaños de imagen customizados a su lugar de WordPress.

Tienes 2 opciones aquí. La primera es emplear una extensión que lo realice todo por usted con unos pocos clicks. La segunda es una forma manual de agregar la cadena de código requerida al archivo del lugar.

Veamos primero el método de expansión.

Utilice la regeneración de imagen y escoja el recorte para añadir tamaños de imagen personalizados

El complemento Image Regenerate & Select Crop va más allá de las miniaturas Regenerate (que se describen a continuación) para aceptar una mayor personalización y ocupación.

Además de cambiar la imagen predeterminada, puede cambiar el tamaño de cualquier imagen que existe para que se ajuste al tamaño de imagen que quiera, establecer la configuración predeterminada de la imagen y hacer miniaturas.

Ajuste la configuración del tamaño de la imagen con el complemento Image Regenerate & Select Crop.

Una vez instalado y activado, puede crear cualquier número de nuevos tamaños de imagen customizados usando WordPress estándar. Configuración> Medios Página.

Agregar de forma manual un tamaño de imagen personalizado

Si bien este es un desarrollo parcialmente simple y directo, si tiene problemas con estas personalizaciones, lo primero es realizar una copia de seguridad de su cibersitio. En el momento en que se complete la copia de seguridad, vaya al panel de control de su sitio de WordPress.

En el momento en que llegues, pone el mouse sobre él. Ver Seleccione una opción de menú y editar (Esto puede nombrarse Editor de temas Bajo ciertas situaciones).

Ahora encontrarás Function.php Archivo y verifique si el siguiente código ya existe (use la función de búsqueda para hallarlo velozmente). Si ya existe, no se necesita ninguna acción.

En caso contrario, debe agregar esta cadena al archivo:

add_theme_support( 'post-thumbnails' );

Agregue un tamaño de imagen personalizado para enganchar functions.php.

Tras añadir este código, haga clic en Actualiza el archivo El botón activa una función que le permite crear tamaños de imagen personalizados.

En este momento es el momento de agregar el código para el tamaño de imagen personalizado que quiera. Busque la cadena "add_image_size" en su archivo. Function.php Fichero, porque aquí necesitas modificar:

add_image_size( 'my-custom-image-size', 800, 640 );

Debe actualizar el contenido de las comillas individuales con el contenido que quiere cambiar de nombre al nuevo tamaño de imagen personalizado. Recomendamos que sea fácil y claro (por servirnos de un ejemplo, "Imagen primordial e invertida").

Tras procesar el nombre, debe especificar el tamaño de la imagen usted mismo. El primer valor es el ancho de la imagen y el segundo valor es la altura de la imagen.

Esta es una captura de pantalla que muestra lo que hemos añadido. Function.php Archivo:

Agrega un tamaño de imagen personalizado a functions.php.

Comprender la personalización

Si la imagen se reduce sin recortar, es solo una versión reducida de la imagen original. Sin embargo, si está "recortada" o recortada, la parte recortada se suprime de la imagen final.

Es como cortar físicamente una imagen. Si cortas el retrato con unas tijeras y cortas todo por debajo de los hombros de la persona, habrás "recortado" la fotografía. Marcha de la misma forma digitalmente.

La meta es achicar el tamaño del fichero de la imagen porque recortar no es la opción adecuada. Elimina elementos que tal vez quiera preservar manteniendo un tamaño del archivo grande. En otras expresiones, el recorte puede ser útil para tamaños de imagen que tienen que ajustarse exactamente a un cierto tamaño, como

Por poner un ejemplo, el tema primordial de las imágenes mostradas puede ser demasiado pequeño. Si cambia el tamaño sin cortar, aún deberían conseguir la exposición que desea. Por tanto, averigüe cuál es el más destacable método para los diferentes tipos de imágenes que emplea y ajuste la función de recorte consecuentemente.

Si añade un tamaño de imagen personalizado, puede hacer que WordPress recorte de manera automática la imagen al tamaño que escoja y al tamaño original. Debe agregar "verdadero" en el final del código.

Este es asimismo nuestro ejemplo anterior en el momento en que la función de recorte está activada.

add_image_size( 'name-for-your-custom-image', 800, 640, true );

Sin embargo, si no quiere cortar la imagen, puede utilizar un valor falso en vez de verdadero u omitir los dos. Si no pone ninguno de estos, el código aceptará automáticamente la opción "falso". De esta forma, WordPress no recorta sus imágenes.

Agrega un tamaño de imagen personalizado a tu tema

En el momento en que haya creado el tamaño de imagen personalizado requerido, también va a deber actualizar el código en el diseño. Esto deja que el tema muestre estos tamaños de imagen customizados según sea preciso.

Si es un principiante en la edición de código, haga una backup de su sitio web de antemano.

Ahora precisa conseguir su fichero de tema en el bucle de mensajes y añadir el próximo código:

the_post_thumbnail( 'your-specified-image-size' );

Realice clic para encontrar este archivo Editor de temas debajo Mirar Alrededores. Buscar Index.php El fichero aquí: este es un archivo de tema que contiene un bucle de mensaje editable.

Cuando lo halle, añada el código anterior como se muestra en la siguiente imagen:

Agregue un tamaño de imagen personalizado para enganchar functions.php.

De la misma manera, es preferible reemplazar la sección "novedosa función de la página de inicio" con el nombre del tamaño de imagen personalizado que creó.

Cuando haya añadido este código y actualizado el fichero, verá un tamaño de imagen personalizado en su biblioteca de medios. Sube una nueva imagen para probarlo.

Actualizar la miniatura previo

Crear y agregar tamaños de imagen personalizados se siente bien, pero le queda una cosa sin terminar: ¿qué ocurre con todas y cada una de las imágenes viejas que ha subido?

No se preocupe: ¡los geniales complementos de WordPress pueden hacer este trabajo de manera muy conveniente! Veamos de qué manera tienen la posibilidad de guiarte a lidiar con las miniaturas antiguas.

Extensión de miniatura rediseñada

En el momento en que actualiza las miniaturas, puede volver a cargar de forma automática las imágenes a nuevos tamaños, incluido cualquier tamaño de imagen personalizado que agregue.

Para instalarlo, pase el mouse sobre el mouse Conectar Opción de menú y haga clic en Añadir uno nuevoLuego, redacta "nuevas miniaturas" en el cuadro de búsqueda.

Lleve a cabo click en él e instale el complemento Regenerate Thumbnails disponer ahora Solucionar.

Instale el complemento de actualización de miniaturas.

Cuando la instalación esté completa, realice click en Encender Botón para comenzar la operación.

Mueva el puntero del mouse sobre Herramienta Menú de la izquierda y realice click en Nuevamente una miniatura:

Vuelva a hacer la página de configuración de la extensión de miniaturas.

Puede hacer clic Vuelva a hacer miniaturas para todos [#] en el anexo Cree nuevos tamaños de imagen para todas y cada una de las imágenes viejas.

Como puede ver en la imagen de arriba, Regenerate Thumbnails también cuenta todos los tamaños de imagen en la actualidad activos en su sitio web.

Posiblemente halle algunos tamaños de imagen con los que no esté familiarizado. Por lo general, se crean mediante complementos, en especial si se usan para progresar el aspecto, la apariencia o la funcionalidad de un portal de internet.

Utilice el editor de tamaño de imagen integrado de WordPress

Como se mencionó previamente, solo debe crear tamaños de imagen customizados que use frecuentemente. Para los tamaños de imagen que solo desea utilizar en ciertos casos, tiene sentido modificar manualmente los tamaños de imagen utilizando el editor de tamaño de imagen integrado en WordPress.

Le proporcionaremos un tutorial rápido sobre de qué forma cambiar el tamaño de una imagen de forma rápida y sencilla con el editor integrado.

Haga click primero medios de comunicación El menú se desplaza a la biblioteca de medios. Luego lleve a cabo click en el ajuste de imagen que quiere cambiar de tamaño.

entonces haga click en Modificar foto Botón de forma directa bajo la imagen:

Botón Editar imagen.

Puede ver el tamaño de la imagen de hoy y puede ajustarlo aquí. Simplemente ingrese el tamaño de imagen que desee y realice clic en marco Button y ya está listo para empezar.

Cambiar el tamaño de la imagen.

El cambio de tamaño se guarda automáticamente por una docena marcoSi por alguna razón no le agrada el tamaño de una exclusiva imagen, siempre y en todo momento puede usarla Restaurar la imagen original Configuración (justo debajo del campo de tamaño de la imagen).

Editar imágenes en WordPress Gutenberg

Con Gutenberg, puede cambiar de manera rápida el tamaño de la imagen en el momento en que agrega la imagen mientras escribe un mensaje.

Cambie el tamaño de la imagen a través de Gutenberg.

Como se expone en la imagen de arriba, en el momento en que carga una imagen, cuando crea un correo en Gutenberg, puede elegir el tamaño de la imagen existente o cambiar el tamaño de la imagen en las opciones de envío.

Si ha agregado un nuevo tamaño de imagen personalizado al fichero de diseño, entonces Tamaño de la imagen Desde el menú desplegable.

También puede cambiar el tamaño de la imagen usando el campo ahora. Todo lo que debe realizar es entrar el tamaño que quiere en el campo y la imagen se ajustará de manera automática a la novedosa configuración.

Optima la imagen

Las normas similares con la imagen que no mencionan la optimización de la imagen están incompletas. Más allá de que hablamos en profundidad de la optimización de imágenes, no tiene nada de malo nombrar algunos consejos veloces.

Finalmente, cuando agrega tamaños de imagen personalizados, precisa saber de qué forma puede mejorar sus imágenes para asegurarse de que no afecten el desempeño de su portal web o consuman mucho más recursos del servidor de los necesarios.

A continuación, se tienen dentro algunos consejos veloces que le ayudarán a empezar a optimizar su imagen.

Especifique el tipo del archivo

Sencillamente seleccione el tipo de archivo preciso para su imagen para reducir significativamente el tamaño. Si bien hay muchos tipos de ficheros de imagen, la gran mayoría son ficheros JPEG o PNG.

Para imágenes en color, JPEG gana. Asimismo puede comprimir aún más el archivo JPEG para achicar el tamaño del fichero, y reducirá la calidad solo un poco (si se hace apropiadamente).

PNG, por otro lado, suele ser una mejor opción para dibujos, artículo, la mayor parte de capturas de pantalla y gráficos.

Cambiar el tamaño de la imagen

Cambiar el tamaño de una imagen es una forma rápida y sencilla de reducir el tamaño de un archivo de imagen. Como regla general, asegúrese de que todas y cada una de las imágenes de su cibersitio sean solo del tamaño.

Si su sitio web tiene un ancho máximo de 1200 píxeles, carece de sentido poner una imagen de sobra de 1200 pixeles en su cibersitio.

Asimismo mencionamos la relevancia de no hacer un nuevo tamaño de imagen personalizado a menos que lo necesite. Conque ten esto presente.

Utilice envases con pérdida

Después de usar otros métodos para mejorar la imagen, la compresión con pérdida es una buena forma de reducir aún más el tamaño del fichero.

Esto significa que se suprimirán algunos de los datos de la imagen. Remover esta información no posee mucho efecto en la calidad de la imagen, pero puede contribuir a reducir significativamente el tamaño del archivo.

Utilizar carga diferida

Las cargas retrasadas tienen la posibilidad de asistirlo a saber la importancia de cargar imágenes en las páginas de su sitio web. Carga la imagen a tiempo conforme el visitante se desplaza por la página. Esto significa que la imagen superior se va a cargar instantaneamente, pero sólo algunas de las imágenes debajo del pliegue se cargarán hasta el momento en que el usuario se desplace por el pliegue.

Hay mucho más, pero hallará la imagen completa en nuestra guía de optimización. Así que vayamos directamente a algunas de las extensiones de optimización de imágenes que puede usar.

Complemento de edición de imágenes de WordPress

Lo destacado de emplear estos complementos es que puede realizar una optimización de imagen avanzada con solo unos pocos clics sin herramientas ni código avanzados. Además de esto, la mayoría de estos complementos son gratis, sobre todo para optimizar una cierta cantidad de imágenes o para optimizar ciertas funcionalidades básicas.

• Imagínese: escenarios de compresión customizados y otras funcionalidades de optimización de la imagen
• Kraken: una útil extensión de compresión sin pérdidas, pero solo si ha comprado la versión premium
• ShortPixel: admite compresión sin pérdida y sin pérdida correcta para múltiples tipos de imágenes
• Optimole: se utiliza para CDN y carga aplazada. Esta es una forma eficaz de mejorar las imágenes.

Las estadísticas detallan que agregar imágenes visualmente interesantes al contenido aumenta la memoria del lector en un 55%. Aprenda a lidiar con problemas de tamaño de imagen de WordPress y realice que sus mensajes sean recordablesHaga clic en el tweet

Generalizar

En este momento sabe todo sobre el tamaño de una imagen de WordPress y de qué forma puede aprovechar al máximo las funciones y personalizaciones de WordPress en esta sección. En este momento que sabe cómo conducir las imágenes de WordPress del revés, debería ser mucho más simple optimizar el rendimiento y la utilidad de su portal web.

Puede crear tamaños de imagen customizados y administrarlos de manera directa usando códigos de tema o usando complementos diseñados para esta labor. Recuerde la antigua miniatura de actualización cuando desee actualizar la imagen. Esta asimismo es una tarea simple gracias a las útiles extensiones enumeradas anteriormente.

¿Perdimos algo? Si tiene inconvenientes para comprender el tamaño de una imagen de WordPress, ¡deje un comentario ahora!