Saltar al contenido

Fotos como las que los profesionales insertan en WordPress

4 mayo, 2019
Fotos insertan en WordPress

Un sitio web, tres sitios web. Esto se debe a los teléfonos inteligentes, las tabletas y las pantallas grandes. Dependiendo del dispositivo que se utilice para acceder a un sitio web, las imágenes están determinadas principalmente por sus circunstancias. Como resultado, existe la posibilidad de que las imágenes que han sido realmente ajustadas se distorsionen completamente. La solución: Necesitamos imágenes eficientes que se adapten individualmente a cada situación.

Después de que ya hemos aprendido mucho sobre las imágenes en el artículo «Qué hay que tener en cuenta al insertar imágenes», ahora sigue otra parte. Este segundo artículo sobre el tema «Insertar imágenes» trata más intensamente la relación entre imagen y tema, así como los diferentes tamaños de las miniaturas. Por ejemplo, ¿a qué tengo que prestar atención cuando quiero cambiar un tema? ¿Cómo puedo acortar el tiempo de carga de un sitio web rico en imágenes?

Como ya hemos aprendido del otro artículo, hay diferentes tamaños para las fotos. Existen los tamaños «Miniatura», «Mediano», «Grande» y «Tamaño completo».

¿Dónde puedo encontrar esta actitud?

Primero tiene que llamar a «Ajustes» en la barra de menú de la izquierda. A continuación, seleccione la subcategoría «Medios». Ahora la siguiente imagen debe ser revelada:

Tamaño de la imagen en Configuración > Especificar medio

El ajuste de imagen más popular es «Tamaño máximo de imagen» (=Grande).

Sin embargo, el primer problema ya se está desarrollando: cuanto más grande es la imagen, más largo es el tiempo de carga. Un largo tiempo de carga a menudo resulta en que muchos visitantes potenciales salten prematuramente de su sitio web. Después de todo, nadie quiere esperar mucho. Nuestro objetivo: obtener la información deseada de forma rápida y sencilla.

Fotos perezosas: ¿El camino para reducir el tiempo de carga?

Como se ha mencionado anteriormente, un tiempo de carga intensivo es a menudo la razón por la que las partes interesadas potenciales quieren abandonar el sitio web de antemano. Pero la intención era en realidad sólo buena: Muchas y sobre todo grandes imágenes para dejar una gran primera impresión visual. Además, están los iconos vinculados a las redes conocidas para reforzar la accesibilidad y la lealtad de los clientes. Todos tus deberes están bien hechos, ¿verdad?

Aunque todas las características son agradables y buenas, consumen mucho tiempo de carga cuando usted visita un sitio web. Especialmente si usted agrega una función de comentario al final de la página donde muchas pequeñas imágenes de perfil tienen que ser cargadas. Esto no significa que tanto la función de comentario como los iconos vinculados deban ser eliminados. No, hay otra solución. Se llama Lazy Load.

Lazy Load es un plug-in que hace que las imágenes se muestren sólo cuando se solicitan realmente. Si, por ejemplo, ejecuta su sitio web sin Lazy Load, todas las imágenes del sitio web se cargarán desde el principio cuando las llame. Lógicamente, este proceso lleva mucho tiempo. Si instala Lazy Load en su lugar y recarga este sitio web, notará que los archivos de imagen ubicados más abajo sólo se cargan desplazándose.

¿Cómo me beneficio de ello? Normalmente se leen las páginas de Internet de arriba a abajo. Después de la rápida llamada a través de su sitio web de Lazy Load, un cliente potencial ya puede recoger las primeras impresiones, ya que todas las imágenes inferiores están todavía en fase de reposo. Los lectores que desean más información comienzan a desplazarse hacia abajo. Esto es seguido por el desempeño de Lazy Load como se describió anteriormente. Otra ventaja: Si alguien sólo quiere informarse sobre el contenido de su sitio web, las características que son irrelevantes para él (función de comentario, iconos) no tienen que ser cargadas.

Archivo de imagen antiguo, tema nuevo. ¿Y ahora qué?

El problema: A veces sientes que has cambiado de opinión. Tan rápidamente un nuevo tema seleccionado e instalado, la nueva máscara puso sobre los viejos mensajes: Hecho! A menudo puede ocurrir que las imágenes no se hayan transformado y ahora se muestren en tamaños incorrectos.

La razón: Cada tema tiene su propio tamaño de miniatura, que desafortunadamente no se ajusta automáticamente. Un ejemplo:

Como puede ver en la imagen, los temas seleccionados entienden por un mismo nombre un tamaño diferente. Como resultado, todas las miniaturas se distorsionan automáticamente al actualizar. ¿Qué hacemos ahora?

La solución: Hay plug-ins que solucionan el problema. El regenerador que se muestra a continuación cambia las miniaturas automáticamente, lo que significa que no es necesario formatear manualmente cada una de las imágenes. He aquí nuestra recomendación, con la que hemos tenido muy buenas experiencias: Reconstrucción de miniaturas de AJAX

AJAX Thumbnail Rebuild en acción

Pantallas de alta resolución

Y si ya estamos en la fase de renderizado, podemos recomendarle algo. Palabra clave: Pantallas de alta resolución como la pantalla Retina de Apple. Mientras que las pantallas estándar muestran todos los medios en buena calidad, los usuarios que ven su sitio con una pantalla de retina tienden a ver imágenes borrosas. Pero para que cada presencia en Internet pueda brillar en todo su esplendor, alguien de la comunidad WordPress se ha encargado de este problema. El resultado es un plug-in que proporciona el tamaño de imagen adecuado en función de la resolución de la pantalla. Las fotos e imágenes con una resolución demasiado baja pueden sustituirse fácilmente por versiones más grandes mediante la función de arrastrar y soltar: WP Retina 2x

Intercambio de imágenes de WordPress para pantallas de Restina

Lo grande es bueno, porque lo pequeño siempre funciona!

Si desea planificar su presencia en Internet a largo plazo, le ofrecemos un consejo: trate de organizar el tamaño de sus imágenes con una visión previsora. Esto significa que todos los medios de comunicación deben ser lo suficientemente grandes como para permitir que se aplique un nuevo tema en cualquier momento. Nuestro lema: Lo grande es bueno, porque lo pequeño siempre es posible.

Un ejemplo: Supongamos que sólo ha llenado todo su sitio web con fotos pequeñas. Su tamaño de píxel es el número más alto posible (690 px) que permite el tema. Pero ahora quiere cambiar a un tema nuevo y de imágenes intensivas. El tamaño de píxel más pequeño posible es de 1200 px. Ahora se enfrenta al problema de que el número de píxeles del tema antiguo no coincide con el nuevo. Las imágenes del sitio web parecen perdidas e inapropiadas. Esta complicación, sin embargo, podría haberse evitado si ya se hubieran introducido píxeles más grandes en el tema antiguo, más pequeño, con previsión. Las personas ajenas no podrán notar la diferencia entre las imágenes de su sitio web, incluso si son demasiado grandes. Como dije: más pequeño siempre funciona, más grande desafortunadamente no.

El futuro: Imágenes sensibles

El futuro es RICG Responsive Images. Las imágenes con capacidad de respuesta son imágenes que se pueden realinear para cada situación (tableta, teléfono inteligente, PC). Y esto funciona de la siguiente manera: El navegador crea tres plantillas para cada imagen. Una pequeña para smartphones, una mediana para tabletas y una grande para pantallas de ordenador. Cuando un cliente potencial visita su sitio web, el navegador reconoce qué dispositivo está utilizando y ajusta todas las imágenes en consecuencia. Otro artículo, que tratará más intensamente este nuevo plug-in, será el siguiente.

NEGOCIO VIVO – Empresa de publicidad malaga Empresa diseño web malaga Empresa publicaciones en redes sociales

Llámanos