Como añadir imágenes a una página web

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (22 votos, promedio: 3,59 de 5)
Cargando…

También te podría gustar...

Sobre este artículo

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (22 votos, promedio: 3,59 de 5)
Cargando…

Licencia: Coautor del artículo: Daniel Ernesto Navarro Herrera. Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Se dedica desde hace más de 10 años al diseño web y muy especialmente al front-end. Apasionada de Internet y los proyectos online. Sigue muy de cerca todo lo que se cuece en cuanto a emprendimiento. Ha trabajado como front-end y visual designer para empresas como ELPAIS, Banco Santander y actualmente Tuenti.

40 Respuestas

  1. Davis Pérez

    Excelente Verónica!

    Es uno de los post más completos que he encontrado respecto al tema. No obstante aún sigo sin conseguir en la web la manera de:

    1. Editar el html dado por Amazon (web de afiliados) para generar la imagen. Ya que he notado que a pesar que coloco un texto descriptivo en el “alt” de ese html generado, aún me siguen indicando distintas herramientas que no indico el “alt” (valga la redundancia).
    2. Ese html generado por amazon además genera muchas “html request” el cual ralentiza mi web, por lo que cuando revisa otras web de afiliados en su código fuente al parecer no utilizan completamente el texto generado por amazon.

    Así que te pregunto, como puedo hacer?

    • Hola Davis!

      Gracias por tus comentarios, me alegra que te guste el artículo.

      Respecto a tus preguntas no sé si te estoy entendiendo, si te refieres al código que generas desde la barra web de afiliados de Amazon, es un iframe, por lo que poco puedes modificar ahí.

      ¿De dónde obtienes el código?.

      Saludos.

      • Davis Pérez

        Exactamente Verónica, desde sitestripe (la barra web de afiliados de Amazon).

        Realmente no sé como hacen aquellas webs que utilizan esta herramienta para indicar el texto ALT.

        Porque lo que he visto en algunas webs es lo que indicas en tu artículo: suben la imagen (probablemente la scrapean y al parecer eso viola las políticas de Amazon), editan el ancho de la imagen y colocan e texto alt.

        ¿Alguna sugerencia? y gracias por tu respuesta.

        • Hola Davis!

          Ah ok, el iframe te lo devuelve cuando seleccionas imagen + texto, entiendo que tú estás usando la imagen sola.

          Entonces si usas el código de la barra de afiliados, la opción sólo imagen, sería algo así:

          <a href="url-de-archivo" target="_blank" rel="noopener noreferrer nofollow">
              	<img border="0" src="ruta-de-imagen" alt="tu texto alternativo" />
          </a>
          <img src="imagen-de-trackeo-de-amazon" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
          

          “tu texto alternativo” es el ALT. Quizá la segunda imagen te la puedes ahorrar, para lo que dices de evitar peticiones innecesarias, pero lo desconozco.

          Espero que te sirva, saludos.

  2. Eliza Gonzales

    Hola Verónica Milán.

    Soy nueva en esto espero que me ayudes, creé una página web de mi negocio pero quiero poner un logo con mi marca de negocio, pero me sale muy grande.

    Quiero plasmar mi logo en mis fotos para que otras páginas no me roben.

  3. Roser

    Hola! Alguien sabe donde puedo encontrar el icono de youtube en una URL? Quiero colocarlo en mi web junto otros social media iconos.
    Gracias!!

  4. Gaston

    hola una consulta yo arme mi pagina web con direccionamiento de imagenes en mi pc. Ej img src=”c://Desktop/carpeta/imagen.jpg; y ahora contrate el servicio de hosting y como deberia poner el direccionamiento img src=”www.mipagina/carpeta/imagen.jpg”?

    • Verónica Milán

      Hola Gaston,

      Sí, una vez subas tu página web a internet tienes que modificar la ruta de las imágenes. Más o menos como tú lo has puesto:

      img src=”http://www.mipagina/carpeta/imagen.jpg”

  5. María Teresa Mendieta

    Hola! Me han resultado muy útiles tus artículos. Quería hacerte una consulta. Si en un sitio web se utiliza una misma imagen en dos páginas distintas con distinto tamaño, tengo que cargar la misma imagen en dos tamaños diferentes o el programador web debería encargarse de que la imagen se adapte automáticamente a los dos tamaños?

    • Verónica Milán

      Hola María Teresa,

      Depende de la diferencia de tamaño que haya entre ambas imágenes.

      Si son muy diferentes, entonces sí merece la pena cargar la misma imagen en dos tamaños diferentes, puesto que sino, la imagen que es más pequeña pesa más de lo necesario y puede tardar más en cargar que si estuviera ajustada al tamaño en que se muestra.

      Si no hay mucha diferencia de tamaño, no creo que merezca la pena usar imágenes diferentes. En ese caso podrías usar la misma en ambas páginas.

  6. Juan

    La información es muy clara. Me ha resultado muy interesante y muy útil.
    Un saludo
    Juan

  7. Jose Luis

    Muchas gracias por una explicación tan clara!!

  8. Raul_R

    Por fin algo claro y útil, Gracias !!

  9. Christian.A.

    Gracias por la ayuda, siempre se aprenden cosas nuevas. Salu2.

  10. German

    Muchìsimas gracias por tu aporte amigo muy bueno y detallado , la pàgina es muy buena

  11. Raúl Baena

    Hola, quiero poner rel=”lytebox” en todas las fotos de mi página web ¿puedo hacerlo en la hoja de estilos o tengo que hacerlo una por una?

  12. Luis Cains

    Interesante entrada. Sobre todo la partes en donde hablas de reducir el tamaño de la imagen desde el editor HTML. De verdad que no lo sabía, muchas gracias.

  13. Gina

    Hola, estoy intentando poner dos fotos en mi web, que también servirán de enlace. El problema es que se publican en linea vertical y yo quiero que se publiquen en linea horizontal ¿como ordenarlos?

    Gracias

  14. Lourdes

    Gracias es muy explicito.

    Me gustaría otro post para saber como poner comentarios en mi página.

  15. Siempre es bueno refrescar estos temas. Gracias!

  16. Verónica, muy buenas herramientas.

  17. He visitado tu sitio y es muy bueno y sobre todo con muy buena información. Estaré revisando mas información como ésta, es de suma importancia para la gente que empieza, se sacaron un 10 definitivamente.

    Saludos.
    Su amigo.
    Marco A. Arteaga Silva.

  18. ema

    hola q tal muy buena la pagina queria saber si hay alguna propiedad para poner poe ej una imagen se no se 300×300 y al tocarla se agrande a no se 500×500 espero respuestas desde ya muchas gracias un saludo

  19. Alejandro, creo que lo que estás buscando es añadir un favicon, prueba con este enlace: https://www.lawebera.es/

    Un saludo.

  20. alejandro

    buenas tardes, estoy tratando de insertar una imagen a mi pagina web que se vea en la barra de direcciones pero no se como hacerlo.

    espero respuestas, gracias Ale.

  21. L3B

    Muchísimas gracias por la información. Era justo lo que estaba buscando. Simple y bien explicado. Gracias de nuevo.

  22. Andrea puedes determinar un estilo específico para ese botón con el atributo class, a partir de ahí puedes darle el aspecto que quieras.

    Un saludo.

  23. Hola,
    Tengo establecido en CSS que todas las imágenes de mi web tengan un borde, pero hay una imagen en concreto (un botón) que no quiero que lo tenga ¿cómo lo hago?

    Muchas gracias (la página está fenomenal),

    Andrea

  24. ciberpunk

    no todos los navegadores soportan los favicon pero con la velocidad de actualizacion de los usuarios esto sera cosa del pasado

  25. Poemas

    Muy buena informacion, antes solo pegaba sin saber el significado de cada code, gracias

  26. sylvia

    hola
    este tema es muy importante al momento d hacer o crear nuestra propia pagina, pero realmente seria bueno qe incluyeran la forma de como se podria organizar una imagen al lado izquierdo, pero ya habiendo una al derecho, es decir en la misma linea horizontal, pero en 2 columnas o en los dos extremos,…Gracias por el tema aqui tratado y espero que alguien pueda responder mi duda.

  27. Yurtdisi Egitim

    is there any one who knows any source about this subject in other languages?

  28. Matias

    Gracias, este tema me ha sido de mucha ayuda

  29. Anne

    Muy buen recurso, lo voy a utilizar en mis sitios, gracias.

Deja un comentario

El email no se publica. Todos los campos obligatorios, salvo Web.

Centro de preferencias de privacidad

Cookies imprescindibles

Cookies que son necesarias para que el sitio funcione correctamente.

gdpr

Cookies de terceros

Se utilizan para rastrear la interacción del usuario y detectar posibles problemas. Nos ayudan a mejorar nuestros servicios al proporcionar datos analíticos sobre cómo los usuarios usan este sitio.

_ga, _gid, _gat