Entendiendo la forma en que wordpress gestiona nuestros archivos

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Subir, insertar y gestionar imágenes es muy fácil dentro de Wordpress

Pero siempre es bueno saber qué es lo que pasa detrás de escena

Así podemos saber exactamente como Wordpress gestiona nuestras imágenes

De modo que cuando te conviertas en un usuario más avanzado de Wordpress, tendrás claro que es lo que pasa con las imágenes cuando van de tu computadora hacia tu sitio web en Wordpress

Déjame mostrarte el proceso que Wordpress hace con las imágenes dándote un ejemplo

Primero voy a crear un nuevo artículo

Lo vamos a llamar demostración de imágenes

Y vamos a añadir una imagen en varias dimensiones

Primero voy a subir la imagen, así que damos clic en añadir objeto, vamos a subir archivos, seleccionamos la imagen que deseamos y la subimos

Ahora vamos a darle un título y un texto alternativo

Vamos a colocar su alineación al centro para que cada imagen tenga su propia línea

Luego vamos a colocar en enlace hacia el archivo para que al dar clic nos envié hacia la imagen original

Y luego vamos a insertar la imagen en diferentes tamaños

Así vamos a iniciar insertando la miniatura, luego damos enter para crear otra línea y regresamos a la opción de añadir objeto

Pero ahora vamos a insertar el tamaño medio

Damos enter para crear otra línea y ahora regresamos al botón añadir objeto y finalmente añadimos el tamaño completo

Ahora que ya tenemos las imágenes voy a darle una categoría, lo vamos a dejar en uncategorized

Ya que es solo una demostración y ahora vamos a guardar los cambios y pre visualizar nuestro articulo

Puedes ver que tenemos en nuestro artículo 3 tamaños diferentes de la misma imagen

Tenemos el tamaño miniatura, el tamaño medio y el tamaño completo

Para mostrarte la diferencia entre ellas voy a dar clic derecho y luego en abrir imagen en una pestaña nueva

Voy a hacerlo con las 3 imágenes

Entonces como puedes ver lo que ha hecho Wordpress es tomar la imagen original y modificarla para crear estas dos versiones de la imagen

De modo que pueda seleccionar una imagen en particular dependiendo del tamaño que le indique

Esto lo hace para no cargar tanto el navegador

Ya que si deseamos mostrar una imagen pequeña no deberíamos usar una imagen que es 6 veces más grande

Al hacerlo lo que estamos diciendo al navegador es que cargue una imagen muy grande y pesada para luego mostrarla pequeña

Tú necesitas una versión pequeña y liviana de la imagen para mostrarla en ese tamaño

Y eso es lo que hace Wordpress

Wordpress toma la imagen y crea varias versiones en tamaños diferentes de la misma

Así que lo que vemos en Wordpress es una imagen única, pero si vamos a los archivos podremos ver los diferentes archivos de la misma imagen para cada tamaño

Para ver los archivos, voy a entrar por medio de ftp al servidor y luego voy a navegar hacia wp-content, luego en uploads, damos clic en este año y el mes 1 que es donde hemos añadido nuestra imagen

Y como podemos ver aquí cada una de las imágenes se repite con la versión original mas los otros tamaños creados por wordpress

Tenemos el tamaño pequeño, el medio, y el original

Y en algunos caso también tenemos este otro tamaño, estas dimensiones son las que la plantilla usa para el tamaño de la imagen en la imagen destacada del artículo

Los tamaños a los que wordpress convierte la imagen son definidos por dos cosas

Por nuestra configuración en wordpress y por la plantilla que estamos usando

En este caso los tamaños pequeños y medio son definidos por nuestra configuración en wordpress

Para cambiarlos vamos a ir a nuestra administración en wordpress

Vamos hacia ajustes, y luego a medios

Desde aquí podemos ver las opciones de tamaños para las imágenes

y podemos dar las dimensiones que deseamos a cada tamaño de la imagen

nota que nuestro actual tamaño para las imágenes grandes es de 1024 pixeles por 1024 pixeles

Vamos a cambiarlo para que sea más pequeño lo vamos a dejar en 800 por 800 pixeles

Y damos clic en guardar cambios

Y ahora vamos a ir a nuestras entradas y damos clic en editar

Vamos a eliminar las imágenes que habíamos creado y ahora vamos a subir una nueva imagen

Damos clic en añadir objeto, luego en subir archivos, seleccionamos nuestra nueva imagen llamada a2 y la subimos

Ahora le damos un título y un texto alternativo

y si bajamos a las opciones del tamaño, podremos observar que ahora tenemos un tamaño extra

el tamaño grande

¿Por qué antes no se mostraba este tamaño?

Se debía a que el tamaño como recordamos estaba configurado en 1024 por 1024 pixeles y las imágenes que subíamos tenían un menor tamaño

Eran tanto esta como la primera de 1024 por 768 pixeles

Así que Wordpress no podía crear el tamaño grande

Pero ahora que el tamaño grande se encuentra en 800 por 800 pixeles, nuestra imagen de 1024 por 768 lo sobre pasa

Así que nos crea el tamaño grande también

Si vamos a nuestro programa ftp

Y actualizamos notaremos que tenemos esta imagen con los nuevos tamaños

Entender como Wordpress administra las imágenes cuando las subimos a nuestra web

Que las imágenes son transformadas en varios tamaños dependiendo del que insertemos

Y usar el tamaño correcto en cada situación

Como seleccionar el tamaño miniatura cuando deseemos mostrar una imagen pequeña, el medio cuando deseemos mostrar una imagen en tamaño medio

Y el tamaño grande cuando deseemos mostrar una imagen más grande

Ayudará a que el tiempo de carga de tu sitio web sea menor

Y evadir situaciones en las que por ejemplo

Un visitante entra a tu web desde un celular y debe descargar una imagen muy pesada y grande,

Cuando su pantalla es pequeña y la conexión un poco más limitada

En lugar de ver una imagen más liviana y pequeña que valla acorde a las dimensiones de su pantalla

De modo que recuerda usar siempre el tamaño correcto al momento de insertar imágenes en tus páginas o artículos.

One Comment on “Entendiendo la forma en que wordpress gestiona nuestros archivos”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image