Cómo mejorar las imágenes en WordPress

Cómo mejorar las imágenes en WordPress

Ha pasado mucho tiempo desde que las imágenes eran algo demasiado grande para subirlas a internet.Hoy en día los sitios web no pueden existir sin ellos.Aunque la velocidad de Internet ha aumentado considerablemente con los años, es fundamental que te encargues de las imágenes de tu blog.

El hecho de que sea fácil subir imágenes a tu sitio, eso no significa que debas hacerlo sin ninguna preparación.Las imágenes no optimizadas pueden dañar su sitio de muchas maneras; de influir en cómo los visitantes piensan de usted sobre la velocidad de su sitio web y las clasificaciones de SEO.Si aún no lo has pensado, estamos aquí para mostrarte diferentes maneras de mejorar las imágenes en WordPress.

En esta guía, vamos a mostrarle:

  • Cómo optimizar imágenes para WordPress para acelerar tu sitio y mejorar SEO
  • Cambiar la forma en que WordPress comprime imágenes JPEG
  • Los plugins de optimización de imágenes más populares para WordPress
  • Añade una carga lenta para tus vídeos e imágenes
  • Ver imágenes antes y después atractivamente
  • Cómo crear imágenes interactivas: dibujar, agregar descripciones y enlaces
  • Cómo regenerar tamaños de imagen adicionales
  • Eliminar atributos de imagen de anchura y altura con jQuery
  • Cómo crear tamaños de imagen personalizados en Media Uploader
  • Toma una captura de pantalla automática de cualquier sitio web y publízala como una imagen en tu publicación

Cómo optimizar imágenes para WordPress para acelerar tu sitio y mejorar SEO

¿Por qué debería optimizar las imágenes para WordPress?Si realiza un esfuerzo, puede esperar lo siguiente:

  • Sitio más rápido
  • MEJOR SEO
  • Copias de seguridad más pequeñas
  • Menor uso del ancho de banda
  • Usuarios más felices

También debe saber que hay varias etapas en las que puede optimizar las imágenes.Puedes encargarte de las imágenes incluso antes de subirlas a un blog, o puedes hacerlo después de subirlas.

Pruebe imágenes rápidamente en su sitio

Antes de empezar a trabajar en la optimización, puede comprobar rápidamente la velocidad y el rendimiento de su sitio.Usando cualquiera de las herramientas de la lista, aprenderá rápidamente en qué forma están las imágenes en su sitio.

Nos gusta usar GTmetrix, que también le mostrará las imágenes exactas que hacen que su sitio se cargue más lentamente.

Optimizar imágenes para WordPress antes de cargar

Durante el blog, la mayoría de las personas no toman todas las medidas necesarias para optimizar sus imágenes.Por lo general, la gente simplemente tomaba una foto de su cámara o teléfono inteligente, descargaba una de Internet o creaba una usando software informático.

No piensan en formatos, tamaño de imagen o nombres de archivo.Si la imagen se ve bien, asumen que está lista para Internet.Si no revisas tus imágenes, estás construyendo un desastre.

Redimensionar imágenes

Redimensionar imágenes

No cargue imágenes en su sitio web de WordPress antes de verificar el ancho y la altura de cada imagen.Por ejemplo, si ves imágenes de hasta 700 px, realmente no necesitas subir una imagen más grande.Si lo hace, tendrá un archivo más grande que hará que su sitio sea más lento, mientras que la salida será la misma.WordPress creará dimensiones adicionales, pero eso no es excusa para no preparar imágenes antes de cargarlas.

El cambio de tamaño de las imágenes es rápido y fácil.Hay muchas herramientas gratuitas como Microsoft Paint que le ayudarán con esto.Incluso puede encontrar herramientas gratuitas en línea para cambiar el tamaño de las imágenes como Easy Resize.

El tamaño de la imagen variará de un tema a otro.Si no está seguro de cuál debe usar, eche un vistazo más de cerca a su tema de WordPress e inspeccione las imágenes, busque documentación o solicite soporte.

Cambiar la calidad

Después de cambiar el tamaño, debe considerar cambiar la calidad de las imágenes.Dependiendo del software, hay varias maneras de cambiar la calidad de la imagen.Por ejemplo, Photoshop siempre popular le permite guardar imágenes para la web.Esta opción le permitirá guardar imágenes con menor calidad, pero estarán optimizadas para su sitio.

Además, si decide guardar una imagen como JPEG, Photoshop le pedirá que elija el nivel de calidad.En este caso, reducir la calidad de 12 a sólo 8 reducirá drásticamente el tamaño de una imagen, mientras que la diferencia de calidad no será tan grande.

Si todavía no está utilizando ningún software para cambiar la calidad de sus imágenes, puede probar el pequeño PNG en línea de forma gratuita .Sube una foto y mira qué diferencia puede hacer.

Elija el formato adecuado

Incluso después de cambios en el tamaño y la calidad, debe considerar cambiar el formato.Para empezar, simplemente seleccionando el formato correcto, puede sacar unos kilobytes de una imagen, si no más.

Formatos de imagen

La regla general es muy simple.Si tienes una fotografía, hazla JPEG.Si tiene un logotipo muy simple, una imagen vectorial o un gráfico generado por computadora, elija PNG.Si tienes una imagen realmente pequeña sin matices o quieres mostrar una animación simple como la que se muestra arriba, puedes usar GIF.Normalmente, las imágenes PNG serán bastante más grandes que las imágenes JPEG, y puede aprovechar el cambio de formato.

En muchos casos, la reforma de las imágenes no hará diferencias significativas en la calidad, mientras que usted puede esperar la diferencia de tamaño.La próxima vez antes de subir una foto PNG, pruébala e intenta guardarla como JPEG para ver la diferencia.Para obtener una explicación más detallada, consulte la diferencia entre PNG, JPEG, GIF y SVG.

Ocúpate de los nombres de archivo

Si bien el nombre del archivo puede parecer poco importante, en realidad es algo que usted debe ser muy consciente de.El nombre de su archivo de imagen contiene información valiosa para SEO.Si quieres que otros encuentren tu imagen en Google y otros motores de búsqueda, deberías darle su propio nombre.

Se recomienda nombrar imágenes sin usar espacios.No olvides incluir palabras clave si quieres que tu página e imagen se clasifiquen.Por ejemplo, si está subiendo una foto de Ferrari California, el nombre del archivo debe ser "ferrari-california.jpg".Si usas un complemento SEO para WordPress, ya sabes que controla etiquetas alternativas para palabras clave.Sí, es realmente tan importante tener el nombre de imagen correcto.

Optimizar imágenes para WordPress después de la carga

Después de preparar las imágenes en su ordenador, puede continuar con la carga.Esperamos que sus imágenes sean del tamaño y la calidad adecuados.Se aseguró de que el formato y el nombre de archivo son correctos.Después de subir, WordPress le pedirá más información.No salte la meta información; introduzca los detalles de sus imágenes para que pueda organizarlas fácilmente y prepararse para SEO.

Título, descripción, texto alternativo y leyenda

Al tratar con el tecnicismo, no debe olvidarse de SEO.Agregue siempre el título y la descripción a sus medios.Esto le ayudará con la gestión de medios de WordPress y también funcionará para un mejor SEO.Además, no olvides la etiqueta alt que aparecerá para los visitantes que no pueden ver tu imagen correctamente.Esto no sólo será útil para sus usuarios, sino que también le ayudará con SEO.Su página se posicionará mejor y los usuarios podrán encontrar sus nuevas imágenes más fácilmente.

Aunque los subtítulos no siempre son necesarios, asegúrese de agregar uno para las imágenes que requieren más explicaciones (por ejemplo, capturas de pantalla).

Editar imágenes con WordPress

Si te das cuenta de que una imagen todavía necesita más edición, debes saber que WordPress te permite hacerlo incluso después de subir el archivo. Cambia la rotación, recorta y cambia el tamaño de las imágenes que ya has cargado.Solo puede editar una miniatura o todas las demás dimensiones.El editor nativo de WordPress es muy simple, pero puede ahorrar dinero de vez en cuando.

Regenerar todas las miniaturas

La mayoría de las técnicas anteriores le ayudarán con los nuevos archivos de imagen que todavía está cargando.Pero, ¿qué pasa si tienes cientos si no miles de archivos ya subidos a tu sitio de WordPress?No te preocupes; todavía puede optimizar esas imágenes y cambiar su tamaño.

Para una solución rápida, es posible que esté interesado en un plugin regenerado miniaturas gratuito que ha sido utilizado por más de un millón de usuarios.Si quieres más control sobre las imágenes, deberías echar un vistazo a algunos de los mejores plugins de WordPress para la optimización de imágenes que te mostraremos en las siguientes líneas de este artículo.

Cómo regenerar tamaños de imagen adicionales

Usar plugins de WordPress

Por supuesto, hay docenas de plugins de WordPress que pueden ayudarle a optimizar las imágenes en su sitio.Desplázate hacia abajo para ver los mejores plugins de WordPress para la optimización de imágenes.

Subir imágenes cuando sea necesario

A veces, la calidad de las imágenes será mucho más importante que su tamaño.Esto es especialmente cierto para los fotógrafos que quieren que sus fotos sean de primer nivel.No pueden arriesgarse a reducir el tamaño o la calidad del archivo.Sin embargo, esto no significa que deba olvidarse de la optimización.Para optimizar las imágenes de WordPress en este caso, debe considerar la carga lenta.

La carga lenta es una técnica que carga imágenes solo cuando los usuarios las necesitan (desplácese hasta ellas).Por ejemplo, si subiera veinte fotografías de alta calidad a un artículo, ralentizarían considerablemente su sitio.Pero si subes las imágenes perezosas, el artículo sería súper rápido y las fotos solo se subirán cuando sea necesario, en el momento en que un usuario se acerque a ellas.

Tener imágenes responsivas

Aunque la mayoría de los temas de WordPress son responsivos, eso no significa necesariamente que tus imágenes también sean sensibles.Como no desea cargar una imagen grande en una pantalla pequeña, deberá registrar tamaños de imagen adicionales para su sitio.Si tu tema no usa imágenes responsivas, considera contratar a un profesional para trabajar: no es tan fácil como podría parecer.

Optimizar imágenes para redes sociales

Si quieres asegurarte de que tus imágenes se vean bien en las redes sociales, tendrás que ir un paso más allá y optimizar las metaetiquetas y el marcado de esquema.

Si está utilizando un plugin SEO como Yoast, no se olvide de comprobar la configuración.Por ejemplo, Yoast te permitirá configurar algunas cosas relacionadas con las redes sociales.A continuación, vaya a SEO -> Social e introduzca la información en Facebook, Twitter, Google+ y Pinterest.

Si desea más y desea optimizar las imágenes para otros sitios web de redes sociales, consulte WPSSO – Accurate Meta Tags + Schema Markup for Social Sharing Optimization y complementos de SEO.

Cambiar la forma en que WordPress comprime imágenes JPEG

Si está cargando un montón de imágenes JPEG en su sitio web de WordPress, es posible que haya notado que están perdiendo su calidad original.Si te has preguntado si es culpa de WordPress, ahora tendrás tu respuesta: ¡sí, lo es!

Una vez que subes una imagen en formato JPEG, WordPress cambia automáticamente la compresión y decide perder la calidad de la imagen.Para ser más específico, WP utiliza una compresión del 90% en su JPGE.Es genial si tus imágenes sólo están allí para ser utilizadas como miniaturas de publicaciones o para ser mostradas en una publicación, pero si estás subiendo tus fotos, quieres que sean las mejores posibles, ¿verdad?

Por suerte, solo necesitarás una línea de código para cambiarlo.

Deja de comprimir imágenes JPEG:

Si no desea que sus imágenes JPEG se compriman, simplemente copie y pegue el siguiente código en su archivo de Functions.php:

add_filter ('jpeg_quality', función ($arg) {return 100;});

No olvides guardar tus cambios y estarás listo para subir nuevas imágenes.

Por otro lado, las imágenes pueden no ser un gran problema para usted.Por lo tanto, es posible que desee que estén aún más comprimidos y le ahorrará tiempo para cargar su sitio.Si cambia el último número de esa línea de código, cambiará la calidad de las imágenes recién cargadas.

Comprima imágenes JPEG aún más:

Cuanto menor sea el número, más imágenes se comprimirán.Por ejemplo, para comprimir esos archivos JPEG aún más, necesitará este código:

add_filter ('jpeg_quality', función ($arg) {return 80;});

No lo olvides; el nivel de compresión predeterminado es 90.

Importante: Esto solo afectará a las imágenes cargadas después de pegar el código en Functions.php.Para cambiar el tamaño y la calidad de las imágenes que ya tienes en la biblioteca, necesitarás un plugin.Obtén información sobre cómo regenerar tamaños de imagen adicionales.

Los plugins de optimización de imágenes más populares para WordPress

Al principio de este artículo, hablamos sobre cómo optimizar las imágenes para WordPress con el fin de acelerar su sitio y mejorar SEO.Como habrá visto, hay algunos métodos diferentes que puede usar.Es importante cuidar las imágenes incluso antes de subirlas a tu blog.Pero cuando las fotos ya están presentes en el sitio, puede ser imposible reabrir cada imagen individual por separado y luego subirlas de nuevo.

No te preocupes; nadie espera que lo hagas en primer lugar.Quédate con nosotros en los siguientes minutos mientras estamos a punto de mostrarte los plugins de optimización de imágenes más populares para WordPress.

Para optimizar las imágenes, solo tendrá que seleccionar el complemento de la lista.Tendrás que configurarlo y elegir las cosas que el plugin hará por ti.Después de eso, usted será capaz de relajarse y delegar el trabajo en el plugin de su elección, mientras que usted puede comenzar a organizar sus archivos multimedia.

Los siguientes plugins le ayudarán a comprimir imágenes en cualquier sitio de WordPress que tenga.Ellos subirán el sitio más rápido y eventualmente le ayudarán a mejorar SEO.

WP Smush

PRECIO: gratis

Con más de 700.000 instalaciones activas, WP Smush debe ser uno de los mejores plugins de optimización de imágenes para WordPress.Puede optimizar rápidamente las imágenes utilizando diferentes técnicas de compresión.Lo bueno de comprimir imágenes con WP Smush es que las imágenes no perderán en calidad.¿No te lo crees?Prueba el plugin.

Cuando hablamos sobre la preparación de imágenes para WordPress, dijimos que el escalado es una parte crucial del proceso de optimización.Con este plugin, no tendrás que preocuparte por ello ya que WP Smush te permite establecer el tamaño máximo.Después de hacer esto, todas las imágenes más grandes se cambiarán automáticamente de tamaño antes de agregarlas a la biblioteca.

Este fantástico plugin puede funcionar con archivos JPEG, GIF y PNG.Funciona con todos sus directorios, se encarga automáticamente de los archivos adjuntos y funciona en varios sitios también.Puede operar manualmente en cada imagen o editar unas cincuenta de ellas a granel.Si quieres mejores resultados y más opciones, echa un vistazo a WP Smush PRO.

Optimizador de imágenes EWWW

PRECIO: gratis

Detrás del nombre gracioso, hay uno de los plugins de optimización de imágenes más populares para WordPress.Al igual que el mencionado anteriormente, el optimizador de imágenes EWWW puede comprimir sus imágenes sin comprometer su calidad.Cuando creas que el plugin puede acelerar tu sitio en cuestión de segundos, ya estarás en camino de descargarlo.Una vez que lo hagas, podrás optimizar imágenes masivas, y galerías como GRAND FlaGallery, NextCellent y NextGEN también tendrán sus páginas de Bulk Optimize.

Todas las imágenes que usan la clase WP_Image_Editor en WordPress se optimizarán automáticamente, mientras que usted puede hacer la magia manualmente en todas las demás.Nos gusta que pueda seleccionar las carpetas que desea optimizar.Para obtener más detalles al respecto y qué complementos usan la clase, abra la página oficial de EWWW Image Optimizer en el repositorio de WordPress.

Comprimir imágenes JPEG y PNG

PRECIO: gratis

Imágenes en minúsculas comprimidas

Si el lindo panda con el logotipo de WordPress no te hace querer aprender más sobre este plugin, no sabemos qué hará.Y si el panda se ve familiar, es porque es el mismo que te ayuda a comprimir imágenes en el sitio web de TinyPNG.Sí, parece que el animal es más versátil de lo que pensábamos inicialmente.Pero vamos a centrarnos en el plugin.

Si vas con este plugin, Panda optimizará automáticamente tus imágenes.Cada vez que carga uno nuevo, el plug-in toma el control y hace su trabajo.Sin embargo, puede optimizar imágenes individuales o hacerlo a granel simplemente accediendo a la biblioteca multimedia.

Comprime imágenes JPEG y PNG incluso admite PNG animados, funciona perfectamente en un sitio múltiple, es compatible con WooComerce y no tendrá problemas con WP Offload S3.

Lo bueno del plugin es que te permite establecer atributos de anchura y altura máximos para todas las imágenes.Si usted ha estado preocupado por lo que los metadatos harán, no se preocupe; el panda mantendrá toda la información intacta.

No hay límites de tamaño de archivo, puede establecer un widget de panel de control, y también funciona con la aplicación móvil de WordPress.Debido a todo esto, Comprimir imágenes JPEG y PNG tiene más de 100.000 instalaciones activas y merece un lugar en la lista de los mejores plugins de optimización de imágenes para WordPress.

Locura, 19 años

PRECIO: gratis

Locura, 19 años

Aunque la imagen de portada de este plugin puede asustarte, tómate un segundo y ve todas las características de Imsanity.El nombre del plugin también parece loco, ¿verdad?Una vez que estés de acuerdo con el nombre del plugin, verás que tiene mucho que ofrecer.

Imsanity puede cambiar automáticamente el tamaño de las imágenes, le permite establecer el tamaño máximo y también tiene una opción de escalado masivo.Esto es importante si ya tienes cientos de fotos en tu blog que necesitan optimización.

Este plugin gratuito es una gran opción si no quieres tener mucho problemas con la configuración del plugin.Todo lo que necesita es instalar y activar Imsanity, establecer algunas opciones y puede olvidarse de ellas; gestionará su propio camino hacia la optimización de imágenes.

Nos encantó la opción que le permite convertir imágenes BMP a JPG.En caso de que tenga muchos archivos BMP subidos por error hace algún tiempo, esto será una verdadera cura-todo.

Optimizador de imágenes ShortPixel

PRECIO: gratis

Optimizador de imágenes ShortPixel

Con más de 30.000 instalaciones activas, ShortPixel Image sigue siendo uno de los plugins de optimización de imágenes más populares para WordPress.El plugin está repleto de características y será una necesidad para los sitios que tienen una gran cantidad de imágenes para optimizar.

ShortPixel Image Optimizer no solo optimiza los documentos JPG, PNG, GIF y PDF para usted, sino que también le permitirá convertir cualquier imagen JPEG, PNG o GIF a WebP.El plugin funciona bien con otros complementos de galería y no importa si su sitio utiliza HTTP o HTTPS.Le permitirá eliminar los datos EXIF de las imágenes (algo que a los fotógrafos les encantará tener).

El plugin reconoce las imágenes que ya ha optimizado, por lo que las omitirá cuando sea necesario.Usted puede permitir o prohibir la optimización automática y hacer mucho, mucho más con este fantástico plugin.Compruebe la página oficial del repositorio para ver todas las características.

Optimus – Optimizador de imágenes de WordPress

PRECIO: gratis

Optimus

Al igual que el plugin mencionado anteriormente, Optimus optimizará sus imágenes para WordPress y lo hará sin comprometer la calidad de sus imágenes.Puede dejar que el plugin arregle las cosas automáticamente, o puede desactivar la opción y optimizar las imágenes solo cuando sea necesario.

Optimus funciona en múltiples sitios, no es ajeno a los sitios de comercio electrónico de WordPress y está totalmente optimizado para las aplicaciones móviles de WordPress y Windows Live Writer.Acelerará su sitio sin que tenga que tocar una línea de código.El plugin ofrece mucho más, pero tendrás que optar por la versión premium.Para obtener más información, vaya a la página oficial en el repositorio de plugins de WordPress.

Añade una carga lenta para tus vídeos e imágenes en WordPress

Una vez que comience a agregar una gran cantidad de material de vídeo e imagen a su sitio web, es obvio que comenzará a cargar más lento.No importa de dónde vengan, los grandes vídeos e imágenes actuarán como una pesada carga en su sitio y harán que los visitantes esperen mucho más de lo necesario para subir todo el contenido.Con WordPress, esto no debería ser un gran problema y aquí está cómo solucionar la situación fácilmente.

Si está familiarizado con PHP, hay un gran artículo sobre cómo agregar carga lenta de imágenes y desplazamiento sin fin escrito por nuestros colegas en Elegant Themes.

Si no, en las siguientes líneas mencionaremos algunos de los complementos de carga lenta más populares que harán que su sitio funcione más rápido.Y ni siquiera tendrás que hacer mucho más que instalar un plugin y configurarlo en unos pocos pasos.

Carga diferida para vídeos

PRECIO: gratis

Carga diferida para vídeos

Si tienes muchos vídeos de Youtube y Vimeo, deberías considerar la posibilidad de instalar este plugin.Una vez configurado, el plugin insertará una imagen en su video y por esta razón su sitio web se cargará mucho más rápido.Una vez que un visitante se desplaza a través de un video, esta imagen se mostrará con un botón de "reproducción" en él.Después de un clic, el vídeo comenzará a subirse y reproducirse.Una demostración simple se puede ver en el sitio del desarrollador.

WP YouTube Lyte

PRECIO: gratis

WP YouTube Lyte

Este plugin hará su trabajo rápida y fácilmente.Después de instalarlo, añade un enlace a tu vídeo de Youtube o usa un shortcode para añadir uno.Puede elegir entre agregar un vídeo, una lista de reproducción o un audio normales solo desde el vídeo seleccionado.Después de eso, tus vídeos de Youtube tendrán una imagen que permitirá una carga lenta.Simplemente haga clic en la imagen para iniciar el vídeo o audio.
Vea una demostración en el sitio del desarrollador.

a3 Carga diferida

PRECIO: gratis
DEMO 1
DEMOSTRACIÓN 2

a3 Carga diferida

Esto está dedicado a su sitio móvil.Si tienes muchas imágenes y/o vídeos que quieres mostrar a tus visitantes en dispositivos móviles, debes echar un vistazo a a3 Lazy Load.Le permitirá añadir una carga lenta a sus imágenes y vídeos, e incluso el plugin le permitirá elegir los efectos de transición que aparecerán a los usuarios a medida que se desplazan a través del contenido que está cargando.

En el área de administración, puede activar y desactivar fácilmente el contenido que desea cargar lentamente.Para el contenido activo, el contenido solo se cargará cuando un visitante se desplaza a esa parte del contenido.
Hay una demostración bien mostrada que cuenta con 1000 imágenes – cada una sólo se carga una vez que se desplaza a través de ella.Dado que este plugin también sube vídeos, hay una demostración de vídeo que se puede ver haciendo clic en el enlace anterior.

Carga perezosa BJ

PRECIO: gratis

Carga perezosa BJ

Si no necesitas soporte de vídeo y solo quieres subir tus imágenes perezosas, echa un vistazo a este plugin wp.Una vez instalado y configurado, reemplazará imágenes, miniaturas, imágenes gravatar e incluso iframes por un marcador de posición.Al igual que un complemento mencionado anteriormente, cargará el contenido solo una vez que el usuario inicie sesión en él.

Ya se trate de imágenes o vídeos que desea subir perezosamente, uno de los plugins mencionados anteriormente le ayudará en segundos.Todos ellos son libres, por lo que no hay excusa para no probar al menos uno de los plugins y ver cuánto peso tomará para sus hombros.Por supuesto, hay muchos otros plugins con la misma característica y usted es libre de navegar y probarlos todos.

Ver imágenes antes y después atractivamente

Estamos seguros de que ya hemos visto muchos ejemplos de imágenes antes/después.No sé tú, pero lo primero que tenemos en mente cuando vemos la frase "antes y después" es el programa de entrenamiento físico donde la gente muestra sus cuerpos antes y después de un programa de entrenamiento.

Si lo piensas, la mayoría de los sitios web utilizan un enfoque simple para mostrar las diferencias: toman ambas imágenes y las colocan una al lado de la otra o incluso una sobre la otra.Si quieres el mismo resultado, no leerás este artículo porque ya sabes cómo hacerlo.

¿Qué pasa si te dijimos que hay una manera visualmente impresionante de solucionar este problema antes/después y está a tu alcance?Bueno, hay y después de una configuración, usted elogiará a los desarrolladores porque el resultado final es realmente genial.

Vientos fuertes

PRECIO: gratis

Vientos fuertes

Twenty Twenty es el nombre de este fantástico plugin que puedes descargar gratis en el repositorio de plugins de WordPress.

El plugin le permitirá colocar una imagen encima de la otra y le permitirá jugar con un cursor para que pueda ocultar / revelar la imagen.Por favor, cuidado con la demostración y verás de lo que estamos hablando.

Ok, ahora cuando estás enganchado a este pequeño plugin, veamos cómo crear este increíble efecto.Aunque es relativamente fácil recrear el efecto de demostración, todavía necesitarás saber tu HTML básico.Vamos:

    1. Cree una nueva publicación o abra la existente
    2. Inserte dos imágenes en la publicación. Si está trabajando en un Editor visual, debería ver la imagen uno encima del otro.Si está trabajando en un editor de texto, debería ver código similar al siguiente:
<a href="image1.jpg"> <img src="http://www.loactionoftheimage.com" width="700" height="200" /> </a>

<a href="image2.jpg"> <img src= "http://www.loactionoftheimage.com" width="700" height="200" /> </a>
    1. Insertar la etiqueta [venti venti] antes de la primera imagen
    2. Después del segundo, inserte la etiqueta [/ twentytwenty]

Deberías terminar con algo similar en tu editor de texto:

[Twentytwenty]
<a href="image1.jpg"> <img src= "http://www.loactionoftheimage.com/image1.jpg" width="700" height="200" /> </a>

<a href="image2.jpg"> <img src="http://www.loactionoftheimage.com/image2.jpg" width="700" height="200" /> </a>
[/ Twentytwenty]
  1. Asegúrese de que sus imágenes sean del mismo tamaño para obtener los mejores resultados
  2. Previsualiza o publica tu publicación y disfruta de tus imágenes visualmente impresionantes antes y después

Cómo crear imágenes interactivas: dibujar, agregar descripciones y enlaces

Hoy en día, es difícil administrar un sitio web sin medios.Las imágenes, los vídeos y la música forman parte de prácticamente todos los sitios web.Un usuario promedio de Internet depende en gran medida de los estímulos visuales, por lo que debe cuidar de las partes visuales e interactivas de su sitio.Los artículos con imágenes reciben un 94% más de visitas que los que no tienen una.Además, ya se sabe que el contenido multimedia en los sitios web puede aumentar el ROI del marketing de contenidos.

Esperamos que no necesite convencerse a sí mismo para que se encargue de las imágenes en su sitio.Incluso si no usas imágenes en artículos (que deberías), usas imágenes destacadas, ¿verdad?Hay una gran cantidad de plugins de galería que pueden ayudarle a administrar imágenes en su sitio de WordPress, puede tener temas relacionados con la fotografía, vincular Instagram a su sitio de WordPress, y hacer mucho más.¿Qué sucede si quiero crear más contenido interactivo?

Para empezar, es posible que esté interesado en agregar efectos de imagen antes y después de que los usuarios lo disfruten.No te olvides de la realidad virtual en WordPress que se está volviendo más popular después de que Automattic introdujera la realidad virtual en WordPress.com.Sin embargo, falta algo.¿Es posible crear imágenes interactivas con piezas en las que se puede hacer clic?Sí, es posible y vamos a mostrarte lo divertido y fácil que es.

Llama la atención

PRECIO: gratis
Demo

Lo primero que te gusta de este plugin es que es completamente gratis!Al igual que con cualquier otro complemento del repositorio de WordPress, puede descargarlo, instalarlo y activarlo en cuestión de minutos.La versión gratuita le permitirá trabajar con una imagen interactiva.Si quieres más, tendrás que optar por la versión PRO, pero hablaremos de ello más tarde.

El plugin es sensible, y no tienes que preocuparte por las imágenes interactivas que se muestran correctamente en cualquier dispositivo.La imagen no solo se redimensionará en función del tamaño de la pantalla, sino que funcionará en la mayoría de los navegadores modernos y antiguos (escritorio y móvil).Llamar la atención utiliza elementos de lienzo cuando aparecen en nuevos exploradores, ya que vuelve a los mapas de imágenes si se carga en uno anterior.

Características

Antes de llegar a un ejemplo que le mostrará lo potente que es este sencillo plugin, veamos qué esperar de Llamar la atención:

  • Dibujar: Después de cargar una imagen, tendrá la opción de dibujar formas en ella.Seleccione cualquier parte de su imagen que se vuelva seleccionable / clicable
  • Colores: personaliza los colores para que puedas adaptar los hotspots al diseño de tu sitio
  • Resaltado flotante: muestra otra parte de la imagen si un usuario se desplaza sobre la parte seleccionada.
  • Mostrar más información : muestra más información sobre la parte seleccionada de la imagen.
  • Ir a URL : Redirigir a los usuarios a cualquier URL si hacen clic en la selección

Llamar la atención

Ejemplo: Mapa interactivo de Hawái

Usaremos la muestra del sitio de demostración para mostrarle qué puede hacer exactamente con Llamar la atención.Por lo tanto, vamos a ver cómo se ve un mapa interactivo de Hawái cuando se crea con el plugin.

Lo primero que debe hacer es encontrar una imagen de las islas hawaianas.Después de cambiar a Atención -> Editar imagen, debe cargar la imagen en el área de la barra lateral derecha.Una vez que se carga la imagen, la diversión puede comenzar.

Aquí puede elegir colores para luces altas (color, borde, opacidad, etc.), Dar un estilo al "cuadro de información adicional" (imagen, título, color de texto, etc.).Si no desea seleccionar manualmente todos los colores de la imagen, puede elegir rápidamente un esquema de color en la barra lateral derecha.

Llama la atención: Cómo crear imágenes interactivas en WordPress

La parte más mágica ocurre en la pantalla de configuración de áreas de punto caliente.Aquí obtendrá la imagen cargada de tamaño completo.Todo lo que necesita hacer ahora es empezar a dibujar y crear un nuevo punto de acceso.Puede agregar tantos puntos como desee, lo que significa que puede crear selecciones completas que desee.Puede crear muchos puntos de acceso y cada uno puede tener su propia configuración.

Por lo tanto, en este ejemplo, debe seleccionar una de las islas.Elija un título para la isla, agregue una descripción y la imagen adicional que se mostrará una vez que un usuario haya explorado el punto de acceso (lado derecho de la imagen GIF mostrada arriba).

Debe repetir el proceso para cada una de las islas que desea ser interactivo.Una vez que tenga sus puntos de acceso listos, copie el shortcode desde el lado derecho.¡Pega el shortcode en un post, página, widget o donde quieras mostrar tu nuevo mapa interactivo y ya terminaste!Si desea redirigir usuarios a cualquier otra página después de hacer clic en las selecciones, simplemente seleccione la DIRECCIÓN URL en lugar de la descripción.¡Tan fácil como eso!

Versión PRO

Si bien la versión gratuita será perfecta si solo necesita una imagen, la versión PRO le permitirá tener tantas imágenes interactivas en su sitio como desee.Aunque esto será lo más importante a tener en cuenta, la versión PRO le traerá aún más imágenes.

La función Opciones de diseño le permitirá ver más información sobre las partes seleccionadas de la imagen.Por ejemplo, puede mostrar la información en un cuadro de luz o una barra de herramientas sencilla que aparecerá después de que un usuario pase la parte seleccionada de la imagen.

También hay veinte paletas de colores predefinidas, por lo que no es necesario personalizar manualmente todos los colores.La versión PRO le costará $74 por una sola licencia de sitio, pero si necesita más de una imagen interactiva, esto será muy fácil.

Cómo regenerar tamaños de imagen adicionales

Es relativamente fácil grabar nuevos tamaños de imagen en tu tema de WordPress.Después de decirle a su sistema lo grandes que deben ser sus imágenes, las nombró y decidió cómo recortarlas, usted es libre de distribuir las imágenes donde quiera.¿Y las viejas fotos?

Si usaste una de las técnicas que te mostramos, preparaste el terreno para nuevas imágenes.Ya sea que use el tamaño de las imágenes recién registradas para las vistas previas de publicaciones o permita que los autores las usen en publicaciones, las nuevas reglas se aplican solo a aquellas imágenes que se cargan después de realizar el cambio en el archivo Funciones.php .Para editar imágenes más antiguas, recomendamos usar el complemento Miniaturas regeneradas.

Regenerar miniaturas:

PRECIO: gratis
  1. Ir a Plugin-> Añadir nuevo
  2. Buscar "Regenerar miniaturas"
  3. Instalar y activar el plugin
  4. Vete a Regen instruments->.Miniaturas, 19

Si desea cambiar el tamaño de todas sus imágenes, simplemente haga clic en el botón "Regenerar todas las vistas previas" y esperar a que el plugin haga el trabajo duro.

Cómo regenerar tamaños de imagen adicionales

Si desea ver imágenes que se cambiarán de tamaño, o si desea cambiar el tamaño solo algunas de las imágenes, vaya a su biblioteca donde encontrará una nueva opción en "Acciones masivas" y una junto a cada imagen de la galería.

Lo bueno del plugin es que no elimina las imágenes originales.Solo creará nuevos tamaños de imagen que puedas usar en tu tema, mientras que los originales permanecerán para que los uses más tarde o los elimines manualmente si decides que no los necesitas.

Es todo.Disfruta de tus nuevas miniaturas o echa un vistazo al plugin Simple Image Sizes que puede hacer lo mismo.

Eliminar atributos de imagen de anchura y altura con jQuery

Al agregar imágenes a una publicación de WordPress, el sistema agrega automáticamente sus atributos de altura y anchura a la imagen.Por lo general, es algo bueno, pero hay momentos en los que no te gustará el hecho de que cada imagen obtiene esos atributos.

Si desea eliminar atributos en el punto de carga, puede hacerlo a través de una sencilla función que le mostramos la última vez.

Pero si lee el artículo o prueba la función usted mismo, notó que solo afecta a las imágenes cargadas después de instalar la función en su sistema WP.Si ya tienes una base de datos llena de publicaciones con imágenes insertadas, la función anterior no te ayudará mucho con tus atributos de imagen antiguos.

Dado que probablemente no puede examinar manualmente cada imagen individual y eliminar el ancho y la altura uno por uno, probablemente necesite otra característica que elimine esos atributos para todas las imágenes existentes incrustadas en sus publicaciones. En ese caso, usted está en el lugar correcto porque vamos a mostrarle una manera fácil de eliminar automáticamente los atributos de imagen ancha y de altura con sólo unas pocas líneas de código jQuery.No tengas miedo con la frase anterior: ni siquiera tienes que saber lo que es jQuery, sigue los próximos tres pasos, y habrás terminado en un abrir y cerrar de ojos.

Elimine los atributos de imagen de anchura y altura:

    1. Abra el archivo de encabezado.php desde la carpeta del tema
    2. Copie y pegue este código en cualquier lugar entre etiquetas <head> Y </head>:
<src script = "http://code.jquery.com/jquery-latest.js"> </script>
<script type = "text / javascript">
jQuery.noConflict (); 
jQuery (documento) .ready (function ($) {
$ ( 'Img'). Cada (función () {
$ (Esto) .removeAttr ( 'width')
$ (This) .removeAttr ( 'height');
}); 
}); 
</ Guiones>
  1. Guarde los cambios

¡Y ya terminaste!El código hará su magia después de abrir una publicación que contiene una imagen y eliminar las etiquetas de anchura y altura de ella.

Cómo crear tamaños de imagen personalizados en Media Uploader

Si estás usando Media Uploader para administrar imágenes en WordPress, probablemente hayas visto numerosas opciones para imágenes.Entre muchos, puede elegir un tamaño de imagen que puede enviar a su artículo.

Hay opciones de vista previa, medios, grandes y de tamaño completo para elegir, pero todas esas opciones tienen valores predeterminados.Por lo tanto, si usas un tema personalizado, la mayoría de las veces estás atascado editando ancho y alto para cada imagen una y otra vez.

En realidad, no tienes que hacerlo.Hay una pequeña característica ordenada llamada add_image_size () que es una gran herramienta para los desarrolladores.Y después de este artículo, también te resultará útil.

Supongamos que su tema tiene un ancho personalizado y desea incrustar fácilmente imágenes para adaptarse perfectamente a ellos.Digamos que el ancho es de 666 px (no entraremos en por qué estableces el ancho en este número, es tu elección).Para ello, debe agregar un botón de radio adicional al cargador de medios.Con el código siguiente, agregará otra dimensión que es la mitad del tamaño de la original.

    1. Abra el archivo Functions.php
    2. Copie y pegue este fragmento de código:
function custom_image_sizes () {
add_image_size («talla única», 333, 333, verdadera); 
add_image_size ('otro tamaño', 666, 666, verdadero);
}

add_action («init», «custom_image_sizes»); 
show_image_sizes function ($ size) {
$ size ['one-size'] = __ ('Tamaño personalizado 1', 'isitwp'); 
$ size ['another-size'] = __ ('Custom Size 2', 'isitwp'); 
devuelve $size;
}

add_filter («image_size_names_choose», «show_image_sizes»);
  1. Guarde los cambios
  2. Intente agregar una imagen desde el cargador de medios donde debería ver las nuevas opciones de tamaño en "Configuración de visualización de archivos adjuntos"

Toma una captura de pantalla automática de cualquier sitio web y publízala como una imagen en tu publicación

Si desea obtener una vista previa de un sitio web, debe visitar el sitio web, imprimirlo o tomar una captura de pantalla con un programa del navegador o un complemento.Luego deberá editar la imagen, recortarla al tamaño correcto y cargarla en su WordPress para que pueda usar la captura de pantalla en una publicación. Si no tiene que tomar esa instantánea de vez en cuando, no será un problema, pero si está utilizando capturas de pantalla de diferentes sitios web con más frecuencia, le alegrará saber que hay una característica fantástica que le ahorra tiempo y nervios.

En esta parte de la guía, le mostraremos la característica completa que crea un código abreviado que puede usar para tomar instantáneas de cualquier página web que desee.

Crear captura de pantalla automática:

    1. Funciones abiertas.php
    2. Copie y pegue el siguiente código:
wp_webscreen function ($atts, $content = NULL) {
extracto (shortcode_atts (matriz (
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // ancho
"h" => '450' // altura
), $ atts));

$ img = '<img alt = "'. $alt. '" src = "'. $ snap. ''. urlencode ($ url). '? w ='. $w. '&h ='. $h. '"/>'; 
devuelve $img;
}
add_shortcode ("pantalla", "wp_webscreen");
  1. Cambiar las variables predeterminadas en la matriz
  2. Guarde los cambios

Esta función crea un shortcode que puede usar fácilmente en cualquier lugar de su sitio web de WordPress.Si desea utilizar la captura de pantalla de una página web en una publicación, widget de barra lateral o pie de página, por ejemplo, solo necesita c / p el shortcode en el lugar correcto:

[screen url = ”http://www.firstsiteguide.com” alt = ”fsg” w = ”600 ″ h =” 450 ″]

La belleza de esta característica es que guarda la imagen como una URL dinámica, lo que significa que una vez que crea una instantánea con el shortcode, Se actualizará automáticamente en el futuro y siempre mostrará la apariencia actual del sitio web especificado en el shortcode.

Tenga en cuenta que puede cambiar los parámetros del shortcode directamente desde él.No es necesario cambiar el código del archivo Functions.php si desea capturar la instantánea de otra dirección URL o capturar la instantánea a un tamaño diferente.

Ejemplo:

Digamos que quieres tomar una captura de pantalla de Google y hacerla de 200 × 400 píxeles de tamaño:[screen url = “http://www.google.com” alt = “Google” w = “200 ″ h =” 400 ″] Puede hacerlo aún más fácil guardando el código abreviado en un botón para que pueda insertarlo en una publicación con un solo clic de un botón.

Conclusión

No es necesario instalar todos los plugins y características que mencionamos para mejorar las imágenes en su sitio de WordPress.Pero esperamos que hayas encontrado al menos algunos consejos que te ayudarán a optimizar las imágenes o mejorarlas de cualquier manera.

Open

info.ibdi.it@gmail.com

Close