Guardar imágenes para la web siempre ha sido un misterio para muchos. Cargar imágenes que son pesadas (tamaño de imagen original a 5000px de ancho, imágenes no optimizadas) no solo creará problemas con la experiencia del usuario en su sitio, sino que también afectará su estrategia SEO (velocidad de carga, tasa de rebote, clasificación, etc.).,
Este artículo está dividido en varias partes que cubren todo lo que necesitas saber sobre cómo preparar tus imágenes para la web. En la primera parte del post vamos a enumerar los tamaños de imagen recomendados para su sitio Flothemes. A continuación, el artículo cubrirá cómo inspeccionar las diversas secciones en su sitio web para identificar los tamaños correctos para sus imágenes antes de subirlas a la web. También explicaremos cómo exportar / guardar imágenes correctamente, para que estén optimizadas para la velocidad.,
finalmente, proporcionaremos algunos consejos de SEO de imágenes sobre cómo titularizar tus imágenes correctamente al guardarlas y por qué usar etiquetas ALT mejorará tu SEO. Para las imágenes ya cargadas en su sitio, le mostraremos cómo identificar las imágenes que son demasiado grandes y están ralentizando su sitio. ¡Empecemos!
¿por qué son importantes los tamaños de imagen y el rendimiento del sitio?
Las imágenes no optimizadas ralentizan los sitios web. Sitios web lentos = mala experiencia de usuario, menores posibilidades de posicionarse en las búsquedas de Google y, en última instancia, menos consultas y clientes.,
guardar tus imágenes con las dimensiones apropiadas y optimizar las imágenes para la web puede ayudar con algunas cosas:
- velocidad-según una investigación realizada por Google, si una página web se carga en más de 5 segundos, la probabilidad de que un usuario móvil abandone esa página aumenta en un 90%. Al redimensionar y reducir el tamaño de las imágenes, hace que las páginas de su sitio web sean más rápidas.
- Experiencia de usuario: las imágenes impactantes y de buena calidad ayudan a los visitantes a tener una experiencia más atractiva mientras navegan por tu sitio web., Al mantener esas imágenes optimizadas y cargadas rápidamente, estás asegurando una experiencia perfecta y fluida para tus visitantes, lo que los motiva a pasar más tiempo en tu sitio y explorar tu contenido.
- SEO ranking-la velocidad del sitio es un factor de clasificación. Cuanto más rápido sea su sitio, mejor podrá posicionarse. Las páginas Web con imágenes optimizadas se cargarán mucho más rápido tanto en dispositivos de escritorio como móviles.
- ventas – tiempos de carga más rápidos y un mejor SEO pueden ayudar a traer más usuarios a su sitio, lo que aumenta sus posibilidades de ser consultado y reservado.,
Nota: Cuando hablamos de tamaño de imagen nos referimos a la dimensión de la imagen en píxeles.
¿Cuáles son las mejores imágenes de tamaño para la web y Flothemes?
al subir imágenes a la web hay una serie de cosas a tener en cuenta, como para qué se utiliza la imagen, qué tamaño debe tener el archivo y qué tipo de imagen debe usarse para diferentes áreas de su sitio.,
uso y tipo de imagen
Hay varios casos en los que querrá usar diferentes tamaños de imagen para diferentes áreas de su sitio, a continuación cubriré las áreas más comunes y las opciones de tamaño que puede usar para cada una. Tenga en cuenta que estos son recomendados, retina amigable, opciones de tamaño teniendo en cuenta que la mayoría de los usuarios ver el sitio en un dispositivo que es móvil o 13-15 pulgadas de tamaño promedio. Sin embargo, si su objetivo es hacer que el sitio se vea genial para su monitor de 27 pulgadas (que tiene una resolución realmente alta), tenga en cuenta que podría no ser lo que usan sus clientes potenciales.,
si desea ser más preciso en cómo sus usuarios ven su sitio y su cartera, puede comprobar los dispositivos utilizados para acceder a su sitio a través de su Google Analytics (vaya a audiencia – tecnología – navegador & OS – resolución de pantalla), y ajustar el tamaño recomendado para que coincida con la proporción requerida de su usuario promedio.
imágenes de ancho completo
2400x1600px, jpeg, guardadas para web y optimizadas
en todo el sitio es posible que tenga secciones en las que deba usar imágenes de ancho completo que cubran toda la pantalla de izquierda a derecha., Estas áreas pueden ser imágenes de héroes, presentaciones de diapositivas a pantalla completa, Imágenes de banner. Para garantizar que sus imágenes de ancho completo se vean bien en cualquier dispositivo grande o pequeño, el tamaño recomendado es de 2400x1600px. Tenga en cuenta que los dispositivos tienen una relación diferente a la que dispara y es posible que sus imágenes se recortarán cuando se vean en la web. Como recomendación, intente realizar tomas más amplias de lo habitual para su contenido web, para evitar recortar el contenido de imágenes importantes.,
dentro de las imágenes de contenido
Horizontal – ancho máximo 1500px, jpeg, guardado para web, y optimizado
Vertical – ancho máximo 1000px, jpeg, guardado optimizado
en las páginas de su sitio, habrá secciones que consisten en imágenes, áreas de texto, botones de llamada a la acción, etc. Básicamente, estas son las secciones donde las imágenes son parte del contenido interno (léase «No ancho completo»)., En estos casos, a menos que se especifique el tamaño recomendado como lo hacen algunos de nuestros bloques Flothemes, puede seguir las recomendaciones anteriores para imágenes horizontales y verticales. En función de su relación, la altura se ajustará en consecuencia cuando Guarde sus imágenes.,mostrar galerías: asegúrese de que todas tengan la misma altura recomendada 1500px, independientemente de si son horizontales o verticales
blog post Images
- Si está preparando imágenes para subir dentro de un blogpost, asegúrese de que todas tengan el mismo ancho, se recomienda 1500px, independientemente de si son horizontales o verticales
imágenes destacadas
hay 3 tipos de imágenes destacadas: retrato, paisaje e imágenes de héroes., El tamaño de imagen vertical y horizontal sigue la misma recomendación que las imágenes de contenido interior, mientras que el tamaño recomendado para las imágenes de héroe se cubre bajo imágenes de ancho completo. La clave para tener buenas imágenes destacadas es la consistencia. Si desea utilizar todos los retratos asegúrese de que sean del mismo tamaño, lo mismo ocurre con las imágenes de paisaje y héroe. Si usa una rejilla de mampostería, el tamaño anterior no es tan relevante, solo asegúrese de que las imágenes tengan al menos 1000px de ancho.,
Si tiene algún problema con el tamaño de la imagen, asegúrese de echar un vistazo a las opciones de tamaño de la imagen en la configuración de Flothemes para asegurarse de que están configuradas correctamente.
formas de averiguar los tamaños de imagen correctos para su web
es posible que los tamaños recomendados anteriormente no coincidan con sus necesidades debido a un diseño específico. Si no está seguro sobre la dimensión de imagen correcta, afortunadamente, hay algunas maneras que pueden ayudarlo a inspeccionar fácilmente las imágenes de su sitio web e identificar el tamaño correcto necesario para cada elemento en su sitio.,
una cosa importante a recordar es que para los dispositivos retina, es necesario duplicar la densidad de píxeles de la imagen. Lo que eso significa es que necesita imágenes del doble del tamaño de los dispositivos retina para que se vean bien y nítidas. Por lo tanto, una vez que haya encontrado los tamaños de imagen correctos para cada sección de su sitio, querrá duplicar esos tamaños y solo luego exportarlos y cargarlos en su sitio.
a., Uso de la extensión de información de Tamaño de imagen
el primer método para encontrar tamaños de imagen para su sitio es mediante el uso de la extensión de información de Tamaño de imagen para Chrome (si no utiliza Chrome en su computadora, le recomendamos encarecidamente que lo use mientras crea su sitio). Una vez que haya instalado la extensión, esta herramienta le permitirá averiguar los tamaños de imagen de cada elemento de imagen en su sitio.
echa un vistazo a las imágenes en tu sitio, toma notas, y luego con este conocimiento podrás adaptar tus fotografías exactamente para que se adapten a los espacios como se pretenden en el diseño del tema., Solo recuerde, con las pantallas retina usted requiere que sus imágenes sean dos veces más grandes que el espacio previsto. Así que si tienes un espacio de imagen de 750x500px, para retina debería ser de 1500x1000px al subir a WordPress (o cualquier otra plataforma).
por ejemplo: cuando inspeccionamos una imagen con esta extensión, se muestra a 780x520px, pero su tamaño real es 1560x1040px. Esto se debe a que estamos usando una pantalla retina al inspeccionar la imagen. En este caso, puede utilizar los tamaños de dimensiones para elegir el tamaño de la imagen.,
en un dispositivo no retina, los tamaños mostrados y las dimensiones seguirán siendo los mismos. En este caso, duplica los números y sube imágenes a ese tamaño.
la principal limitación de esta herramienta, es que no puede inspeccionar las imágenes de fondo para el tamaño. En muchos temas, las imágenes de fondo se utilizan en lugar de los elementos HTML de la imagen, ya que son más flexibles cuando se muestran imágenes. Si no puede inspeccionar las imágenes porque son imágenes de fondo, puede usar el siguiente método para revisar los tamaños de las imágenes en su sitio.
b., Usando la herramienta Inspector
con Chrome y Safari también puedes usar la herramienta developers inspector Para encontrar tamaños de imagen en el sitio. El principio será el mismo que antes, inspeccione los diversos elementos en el sitio y anote los tamaños. Duplica los tamaños de imagen para dispositivos retina y luego súbelos a WordPress, una vez que hayan sido optimizados para web y titulados correctamente para SEO.
las limitaciones de este método serán que si el sitio está utilizando algunos elementos responsivos establecidos en valores REM, las imágenes pueden reducirse al usar el inspector en la misma ventana., Si el sitio también está utilizando elementos responsivos, serán más grandes en pantallas más grandes, y más pequeños en otros. Es mejor usar una pantalla más grande cuando sea posible al revisar el sitio, para que pueda obtener el tamaño de imagen más preciso. En cualquier caso, el uso de este método le dará una buena indicación de los tamaños para su sitio y le permitirá abordar la adición de imágenes a su sitio web con más cuidado.
Chrome
Chrome ha incorporado herramientas para desarrolladores, por lo que es el navegador más popular en la web para desarrolladores y diseñadores., El siguiente video explica cómo puede inspeccionar las imágenes en su sitio para averiguar sus tamaños:
Firefox
con Firefox, al igual que chrome, tienen una herramienta de inspector integrada que le permite verificar las imágenes de su sitio.
Safari
Si está utilizando Safari, puede utilizar la herramienta inspector Para ver los tamaños de las imágenes. Consulte la siguiente guía sobre cómo habilitar las herramientas para desarrolladores.,
Ahora usted puede ir a diferentes secciones en su sitio y preparar las dimensiones de la imagen.
para las galerías, querrá ver la altura de las imágenes, ya que generalmente están limitadas por la altura (por lo que el ancho se puede establecer en automático).
Para blog tenga en cuenta el ancho de las imágenes, ya que están limitadas por el ancho (la altura puede ser automático).,
para el resto de los elementos en su sitio, debe usar el método descrito anteriormente para obtener las dimensiones correctas y cargarlas en las dimensiones óptimas para su sitio.
ahora que sabe qué dimensiones necesita para todos los elementos de su sitio, le explicaremos cómo optimizar todas sus imágenes para el tamaño, eso es en términos de tamaño de datos. El tamaño del archivo de tus imágenes también es muy importante para la web. Cargar imágenes hinchadas y pesadas en su sitio web agotará los recursos de su servidor, ralentizará su sitio y, en efecto, creará una experiencia de usuario negativa.,
optimizar y guardar imágenes para la web
Hay una serie de cosas a considerar al optimizar y guardar imágenes para la web. Debe considerar qué tipo de archivo usar, JPG, PNG o GIF dependiendo del propósito. Querrás etiquetar tus imágenes correctamente para propósitos de SEO y querrás guardarlas en el formato de color correcto (sRGB para web).
dependiendo del propósito, debe guardar las imágenes en uno de los siguientes formatos .jpg, .gif, or .png. JPG será el formato más común al guardar imágenes para el sitio web de su cartera, también serán los más ligeros en tamaño.,
para los nombres de archivo, asegúrese de que sean apropiados para cada imagen o publicación de blog en particular. Utilice solo letras, números,guiones bajos y guiones. Trate de usar solo letras en inglés. Los caracteres de otros idiomas, signos de interrogación, espacios, signos de porcentaje pueden cargarse incorrectamente o causar un comportamiento inesperado en sus galerías o publicaciones de blog.
por ejemplo, si acabas de hacer una boda boho en el Biltmore Santa Barbara, etiqueta Las imágenes, boho-wedding-biltmore-santa-barbara_0001.jpg esto será mucho más amigable con el SEO, y podría proporcionar una mejor clasificación para su sitio.,
optimización de imágenes en Lightroom
seamos realistas, hay muchos ajustes diferentes para elegir e infinitas combinaciones de números para ingresar. Sin embargo, si ya conoce el formato de imagen y las dimensiones de la imagen del archivo requerido, es mucho más fácil.
en Lightroom, puede acceder al cuadro de diálogo Exportar de 3 maneras:
resaltar y exportar
simplemente puede resaltar / seleccionar cualquier foto de su biblioteca de Lightroom y hacer clic con el botón derecho en la foto. En el menú emergente, seleccione la opción Exportar.,
File and Export
la segunda forma es ir a File -> Export
Usando el atajo de teclado
la tercera, y la forma más rápida atajo de teclado:
Shift + Command + E (++E)
no importa cómo llegues allí. Cualquiera de estos funcionará, así que elige el más fácil para que lo recuerdes.,
diálogo de exportación de Lightroom
ahora que sabe cómo exportar las imágenes para la web, cubriremos las 4 secciones y las diversas opciones que puede elegir en el diálogo de exportación de Lightroom para permitirle exportar imágenes optimizadas para la web.
1. Nombre de archivo
cada exportación puede incluir su propia configuración de cambio de nombre. Si mantiene la opción predeterminada, sus imágenes tendrán el mismo nombre que los archivos originales y se guardarán como una imagen JPEG., Sin embargo, le recomendamos que marque la casilla «Cambiar nombre a» y elija una de las muchas plantillas de cambio de nombre que ofrece Lightroom para personalizar las imágenes exportadas. En el nombre de archivo, cambiamos el nombre de los archivos de imagen a «Secuencia de nombres personalizada», donde el texto personalizado está estrechamente relacionado con el título de nuestra publicación de blog o las palabras clave de la publicación de blog.
2. En Configuración de archivo
asegúrese de que el formato de imagen esté establecido en JPEG. Esta es la opción más amigable para la web. Su calidad no debe ser inferior a 65., Normalmente lo ponemos en 75. Su espacio de color debe ser sRGB. Este es el espacio de color utilizado por la web por lo que será el mejor. No marque la casilla » limitar el tamaño del archivo a:». Marcar esa casilla disminuiría significativamente la calidad del archivo.
para resumir, al guardar las imágenes Utilice estos ajustes:
- 75% de calidad
- .formato jpeg (.png para logotipos e iconos)
- colores sRGB
3. Tamaño de la imagen
marque la casilla Cambiar tamaño para ajustar y seleccione Ancho & altura., En el cuadro W: H: especifique W (ancho en píxeles) al valor necesario (1500px para publicaciones de blog y 2880 para presentaciones de diapositivas). Al dejar el valor en H (altura) en blanco, se establecerá en tamaño automático.
para galerías, puede dejar W en blanco y establecer H (Altura) a 1500px, esto debería ser óptimo para la mayoría de los temas.
los tamaños anteriores ya están optimizados para dispositivos retina.
4. Sharpening de salida
marque la casilla junto a «Sharpen For» y seleccione la cantidad a «High».
Ahora puede exportar las imágenes y seguir este proceso en cualquier momento que esté exportando imágenes.,
ajustes de calidad de imagen
en el mundo de ensueño de un fotógrafo, siempre exportaríamos imágenes con la máxima calidad. En realidad, descubrimos que no se requieren exportaciones de máxima calidad. En tamaños web, las diferencias de calidad a menudo son difíciles de percibir, y eso significa que podemos reducir la calidad ligeramente, reduciendo el tamaño del archivo significativamente.
mientras las imágenes no sean suaves, sus clientes no sabrán la diferencia entre la imagen que tomó y la imagen que se muestra en su sitio.
esto también se aplica a los colores de las imágenes., La pantalla de todos está calibrada de manera diferente, por lo que preocuparse por pequeñas variaciones de color entre una imagen en un navegador y en su herramienta de edición de elección es una pérdida de tiempo, a menos que arruine la calidad de la imagen.
En el extremo superior de la escala de calidad, hay rendimientos decrecientes. La diferencia en la calidad percibida entre un ajuste de calidad de 75% y 100% es difícil de ver, pero aumenta el tamaño del archivo significativamente.
Dado los resultados anteriores, la selección de la exportación de 65-75 calidad., Logra el equilibrio correcto entre la calidad y el tamaño óptimo del archivo de imagen.
Ahora es tu turno de cambiar el nombre de tus archivos, exportarlos para la web, guardarlos para la web y tendrás algunas imágenes muy bien optimizadas para la web.
paso de bonificación: optimiza las imágenes antes de subirlas a tu sitio
hay un paso final que puede ayudarte a eliminar drásticamente el exceso de datos de tus imágenes y reducir el tamaño del archivo: estamos hablando de herramientas como JPEGmini o TinyJPG.
estas herramientas pueden ayudarte a optimizar aún más tus imágenes., Elija uno y ejecute sus imágenes a través de él:
- JPEGmini-esta aplicación le permite comprimir sus imágenes y reducir su tamaño de archivo sin ningún efecto visible en la calidad de la imagen. Si tiene la versión Pro, hay una extensión para Lightroom que lo hará automáticamente en la exportación, una herramienta muy recomendable para cualquier fotógrafo.
- TinyJPG o TinyPNG – puede ejecutar sus imágenes a través de tinyJPG o tinyPNG para comprimir sus imágenes aún más. Sin embargo, hay 2 limitaciones., Con la versión gratuita de esta herramienta, solo puede comprimir 20 imágenes a la vez, y el tamaño del archivo por imágenes debe ser inferior a 5 MB.
Este será el paso final en la creación de imágenes optimizadas web rápida para mantener la velocidad de su sitio rápido, y las imágenes se ven muy bien!
Obtenga más información leyendo esta guía completa sobre cómo optimizar imágenes para su sitio de WordPress.
Image SEO
ahora que tienes tus imágenes dimensionadas, optimizadas y subidas a tu sitio, ¡ahora querrás agregar etiquetas ALT! Este es el paso final en la creación de imágenes optimizadas para fines de SEO., La etiqueta ALT es lo que los motores de búsqueda utilizan para leer imágenes. Sin ellos, sus imágenes son prácticamente inexistentes en la web.
afortunadamente con WordPress puedes ir a tu Biblioteca Multimedia después de cargar y etiquetar cada imagen., Un gran complemento que le permitirá hacer esto rápidamente es WP Meta SEO, cuando se agrega, puede ir a WP Meta SEO > información de imagen y agregar etiquetas ALT a cualquier imagen donde no esté presente, una vez completado el complemento se puede desactivar:
También hay varios complementos que agregarán las etiquetas alt automáticamente. Rank Math es una buena solución de plugin para esto, simplemente instálelo y agregará automáticamente etiquetas ALT al cargar desde la descripción de la imagen o el título.,
lea esta guía de SEO de imágenes para descubrir más consejos y trucos y asegúrese de aprovechar al máximo sus imágenes en los resultados de búsqueda.
así que eso es todo amigos. Los 3 pasos para tener imágenes optimizadas para su sitio web.
comience calculando las dimensiones de su imagen, luego guárdelas correctamente para la web, agregue títulos adecuados y optimice su tamaño. Finalmente, agregue etiquetas alt para mejorar el SEO a través de WordPress (debería ser posible agregar etiquetas ALT en todos los sistemas de gestión de contenido, consulte la documentación para averiguar cómo, o comuníquese con soporte).,
encontrar imágenes no optimizadas
Si ya ha subido imágenes a su sitio y desea saber cómo encontrar las que están ralentizando su página, consulte el siguiente video. Herramientas como GTMetrix o Pingdom, o el uso de la consola del navegador le permitirá encontrar fácilmente imágenes que son demasiado grandes para la web.
Si desea obtener más información sobre cómo optimizar la velocidad de su sitio, consulte esta útil guía.
Flothemes
Empoderándote
Leave a Reply