Utilice y proporcione imágenes complejas en WordPress

El sitio web es cada día más grande. Ya sea que esté incrustando videos de reproducción automática, libros electrónicos, PDF o numerosas páginas o publicaciones, su sitio puede usar un ancho de banda significativo según su contenido. El tamaño medio de un sitio web casi se ha duplicado en los últimos tres años. Esto se debe al tamaño cada vez mayor de los archivos de imágenes que las personas colocan en sus páginas. Las imágenes más grandes pueden ralentizar el tiempo de carga. ¿Cuál es la mejor manera de minimizar el tamaño de la imagen al desarrollar un sitio?

Imagen SVG

Los gráficos vectoriales escalables técnicamente no son imágenes. Estos son formatos de imágenes vectoriales basados ​​en XML para gráficos 2D que admiten funciones interactivas y animaciones. Las imágenes SVG pueden ser mucho más pequeñas que las imágenes PNG o JPEG siempre que utilices colores simples. La mayoría de las aplicaciones para imágenes SVG son para logotipos e íconos.

Las imágenes SVG tienen dos problemas: complejidad y seguridad. La creación de imágenes SVG requiere programas basados ​​en vectores como Adobe Illustrator y conocimientos adicionales para crearlas correctamente. Debido a que es XML, puede ejecutar código que se puede ocultar, lo que plantea un problema de seguridad. Por esta razón, WordPress actualmente no permite cargar imágenes SVG sin modificar el código o usar complementos. Si desea utilizar imágenes SVG, debe desinfectar las imágenes con un código personalizado o un complemento como el siguiente: SVG seguro..

Imagen ampliada / reducida

Un problema común mencionado en varias herramientas de prueba de sitios es la necesidad de proporcionar imágenes a escala. Esto significa que actualmente está enviando una imagen que es más grande de lo que necesita. Esto no solo permite que su sitio use más ancho de banda del que necesita, sino que también consume más memoria y potencia de procesamiento en su dispositivo. Todas las imágenes deben tener el tamaño requerido por el marcado.

Si desea guardar como GIF, JPEG o PNG para la web en Photoshop o en un programa de edición de imágenes, establezca el ancho y el alto en la configuración máxima que necesite. Si varios escritores están agregando imágenes a su sitio, considere la posibilidad de crear una función o utilizar un complemento para cambiar el tamaño después de la carga. Cambiar el tamaño de la imagen después de cargarla.. Asegúrese de que WordPress también genere miniaturas pequeñas. Finalmente, use los atributos width, height y srcset para especificar el tamaño de la imagen en su marcado HTML.

¿Necesita más consejos para que su sitio funcione con la mayor fluidez posible? Por favor asegúrese de seguir Crea un blog y suscríbete a #PressOnNews. Todos los martes, publicaremos las últimas noticias de la industria, consejos, sugerencias y estrategias para ayudarlo a hacer crecer su negocio.