Este post está dispuesto a responder una pregunta muy sencilla: «¿Cómo hago para que en un formulario aparezca un campo, dependiendo de la respuesta de otro campo?».

Planteado esto… ¡vamos por partes!

Un formulario básico

Un formulario básico no nos permite hacer ningún ejercicio de lógica, se limita a recoger información y almacenarla convenientemente.

Es el caso del plugin Contact Form 7, no es solamente el formulario de contacto más básico que podemos encontrar, sino que es uno de los más extendidos (quizá por su simplicidad y porque aún sorprende que WordPress no cuente con esta facilidad integrada en su núcleo). Este plugin se limita a solicitar la información suministrada por el usuario (visitante) y almacenarla en la base de datos de WordPress.

Su comportamiento es tan básico que no permite interactuar con el contenido, más allá de preguntas elementales como el caso de los campos «cuestionario» que permiten hacer una pregunta y que avisará de un error si no se ha suministrado la respuesta correcta (Campo «quiz»), o seleccionar una entre varias respuestas posibles en un desplegable (Campo «select»).

Decisiones lógicas

Si queremos que el formulario tenga comportamientos distintos dependiendo de la entrada que suministre el usuario, debemos tomar decisiones lógicas. Esto también se conoce como condiciones y, por tanto, hablamos de «campos condicionales».

Para que un formulario tenga un comportamiento condicional, puedes ayudarte de otro plugin, que debe trabajar en colaboración con el plugin de formularios que tengas instalado.

En este caso, ya que el plugin de formulario es el Contact Form 7>, deberás instalar otro plugin que te permita tomar decisiones y ese plugin es: Contact Form 7 – Conditional Fields.

Este plugin permite agregar lógica condicional al formulario de Contact Form 7. Para lograr esta magia, debes agrupar los bloques de actuación, que este plugin se encargará de hacer visible o no, en función de que se cumplan o no las condiciones establecidas.

Para hacer esto de forma asistida, sitúa el cursor en la línea en la que quieres que empiece el bloque o grupo y haz clic sobre el botón «Conditional Fields Group»

Aparecerá una ventana modal preguntando por el nombre que queremos asignar al grupo (le asigna un valor por defecto, no dudes en cambiarlo para que sea algo más significativo para ti), junto a dos opciones:

1. «Clear on hide» que si lo marcas significa que cuando se oculte el bloque porque la condición no se cumple, se borrará el contenido de los campos en el grupo.
2. «Inline» que indica que todos los elementos del grupo se presentarán uno tras otro, en la misma línea.

Una vez identificados y creados los bloques, procede a indicar la lógica que regirá su visualización (del grupo o bloque entero).

Para eso debes cambiar a la pestaña llamada «Conditional fields» en la que identificarás que condiciones se han de cumplir para que un grupo en concreto, aparezca en el formulario.

En la imagen vemos los dos métodos posibles para indicar la lógica de verdad; en la parte superior el método asistido y en la inferior el método de texto, manual o de código directo.

Cualquiera de los dos métodos lo que técnicamente indican es: La regla se aplica el grupo que aparece después de «Show», en este caso, es el grupo «group-234» (expresado entre corchetes), a continuación la condición a cumplir («if») seguida del campo que debe cumplir la regla («vivoEnChina») también entre corchetes, luego viene la condición propiamente dicha («equals») y el valor a comparar («Si»).

En términos simples esto significa que: el grupo «group-234» se hará visible si el campo vivoEnChina es igual a «Si», en cualquier otro caso, el grupo no será visible.

Indudablemente, es cuestión de imaginación; este caso es rudimentario y sin sentido, pero seguro que tu encuentras la forma de hacerlo servir a tus necesidades.

La forma nativa del plugin gratuito, está bastante corto en posibilidades, por lo que si ves que te interesa avanzar más, debes conseguir la versión Pro, que es paga.

Todo en uno

Si lo que buscas es un solo plugin que haga las funciones de los dos que hemos citado antes, puedes usar: Everest Forms que es de lo mejor.

Existen muchos plugins para formularios y casi todos funcionan de forma parecida, en la que puedes crear grupos que aparecen o no aparecen, dependiendo de la lógica aplicada. Los precios suelen ser muy parecidos, aunque cambie la fórmula.

«Everest Forms» es quizás el más potente dentro de los de precio reducido.

El plugin «Everest Forms» te proporciona una manera fácil de crear cualquier tipo de formulario, incluidos los formularios de contacto. Los campos de arrastrar y soltar hacen que ordenar y crear formularios sea tan fácil que incluso un principiante en WordPress puede crear hermosos formularios en cuestión de minutos.

El plugin es liviano, rápido, extensible y 100% responsivo.

Puedes obtener este plugin en el repositorio de WordPress: (https://es.wordpress.org/plugins/everest-forms/).

Elegir los tipos de archivos de imagen correctos puede parecer una decisión trivial. Pero los seres humanos somos criaturas visuales, y las imágenes forman parte integral de la experiencia online.

La mayoría de las páginas y artículos utilizan imágenes para enriquecer el contenido del texto. De hecho, solo alrededor del 8% de los sitios web no incluyen ningún contenido visual.

Desafortunadamente, muchos propietarios de sitios web todavía no entienden qué tipos de archivos de imagen elegir para los diferentes casos de uso. ¿El resultado? Acaban ralentizando la velocidad de carga de su sitio porque sus imágenes no tienen el mejor formato disponible, ni están optimizadas.

En este artículo, repasaremos todas las extensiones de archivos de imagen más importantes y cuándo deberías usarlas para proporcionar la mejor experiencia de usuario posible a tus visitantes.

¿Cuáles son los diferentes tipos de archivos de imagen?

Los tipos y formatos de archivos de imagen se dividen en dos categorías principales: archivos de imágenes rasterizadas y archivos de imágenes vectoriales. Echemos un vistazo más de cerca a cada categoría.

Formatos de archivos de imágenes rasterizadas

Los formatos de imagen más comunes para la web (JPEG, GIF y PNG) están todos bajo la categoría de raster.

Los tipos de archivos de imágenes rasterizadas muestran imágenes estáticas en las que cada píxel tiene un color, una posición y una proporción definidos en función de su resolución (por ejemplo, 1280×720).

Como son estáticas, no se puede cambiar el tamaño de las imágenes de manera eficiente, el diseño original y los píxeles simplemente se estirarán para llenar el espacio extra. Esto termina creando una imagen borrosa, pixelada o distorsionada de alguna manera.

Imagen Raster – ejemplo JPEG

La gran mayoría de las fotografías o imágenes que ves en Internet utilizan un formato de imagen rasterizada.

Formatos de archivos de imágenes vectoriales

SVG, EPS, AI y PDF son ejemplos de tipos de archivos de imágenes vectoriales.

A diferencia de los formatos de archivos de imagen rasterizados estáticos, donde cada forma y color del diseño está ligado a un píxel, estos formatos son más flexibles.

Los gráficos vectoriales utilizan en cambio un sistema de líneas y curvas en un plano cartesiano, escalado en comparación con el área total, no un solo píxel.

Esto significa que se puede ampliar infinitamente la resolución de la imagen original sin ninguna pérdida de calidad o distorsión.

Ampliación del formato de la imagen vectorial

Como puedes ver, la diferencia de calidad cuando se amplía 7 veces es completamente incomparable.

Como el SVG calcula las posiciones basándose en un porcentaje del área total, y no en píxeles, no hay ninguna pixelación.

Los 15 tipos de archivos de imagen más populares

A continuación, repasaremos todos los formatos de archivos gráficos principales, desde imágenes web rasterizadas, a vectoriales, hasta archivos de software de edición de imágenes.

Haremos una inmersión profunda y analizaremos los pros y los contras, el navegador y el soporte del sistema operativo, y los casos de uso ideales para cada formato.

1.JPEG (y JPG) – Joint Photographic Experts Group (Grupo Conjunto de Expertos en Fotografía)

Tigre formato de imagen JPEG

JPEG (oJPG) es un formato de archivo de imagen rasterizado con una compresión con pérdida que lo hace adecuado para compartir imágenes. Los JPEG son imágenes «con pérdida», lo que significa que reducen el tamaño del archivo, pero también la calidad de las imágenes cuando se utiliza el formato.

JPEG sigue siendo uno de los tipos de archivos de imagen más utilizados en Internet debido a su compresión y su soporte virtualmente universal para los navegadores y los sistemas operativos.

La mayoría de las plataformas de medios sociales (como Facebook e Instagram) convierten automáticamente los archivos de imagen cargados en JPEG. También utilizan tamaños de imagen de medios sociales únicos para controlar la resolución de tus fotos.

Ventajas y desventajas

• Soporte universal para navegadores y sistemas operativos.
• Un tamaño de archivo bastante pequeño.
• La pérdida de compresión de la imagen puede causar una mala legibilidad del texto.

Soporte para los navegadores y los sistemas operativos

• Soportado desde la versión 1.0 de todos los principales navegadores (Chrome, Firefox, Safari, etc.)
• Soportado por defecto por todos los visualizadores y editores de imágenes de los principales sistemas operativos.

Casos de uso

• Buena elección para imágenes de blogs y artículos, como fotos principales y de contenido, imágenes de productos y más.
• No utilices JPEG para las infografías con mucho texto pequeño o capturas de pantalla de tutoriales donde el texto es fundamental.

2. PNG – Portable Network Graphics (Gráficos de Red Portátiles)

PNG es un formato de gráficos rasterizados que soporta una compresión sin pérdidas, manteniendo el detalle y el contraste entre los colores.

En particular, el PNG ofrece una mejor legibilidad del texto que el JPEG. Esto hace que PNG sea una opción más popular para las infografías, los banners, las capturas de pantalla y otros gráficos que incluyen tanto imágenes como texto.

Ventajas y desventajas

• Imágenes de mayor calidad (sin pérdidas) y texto claramente visible.
• Los tamaños de archivo más grandes pueden ralentizar tu sitio web si se utilizan en exceso (especialmente las imágenes de alta resolución).

Soporte para los navegadores y los sistemas operativos

• Soportado por todos los principales navegadores (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
• Soportado por todos los principales sistemas operativos y sus editores de imagen estándar.

Casos de uso

• Buena elección para infografías, banners, gráficos de blogs, capturas de pantalla, cupones y otros elementos visuales que incluyen texto.
• No lo utilices para fotos de alta resolución, ya que creará archivos grandes de hasta varios megabytes.

3. GIF — Graphics Interchange Format (Formato de Intercambio de Gráficos)

Ejemplo de una imagen gif

El GIF es otro tipo de archivo de imagen que cae dentro del formato raster. Utiliza una compresión sin pérdidas pero «restringe» la imagen a 8 bits por píxel y una paleta limitada de 256 colores.

El formato GIF es el más famoso (y más utilizado) para las imágenes animadas porque su limitación de 8 bits mantiene el tamaño de los archivos de animaciones pequeños y fáciles de usar en Internet.

Ventajas y desventajas

• El tamaño del archivo es pequeño.
• Soporte de animación.
• La limitación de 8 bits conlleva a una calidad de imagen limitada.

Soporte para los navegadores y los sistemas operativos

• Soportado por todos los principales navegadores (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
• Soportado por todos los principales sistemas operativos y sus editores de imagen estándar.

Casos de uso

• Utiliza los GIF animados no solo para «darle sabor al contenido» sino que también para demostrar cómo completar las tareas en los tutoriales y guías.
• No lo utilices si necesitas imágenes en color de más de 8 bits (JPEG admite hasta 24 bits).

4. WebP

Ejemplo de imagen WebP

WebP es un formato de imagen desarrollado específicamente para proporcionar una mejor compresión de imágenes sin pérdidas y con pérdidas.

Cambiar de JPEG y PNG a WebP puede ayudar a ahorrar espacio en el disco del servidor y un ancho de banda significativo, con hasta un 35% de archivos de imagen más pequeños para una calidad idéntica.

Ventajas y desventajas

• Archivos más pequeños para la misma o mejor calidad de imagen.
• No está soportado por todos los navegadores y editores de imágenes.

Soporte para los navegadores y los sistemas operativos

• Google Chrome (Versión 17+ para escritorio, 25+ para móvil), Firefox (65+), Edge (18+) y Opera (11.0+), soportan WebP de forma nativa. La versión 14 planeada de Safari será compatible con WebP.
• El formato todavía no es soportado por la mayoría de los editores de imagen nativos del sistema operativo, pero las opciones profesionales como Photoshop soportan WebP.

Casos de uso

• Reemplaza los archivos JPEG y PNG para ahorrar ancho de banda y acelerar tu sitio. Si utilizas WordPress como tu software CMS preferido, aquí te mostramos cómo utilizar imágenes WebP en WordPress y aplicar otros formatos a los navegadores heredados.

5. TIFF

Icono de TIFFC

Un formato que no puede faltar en esta guía de tipos de archivos de imagen, tenemos el TIFF.

TIFF, que es la abreviatura de Tagged Image File Format, es un formato de imagen rasterizado que se utiliza más comúnmente para almacenar y editar imágenes que más tarde se utilizarán para la impresión.

No ofrece ninguna compresión porque la prioridad es preservar la calidad de la imagen.

Ventajas y desventajas

• Archivos de alta calidad perfectos para el almacenamiento o la publicación impresa.
• La falta de opciones de compresión hace que los archivos de imagen sean muy grandes.
• Soporte limitado para los navegadores.

Soporte para los navegadores y los sistemas operativos

• Ningún navegador importante puede mostrar un archivo TIFF sin add-ons o extensiones.
• Principalmente disponible como formato de exportación para herramientas profesionales de edición y publicación de imágenes.

Casos de uso

• Almacenamiento y preparación de imágenes y gráficos para su publicación.
• Utilizado por muchos escáneres para preservar la calidad de los documentos o imágenes escaneadas.

6. BMP — Bitmap

Bitmap vs gif

El Bitmap (BMP) es un formato de archivo de imagen prácticamente obsoleto que mapea los píxeles individuales con poca o ninguna compresión. Esto significa que los archivos BMP pueden fácilmente llegar a ser extremadamente grandes y son poco prácticos de almacenar o manejar.

Ventajas y desventajas

• Tamaños de archivo gigantescos sin ganancias de calidad notables comparado con formatos como WebP, GIF o PNG.

Soporte para los navegadores y los sistemas operativos

• Soportado por todos los principales navegadores (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
• Soporte nativo en la mayoría de los editores de imágenes del sistema operativo predeterminado, como MS Paint.

Casos de uso

• En 2020, hay básicamente cero casos de uso legítimo del formato de imagen BMP.

7. HEIF – High Efficiency Image File Format (Formato de Archivo de Imagen de Alta Eficiencia)

Formato JPEG vs HEIF

HEIF, abreviatura de High Efficiency Image File Format, es un formato de imagen desarrollado por el equipo que está detrás del formato de vídeo MPEG para ser un competidor directo de JPEG.

En teoría, la compresión es casi el doble de eficiente que el JPEG, lo que permite obtener imágenes de hasta el doble de calidad con tamaños de archivo idénticos.

Es un formato de imagen rasterizado, basado en el mapeo de píxeles, lo que significa que no se pueden ampliar las imágenes sin perder calidad.

Ventajas y desventajas

• Una gran relación calidad/tamaño de archivo.
• Los navegadores no son soportados y el soporte para los sistemas operativos es limitado.

Soporte para los navegadores y los sistemas operativos

• No es soportado por ninguno de los principales navegadores.
• Soporte nativo en macOS Sierra e iOS 11 y posteriores, pero no en sus respectivas versiones de Safari.

Casos de uso

• Usado por algunos teléfonos y dispositivos más nuevos para almacenar fotos en mayor calidad que los archivos JPEG.

8. SVG — Scalable Vector Graphics (Gráficos Vectoriales Escalables)

Logotipo de SVG

El formato de archivo Scalable Vector Graphics, normalmente conocido como SVG, fue desarrollado por el W3C como un lenguaje de marcado para renderizar imágenes bidimensionales directamente en el navegador.

No se basa en píxeles como un formato rasterizado, sino que utiliza texto XML para contornear formas y líneas de forma similar a como las ecuaciones matemáticas crean los gráficos.

Esto significa que puedes ampliar las imágenes SVG infinitamente sin pérdida de calidad.

Ventajas y desventajas

• Pequeños tamaños de archivo y escalado sin pérdida para ilustraciones, formas y textos simples.
• No es un formato ideal para imágenes o dibujos complejos.

Soporte para los navegadores y los sistemas operativos

• Soportado por todos los principales navegadores (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari).
• Los editores de imágenes predeterminados tienden a no soportar el SVG (ya que no es adecuado para las fotografías), pero la mayoría de los programas de ilustración soportan las exportaciones de SVG.

Casos de uso

• SVG es el formato ideal para logotipos, iconos, ilustraciones simples y cualquier otra cosa que quieras que se pueda escalar libremente. Si utilizas WordPress, asegúrate de revisar cómo habilitar la compatibilidad del SVG de WordPress para tu sitio web.

9. EPS — Encapsulated Postscript (PostScript Encapsulado)

Icono EPS

En esencia, un archivo EPS (PostScript Encapsulado) es un archivo de imagen vectorial utilizado para almacenar ilustraciones en Adobe Illustrator y otros programas de ilustración como CorelDraw.

Al igual que los archivos SVG, el EPS es en realidad un documento basado en texto que traza formas y líneas con código, en lugar de mapear píxeles y colores. Como resultado, los archivos EPS también soportan el escalado sin pérdidas.

Ventajas y desventajas

• Escalabilidad sin pérdida.
• Soporte de impresora para documentos y diseños.

Soporte para los navegadores y los sistemas operativos

• El EPS no es un formato de archivo de imagen web estándar y no es soportado por los principales navegadores.

Casos de uso

• Se utiliza principalmente para almacenar, guardar e imprimir ilustraciones cuando se trabaja con Adobe Illustrator u otro software.

10. PDF — Portable Document Format (Formato de Documento Portátil)

Ejemplo de archivo PDF

Probablemente asocies el PDF con el almacenar, guardar y leer de documentos basados principalmente en texto. Eso es perfectamente comprensible – el documento está ahí en el nombre después de todo.

Pero los archivos PDF están basados en el mismo lenguaje PostScript que impulsa los archivos de imágenes vectoriales EPS y pueden ser usados para guardar imágenes e ilustraciones también.

Es el formato de imagen elegido para almacenar ilustraciones, portadas de revistas y más para su posterior impresión.

Ventajas y desventajas

• El texto indexable y buscable lo hace perfecto para infografías o informes en profundidad.
• Puedes incluir enlaces, botones CTA y otros elementos interactivos.
• Escalabilidad sin pérdida.
• No se puede incluir en el contenido de la web (al menos que lo hagas a través de un iframe), debe ser cargado y leído como un archivo separado.

Soporte para los navegadores y los sistemas operativos

• Soportado por todos los principales navegadores, pero estás obligado a abrir el PDF como un archivo separado. (No puedes usar los archivos PDF para mostrar imágenes en todo tu contenido HTML).
• Soportado como formato por la mayoría de los editores de documentos estándar (como MS Word o Google Docs), y software de ilustración (AI, Inkscape) pero no por software de edición de imágenes.

Casos de uso

• El PDF es la mejor opción si deseas crear un informe visual interactivo o una infografía que complemente tu contenido.

11. PSD — Photoshop Document (Documento de Photoshop)

Logotipo de PSD

Como su nombre indica, el formato de archivo PSD es un formato de imagen utilizado para guardar documentos de imagen y trabajos en curso con Adobe Photoshop.

No es un formato de imagen seguro para la web, por lo que no es compatible con ningún navegador, o visualizador, o editor de imágenes estándar.

Ventajas y desventajas

• Todos los filtros, las transparencias, los trazos y las ediciones son totalmente personalizables y reversibles.
• Calidad de imagen sin pérdidas.
• Archivos de gran tamaño.

Casos de uso

• Guardar y almacenar proyectos de Photoshop antes y después de que se completen.

12. AI – Adobe Illustrator Artwork

Icono de archivo de Adobe Illustrator

La IA es otro formato de imagen desarrollado específicamente por Adobe para no solo guardar la imagen, sino también el estado del proyecto.

Al igual que el PSD, no está diseñado para su uso en la web y no es compatible con ningún navegador, ni con la mayoría de los visualizadores de imágenes predeterminados.

A diferencia de los archivos PSD, puedes ampliar libremente los archivos AI sin pérdida de calidad.

Ventajas y desventajas

• Todos los trazos, líneas, formas, filtros, son personalizables y reversibles.
• Amplia libremente los tamaños de las ilustraciones.

Casos de uso

• Guardando y almacenando proyectos de Adobe Illustrator antes y después de que se completen.

13. XCF — eXperimental Computing Facility (Desenvoltura Informática Experimental)

Icono de XCF

XCF, que significa eXperimental Computing Facility, es un tipo de archivo de imagen nativo del editor de imágenes de código abierto GIMP. Es el equivalente a los archivos PSD y guarda rutas, transparencia, filtros y más.

Una vez más, se trata de un tipo de archivo nativo para almacenar proyectos y no es compatible con ningún navegador o visualizador de imágenes predeterminado.

Ventajas y desventajas

• Todos los trazos, filtros y formas son personalizables y reversibles.
• Calidad de imagen sin pérdidas.
• Archivos de gran tamaño.

Casos de uso

• Guardando y almacenando los proyectos del GIMP antes y después de que se completen.

14. INDD — Adobe InDesign Document

Icono de Adobe InDesign

El INDD es un tipo de archivo nativo para los usuarios de Adobe InDesign donde puedes guardar los archivos del proyecto incluyendo el contenido de la página, estilos, muestras y más.

Aunque a veces se denomina formato de archivo de imagen, tiende a vincularse a elementos visuales más allá del texto.

No está soportado por ningún navegador o visualizador de imágenes por defecto, ya que no es un formato seguro para la web.

Ventajas y desventajas

• Almacena grandes proyectos de diseño de varias páginas con elementos personalizables.

Casos de uso

• Utilizado principalmente por diseñadores gráficos y artistas de producción para diseñar y colaborar en carteles, folletos, revistas, panfletos y más.

15. Raw Image File Types (Formato de Imágenes Raw)

Los formatos de imagen en bruto son los tipos de archivo que una cámara digital utiliza para almacenar imágenes de calidad total para su posterior post-producción y edición.

Los principales tipos de archivos de imágenes en bruto por el fabricante de la cámara:

• Kodak: CR, K25, KDC
• Canon: CRW CR2 CR3
• Epson: ERF
• Nikon: NEF NRW
• Olympus: ORF
• Pentax: PEF
• Panasonic: RW2
• Sony: ARW, SRF, SR2

En lugar de los 256 colores disponibles en un archivo JPEG, los archivos RAW ofrecen hasta 16.384 colores diferentes en una sola imagen. Eso te da más flexibilidad a la hora de ajustar los colores y el contraste en el post-procesamiento.

Las imágenes Raw no están pensadas para la web o para ser compartidas y no son compatibles con ningún navegador o  visualizador de imágenes importante.

Ventajas y desventajas

• Imágenes de mayor calidad con mayor variabilidad en los colores.
• Archivos de imágenes gigantes (un archivo Raw puede fácilmente ser de hasta 20 a 40 megabytes).

Casos de uso

• Guardar las fotos con la mayor calidad posible para su post-procesamiento y edición.

Preguntas frecuentes sobre los tipos de archivos de imagen

¿Cuáles son los 3 tipos de archivos más comunes de un archivo de imagen?

Según los datos relacionados con el uso de la web, los tres tipos de archivos de imagen más comunes son PNG, JPEG y SVG.

Estadísticas de los tipos de archivos de imagen (Fuente de la imagen: w3techs.com)

Examinemos qué es lo que los hace tan populares...

1. PNG: Capturas de pantalla, banners, infografías, fotos…

Dado que el PNG como formato se presta mejor para el texto dentro de la imagen, se utiliza más a menudo para capturas de pantalla, banners (dependiendo del tamaño del anuncio), y más.

Dado que utiliza la compresión sin pérdidas, también es utilizada por diseñadores y fotógrafos para mostrar imágenes de alta calidad en los sitios web de sus portafolios, por ejemplo.

Estos dos factores, junto con el soporte universal del navegador y del sistema operativo, lo convierten en el tipo de archivo de imagen más popular de la web. Los PNG están presentes en un impresionante 77% de los sitios web.

2. JPEG: Fotos

La compresión con pérdida significa que JPEG es una mejor opción para mostrar imágenes en todo el contenido. La pérdida de calidad es apenas visible para el usuario medio de Internet, y puedes ahorrar un considerable espacio en disco y ancho de banda.

Por eso es el segundo formato más popular en Internet, usado por casi el 72% de los sitios web. La mayoría de los sitios usan tanto PNG como JPEG para diferentes propósitos.

Como un recordatorio: No hay diferencia entre JPG vs JPEG, son dos acrónimos y extensiones de archivo diferentes para el mismo formato.

3. SVG: Logos, iconos e ilustraciones

Los archivos SVG son archivos vectoriales escalables que son perfectos para iconos, logotipos, gráficos e ilustraciones simples. La imagen puede incluso ser insertada directamente en la página como código CSS.

Es por eso que los SVG están en tercer lugar, utilizados por el 27% de los sitios web.

Mención de honor: Imágenes GIF animadas

Aunque raramente es el formato elegido para las imágenes estáticas, el GIF ha vuelto a ser la opción número uno para compartir animaciones.

Ejemplo de GIF animado

Como resultado, alrededor del 22% de los sitios web usan GIF en sus páginas, aunque probablemente también usen PNG y JPEG como formatos estándar.

¿Qué formato de imagen es el de mayor calidad?

Los formatos de imagen Raw son de la más alta calidad pero tienen tamaños de archivo irrazonablemente grandes de hasta cientos de megabytes.

Para las imágenes de la web, el formato de archivo WebP ofrece tamaños de archivo entre 25 y 35 % más pequeños que el JPEG para las fotos de la misma calidad, lo que significa que puedes subir imágenes de mayor calidad para el mismo espacio de disco y acelerar tu sitio.

HEIF es otra alternativa de JPEG con una compresión más eficiente, pero actualmente no es soportada por ninguno de los principales navegadores.

Los archivos PNG ofrecen una compresión sin pérdidas, pero eso significa que los tamaños de los archivos serán excesivamente grandes y lentos de cargar. Un solo archivo PNG puede tener a menudo de cientos de KB o incluso más de 1 MB. Sin embargo, si aprovechas algunas tácticas como la carga lenta (lazy load - disponible en el núcleo desde WordPress 5.5) y un CDN, todavía podrías tener un sitio rápido.

¿Qué formatos de archivo soportan la transparencia?

Los tipos de archivos de imagen más comunes para la web que soportan la transparencia son PNG, WebP, GIF, e incluso SVG.

La mayoría de los tipos de archivos de imagen de proyectos nativos como PSD, XCF y AI también soportan la transparencia.

Por otro lado, el popular formato de imagen JPEG no soporta la transparencia.

¿Es PNG mejor que JPEG?

La principal diferencia entre PNG y JPEG es que PNG es un formato de imagen sin pérdidas, mientras que JPEG es un formato con pérdidas. Esto significa básicamente que PNG utiliza técnicas de compresión sin sacrificar la calidad original o el detalle de la imagen.

Para el texto de las imágenes, las capturas de pantalla del tutorial, y cuando se quiere que los signos u otros elementos finos sean 100% visibles en una foto, PNG es el formato adecuado.

Tira de prensa PNG vs JPEG (Fuente de la imagen: lbrandy.com)

Como puedes ver en esta divertida imagen de arriba, PNG, que se representa a la izquierda, es mucho mejor para mostrar claramente el texto y las formas simples en comparación con JPEG, el de la derecha.

¿Significa esto que JPEG es un tipo de archivo de imagen malo? No, en absoluto.

Para las entradas regulares de los blogs o las imágenes de cabecera (headers, sliders), JPEG ofrece una calidad más que suficiente con un tamaño de archivo significativamente menor. A menudo puedes ahorrar hasta un 50% o más de espacio mientras luchas por detectar cualquier diferencia de calidad a simple vista.

¿Alguna vez se ha caído tu web por exceso de consumo de recursos de ancho de banda, memoria, CPU? ¿Tu web va lenta y no sabes el motivo? ¿Has recibido una amable invitación de tu empresa de hosting para que amplíes tu plan de alojamiento?

Si te sientes aludido en alguna de estas preguntas este artículo es para ti.

¿Qué consume recursos de mi hosting?

Normalmente pensamos que el único parámetro de medida de consumo de recursos de nuestra web son las visitas, y algunas empresas de hosting tienen parte de culpa en esto, pues distinguen sus planes a contratar por este parámetro, pero no es así.

Puedes tener pocas visitas y mucho consumo de recursos y, en el lado opuesto, tener un montón de tráfico y ser un ahorrador nato de recursos del servidor.

Así, hay webs con pocas visitas que necesitan contratar planes de hosting carísimos, al mismo tiempo que webs de alto tráfico que funcionan de maravilla incluso con planes de hosting compartido de bajo costo.

En consecuencia, todo depende del uso eficaz que hagas de los recursos disponibles,  y apliques medidas de eso conocido como WPO, abreviatura de optimización del rendimiento web, que no solo tiene que ver con lo rápida que carga tu web, sino con el dineral que puedes ahorrar en hosting si haces un uso efectivo de los recursos del mismo.

Cómo gastar menos en hosting

Nos concentraremos en aquellas medidas de WPO que te ayudarán a no tener que cambiar a un plan de hosting mayor, y más caro, e incluso – quien sabe – a pasarte a un plan inferior, o incluir uno o varios sitios adicionales en el tu plan actual -si es multidominio y te lo permite- y empezar a ahorrar dinero.

Una empresa de hosting, a fin de cuentas, te está alquilando espacio en sus servidores, te cobra por las prestaciones que tiene en cuanto a espacio en disco, memoria, CPU, ancho de banda y demás especificaciones de servicio.

Si nos fijamos en las prestaciones de los planes de alojamiento hay una relación directa entre capacidad-prestaciones y precio. A mayor espacio en disco, memoria, CPU, ancho de banda, etc, mayor será el costo. Así que la estrategia de WPO debe ir dirigida a ahorrar recursos en esas prestaciones.

Cómo ahorrar espacio en disco

Igual que cualquier sistema informático, uno de los elementos que influyen en el rendimiento de tu aplicación es el espacio en disco.

Es más común de lo que imaginas, ver webs lentas, aparentemente optimizadas, en las que el único problema sin resolver es que tenían prácticamente agotado el espacio en disco. Así que, antes de pagar por una ampliación de disco duro o capacidad, podemos revisar algunas estrategias para ahorrar espacio.

Borra todo lo que no necesites

¿De verdad tienes que tener una copia del directorio de plugins y temas de WordPress? ¿Sufres de angustia por la separación o algo así?. En serio, borra todos esos plugins o temas que no utilizas. Si alguna vez quieres volver a usarlos los vuelves a instalar desde cero. Si quieres/necesitas tener respaldos, genéralos, descárgalos a tu computador y luego bórralos del servidor.

No te preocupes -por ejemplo- por las configuraciones que hayas hecho a algún plugin, éstas se guardan en la base de datos, así que la próxima vez que borres, y posteriormente instales y actives, por ejemplo, All in One SEO Pack, no tendrás que volver a poner tus ajustes preferidos, pues ya quedará guardado en la base de datos la configuración que le asignaste inicialmente.

Con los temas es lo mismo. Solo tienes que tener en tu alojamiento el tema activo, el tema hijo si lo usas, y cualquiera de los temas por defecto de WordPress, solo uno, por si algún día falla tu tema activo, para que WordPress muestre automáticamente tu contenido con el tema por defecto, una salvaguarda que hace WordPress y que no todo el mundo conoce.

El resto sobra.

Borra los archivos temporales y de caché antiguos

Si el tema, o los plugins, han añadido carpetas o archivos y ya no los necesitas por  haberlos desinstalado, simplemente borra todo lo que ya no esté en uso.

Si tu plugin de caché guarda todo el histórico de caché desde el siglo pasado ¿de verdad lo necesitas? Borra cualquier carpeta histórica de caché que te encuentres, y ante la duda borra toda la caché, tu plugin de caché creará la versión más actual necesaria.

Vigila los inodes o inodos.

Como la inmensa mayoría de servidores web utilizan alguna versión de Linux, tienen una limitación de los conocidos como inodes o inodos, que son la cantidad de unidades de archivo que puede contener un sistema, da igual su tamaño, aquí puedes saber más al respecto.

Debido a esto, puedes tener tu web caída, no por haber ocupado los 10 Gb de espacio en disco, sino por haber superado el número de inodes que tu plan de hosting admite.

Así que vigila, no los archivos grandes – que también es importante – sino esos miles de pequeños archivos de esas copias de webs antigua que guardas en tu alojamiento, todas y cada una de esas ya innecesarias versiones que alguna vez tuviste de tu web.

Si quieres seguir "guardando recuerdos" hazlo en tu disco duro local, que sale mucho más barato el precio/giga que en un plan de hosting. Descarga tus webs históricas y luego borras la copia alojada en el servidor; recordando vaciar la carpeta Trash al finalizar, para que no sigan quedando allí los archivos borrados.

Y es solo un ejemplo. Vigila carpetas con muchos archivos, por pequeños que sean, especialmente si son pequeños, y muchos, allí se esconde el mayor consumo de inodes.

Otra práctica efectiva de ahorro en el consumo de espacio es configurar y manejar las cuentas de correo desde plataformas externas como Outlook, Thunderbird y similares, bajo protocolo POP3, de esta manera todo lo enviado y recibido quedará siempre alojado en tu computador, y no consumiendo espacio e inodes del servidor.

Optimiza las imágenes antes de subirlas

¿De verdad necesitas subir la foto de ese bonito paisaje en su versión HD?

Cuando ofrecemos imágenes en nuestra web son para ilustrar contenidos o como elementos de diseño, y ni unos ni otros requieren calidad de alta definición.

Recuerda que la mayoría del tráfico actualmente es móvil, donde tampoco tendrán sentido imágenes de enorme peso -y dimensiones- que, además, harían la experiencia de navegación terriblemente lenta.

Así que, antes de subir imágenes…

• Si el tema o plugins ya crean los tamaños adicionales que necesitan para mostrar las miniaturas y demás tamaños de tus imágenes, pon a cero los ajustes de medios de WordPress (desde el menú Ajustes > Medios) para no crear tamaños adicionales que no se utilizarán y solo ocuparán espacio en disco.
• Reduce sus dimensiones a las máximas que se verán «bien» en las resoluciones de dispositivo utilizadas por tus visitantes, información que puedes obtener en Google Analytics.
• Reduce el peso de las imágenes utilizando formatos de compresión como JPG (mejor si usas el nuevo WebP).
• Reutiliza imágenes. Si ya tienes una imagen subida que te vale de miniatura para un artículo ¿para qué subir otra parecida?. De paso, ayuda a los usuarios a identificar sobre qué van los artículos, creando una especie de «serie», detectable fácilmente por la miniatura. Lo mismo para cabeceras o imágenes con las que ilustrar un contenido, por supuesto.
• Emplea plugins y técnicas adicionales para la optimización de imágenes.

Cómo ahorrar CPU y RAM

En cuanto a la CPU  la RAM de tu servidor tenemos que centrarnos en aquellos procesos dinámicos que requieran alta capacidad de proceso de estos recursos.

Sí, estamos hablando de la programación, la base de datos, o sea, de WordPress, el tema, los plugins, y su código, de la web como la conocemos.

Cachea todo

La mejor estrategia para no consumir recursos dinámicos es convertir todo lo que se pueda a estático. Así que utiliza caché de objetos, de procesos, de memoria, persistente, para ofrecer versiones estáticas de todas las peticiones, consultas y solicitudes comunes de programación.

De este modo, las consultas más habituales a la base de datos, las peticiones de datos meta que hace WordPress, se servirán desde su copia estática, reduciendo el consumo de recursos dinámicos de tu hosting (CPU, RAM, I/O, IOPS).

El único detalle de la caché es que al mismo tiempo que ahorras en recursos dinámicos consumes más espacio en disco (al realizar copias estáticas del contenido dinámico), así que debes analizar cual es tu principal carencia, aunque nuestro consejo es que priorices la caché, porque la derivada es que ofrecerás páginas más rápidas a tus visitantes.

Usa una CDN

Si te es posible utiliza una CDN, tipo Amazon o CloudFlare, para servir remotamente desde sus servidores tus contenidos estáticos e imágenes, liberando así de peticiones a tu propio servidor.

Minimiza todo tu código

Si reduces, digamos, al 40 o 50% el peso de cada página ¿a que tu web en su conjunto se servirá más rápido, y consumirá menos recursos por parte de, por ejemplo, el motor de PHP?

Además, que con plugins como Autoptimize es cosa de hacer 3 clics. Elimina líneas vacías, tabulados, espacios, todo lo que sobra en el HTML, CSS y JavaScript que entregamos al navegador del visitante.

Software actualizado

Las versiones actualizadas de WordPress, plugins, temas, PHP, MySQL y demás aplicaciones necesarias para que funcione tu web están habitualmente más optimizadas que las antiguas, a veces con enorme diferencia.

Así que ¡actualiza, actualiza, actualiza!

Depura la base de datos

La base de datos de WordPress va aumentando de tamaño, llenándose de restos de procesos que hacen que tu hosting cada vez consuma más recursos para cualquier proceso de, solicitud, lectura y envío de datos.

Puedes depurar residuos simplemente usando la utilidad incluida en WordPress o el mismo PHPMyAdmin, o con plugins como Advanced DB Cleaner, que además te ayudará a vaciar datos transitorios temporales, los pesados transients.

Limpia la base de datos

Además de depurar residuos, en la base de datos de WordPress encontrarás tablas, líneas y elementos que ya no necesitas, normalmente de plugins y temas que ya no utilizas.

Si encuentras una tabla añadida por un tema o plugin que ya no usas bórrala. Pero ojo con esto, hazlo solo si estás seguro al 100%, sino puedes cargarte la web en un milisegundo.

Recuerda hacer una copia de la base de datos antes de hacer cualquier modificación, limpieza o borrado, para poder recuperar la web en caso de desastre.

Limpia la tabla options

Mención aparte merece la tabla options de la base de datos de WordPress, casi siempre repleta de restos de todo tipo de ajustes de plugins y temas antiguos, que ya no usas, de datos transitorios (transients) y demás basurilla que vamos acumulando en nuestra vorágine de probar todo nuevo tema o plugin disponible.

Si a eso le sumamos que no está estandarizado que los plugins y temas vacíen sus «cosas» de la base de datos al desinstalarlos, te encontrarás siempre con una tabla options de miles de líneas que ya no necesitas.

El problema es que no es fácil casi nunca saber qué puedes borrar y qué no, pues no siempre las líneas de esta tabla que dejan os plugins tienen un nombre que te permita identificar a qué pertenecen, o pertenecieron.

Sí es cierto que encontrarás a veces, con suerte, líneas del tipo «nombreplugin_opcion-del-mismo» pero no es así siempre.

De nuevo, lo mejor es trabajar con red, teniendo una copia de seguridad reciente antes de ponerte a pasar el aspirador.

En cualquier caso hay que intentarlo, pues no hay parte de la base de datos que genere más consultas, tráfico y consumo que las líneas de la tabla options.

Autoload solo de lo necesario

Todas las líneas de la tabla options de WordPress tienen una columna llamada Autoload, que define si se cargará la misma en cada ejecución de WordPress.

Todas estas opciones en carga automática y permanente tienes que verlas como pequeñas aplicaciones consumiendo recursos siempre, en todo momento, así que es buena idea cambiar el estado de «yes» a «no» de aquellas que no sea realmente necesario que se activen siempre.

Aquí volvemos a terreno incógnito, pues hay tantas, son tan poco descriptivas, que cuesta adivinar qué estás desactivando o no.

No obstante el riesgo de hacer este cambio es mínimo, pues si ves que algo deja de funcionar con un plugin o lo que sea siempre puedes volver a cambiar el Autoload a yes.

Evita usar plugins que consuman muchos recursos

Fácil ¿no?, pero ¿cuáles son? ¿cómo los detecto?

Muchos puedes detectarlos analizando un poco en ¿qué hace este plugin? pero sobre todo ¿cómo lo hace?

Un ejemplo muy claro son los plugins de entradas relacionadas:

• ¿Qué hace?: Muestra entradas relacionadas a la que está visualizando el visitante
• ¿Cómo lo hace?: «Lee» la entrada actual y busca en la base de datos entradas posiblemente relacionadas utilizando el ¿título/etiqueta/categoría/etc.?
• ¿Cómo, cómo lo hace?: ¿Hizo un análisis previo y siempre muestra las mismas a todos los visitantes o realiza todo el proceso en tiempo real en cada visita a cada contenido?

Verás que, por lógica, el consumo de recursos puede variar, pero siempre será extenso. En el ejemplo de este tipo de plugins procura siempre usar los que hagan el análisis previo en vez de en tiempo real.

Otros ejemplos de plugins que consumen muchos recursos del servidor, y para los que deberás buscar el más optimizado, serían:

• Estadísticas
• Seguridad
• SEO
• Caché (sí, regenerar o actualizar cachés consume recursos)
• Maquetadores visuales
• Comprobadores de enlaces

Desactiva plugins o utilidades inactivas

Hay plugins que es posible que queramos tener siempre instalados para tareas de mantenimiento o revisión, pero no es necesario que estén siempre activos.

Me refiero a comprobadores de enlaces como Broken Link Checker, de optimización de base de datos como Advanced DB Cleaner, etc, que aunque nos faciliten tareas no siempre tienen que estar activos, sino que podemos activarlos, ejecutar lo que quiera que hagan, y cuando termine desactivarlos.

Lo mismo para utilidades que sea innecesario tener activas de plugins o el tema. Hablo de cosas como módulos que no uses de Jetpack, ajustes que no utilizas del tema activo, ese tipo de cosas.

No envíes correos usando PHP

Por defecto, todos los correos que manda WordPress lo hace usando PHP Mail(), un consumo de recursos que puedes ahorrarte enviándolos por SMTP, mejor si es externo.

Para ello hay plugins como WP Mail SMTP que lo hacen fácil.

Controla los rastreadores

Constantemente hay rastreadores revisando tu web, pero no todos son buenos, no todos lo hacen para mandarte tráfico, y además algunos rastrean de manera muy poco eficiente para ti, con demasiado tráfico cada poco tiempo.

Un modo de controlar cada cuanto pueden rastrearte es aplicar una regla de retardo al archivo robots.txt, esta:

Crawl-delay: 30

En el ejemplo anterior reclamamos que no se repita un rastreo hasta dentro de 30 segundos. Lo mejor de este método es que Google no hace caso a esta regla. La mala noticia es que no solo Google no hace caso a esta regla.

Para estos otros insistentes rastreadores podemos usar las reglas de control de crawlers de plugins como WordFence y otros.

Bloquea intentos de acceso excesivos

Una medida de seguridad para WordPress que también evita consumos altísimos de los recursos de tu servidor es bloquear todo intento de acceso masivo a tu administración.

Plugins como iThemes Security te ofrecen ajustes para bloquear accesos masivos.

Administración siempre activa

Si estás navegando y dejas activa la administración de WordPress en otra pestaña estarás consumiendo recursos innecesariamente.

Tampoco tengas varias ventanas abiertas de administración, varias vistas previas de entradas, etc.

Todo ello consume mucha RAM y CPU de tu servidor.

Controla el cron de WordPress

El cron de WordPress ejecuta procesos programados, del mismo WordPress y de plugins y el tema, y no todas esas tareas son necesarias, y casi nunca son necesarias con la frecuencia por defecto de WordPress.

Lo usa WordPress para publicar artículos programados, lo usan los plugins de copias de seguridad para sus tareas programadas, WooCommerce para cancelar pedidos sin pagar y muchos otros.

Un modo de controlarlo es cambiar su programación, forzando por ejemplo a que se ejecute solo 1 vez al día en vez de cada hora, lo que redundará en menos consumo de CPU del servidor.

Puedes ver las tareas programadas en el cron de WordPress usando comandos de WP-CLI:

wp cron event list

O puedes valerte de plugins como WP Crontrol para optimizar y personalizar su ejecución o incluso eliminar tareas del cron.

Si quieres ir más allá puedes desactivar el cron de WordPress y crear un cron de Linux en tu servidor. Lo primero es desactivar el cron de WordPress añadiendo esta línea al archivo wp-config.php:

define('DISABLE_WP_CRON', true);

Cuando guardes habrás liberado todas las tareas cron, y el consumo de recursos de tu hosting habrá llegado a mínimos, nunca vas a tenerlo más optimizado y consumiendo menos CPU y RAM.

Ahora bien, puede que algo no funcione (seguro) así que puedes crear un cron en tu alojamiento, normalmente en cPanel, en el que podrás especificar cada cuanto tiempo se ejecutará.

Este sería un ejemplo de trabajo cron creado en cPanel que se ejecutará cada media hora:

El comando a introducir para que el cron real lance el cron de WordPress sería así:

wget -q -O - http://tudominio.es/wp-cron.php?doing_wp_cron >/dev/null 2>&1

Todas estas tareas cron de WordPress se almacenan en una línea de la tabla options de la base de datos de WordPress, con Autoload en «yes» que, curiosamente, se llama también cron.

Reduce la carga de admin-ajax.php

Si alguna vez has analizado la velocidad de tu web en herramientas como las Pingdom Tools habrás observado que hay un archivo de WordPress, admin-ajax.php, que aparece montones de veces en la lista de procesos, y en ocasiones ralentiza mucho la carga total de la misma.

Esto es debido a que es el archivo que, entre otras cosas, gestiona la famosa utilidad de WordPress llamada HeartBeat, además del uso extensivo que pueden también llegar a hacer de admin-ajax.php algunos plugins.

Como los procesos de admin-ajax.php no suelen poderse cachear provocan además un enorme consumo de RAM y CPU de tu alojamiento.

Esto es debido a que admin-ajax.php se ocupa de servir contenido al navegador sin tener que recargar la página, por eso a los plugins de redes sociales, maquetadores, e-commerce y muchos otros les encanta usar esta utilidad de WordPress.

Y el modo de reducir esta carga es controlando la cantidad y frecuencia de peticiones a admin-ajax.php ajustando la HeartBeat (aquí, puedes ver cómo, además de opciones adicionales de optimización).

Carga solo lo necesario

Para ir terminando, seguramente ya sabrás que WordPress carga montones de elementos por defecto que no siempre son necesarios; de hecho algunos casi nunca son necesarios.

Para evitar la carga de todas las funcionalidades que carga WordPress que aportan poco o nada a tu web puedes instalar y activar (no hay nada que configurar) el plugin WordPress WPO Tweaks que, entre otras optimizaciones, hace las siguientes:

• Elimina los Dashicons de la barra de administración (solo para los usuarios no conectados)
• Elimina estilos y scripts de Emoji
• Desactiva la REST API (desactivación completa)
• Controla el intervalo de la Heartbeat API
• Elimina cadenas de petición de los recursos estáticos
• Atrasa la carga de JavaScript
• Elimina cadenas de petición de Gravatar
• Elimina el enlace de Really Simple Discovery de la cabecera
• Elimina wlwmanifest.xml (Windows Live Writer) de la cabecera
• Elimina la URL de enlace corto de la cabecera
• Elimina el generador de versión de WordPress de la cabecera
• Elimina la precarga de DNS de s.w.org
• Elimina jquery_migrate
• Elimina enlaces innecesarios de la cabecera
• Elimina el nombre de generador de los feeds RSS
• Elimina el filtro Capital P Dangit
• Desactiva la vista previa de las miniaturas de PDF
• Desactiva los pingbacks propios