Añade imágenes de productos con ChatGPT

Curso de Creación de Páginas Web con ChatGPT

Clase 4 de 9

Clase 4 / 9

Recursos

Personalizar una página web con imágenes generadas por inteligencia artificial es uno de los pasos que más impacto visual aporta a una tienda online. Aquí aprendes a crear, alojar y enlazar imágenes de productos usando ChatGPT e Imgur, sin necesidad de diseñar nada desde cero, ideal para quienes están construyendo su primer sitio con ayuda de IA.

¿Qué herramientas de IA sirven para mejorar imágenes de productos?

Antes de tocar el código, conviene preguntarle a ChatGPT qué opciones existen. La consulta directa funciona muy bien: ¿qué herramientas de inteligencia artificial gratuitas puedo utilizar para mejorar las imágenes de mis productos y aumentar las ventas? [01:00].

La respuesta entrega un listado con descripciones y enlaces a cada plataforma. La elección depende de lo que necesitas: retocar fotos existentes, quitar fondos, mejorar resolución o generar imágenes desde cero.

¿Puedo generar imágenes de productos sin tenerlas previamente? Sí. ChatGPT puede crear imágenes desde una descripción de texto, por ejemplo crea una imagen de una camiseta con una nebulosa para poner en mi tienda de ropa, y devuelve la imagen lista para descargar.

¿Cómo creo imágenes desde cero con ChatGPT?

El flujo es conversacional. Le pides el producto con detalle y la IA lo genera [01:45]. En la clase se crean dos: una camiseta con nebulosa y un pantalón con estrella fugaz.

Hay un detalle importante sobre el límite de generación de imágenes en ChatGPT. Cuando alcanzas el tope, aparecen dos caminos:

Pagar la versión de paga para seguir generando sin restricciones.
Esperar al horario que la propia plataforma indica para reanudar.

Para descargar cada imagen, basta con poner el mouse encima y hacer clic en la flecha de la esquina superior derecha.

¿Cómo subo las imágenes a Internet y obtengo un enlace público?

Una imagen guardada en tu computador no se puede mostrar en una web hasta que esté alojada en un servidor accesible. Por eso necesitas un servicio de hosting de imágenes que te entregue una URL pública.

¿Por qué Imgur sirve para alojar imágenes gratis?

Imgur es la primera opción que sugiere ChatGPT al preguntar ¿dónde puedo subir mis imágenes en Internet de forma gratuita y obtener un enlace para cada una? [03:20]. Vas a imgur.com, das clic en nuevo post y arrastras las imágenes.

¿Cómo convierto imágenes .webp a JPG?

Aquí aparece un obstáculo común: ChatGPT descarga las imágenes en formato .webp, que muchos servicios no aceptan [04:10]. La solución es convertirlas a JPG o PNG.

Los pasos concretos son:

Preguntar a ChatGPT por un conversor gratuito en línea.
Subir los archivos .webp al conversor.
Seleccionar JPG como formato de salida.
Descargar las imágenes convertidas.
Volver a Imgur y arrastrarlas ya en JPG.

Una vez subidas, haces clic derecho sobre la imagen en Imgur y eliges copiar dirección de la imagen. Esa es la URL pública que cualquier navegador puede abrir.

¿Cómo cambio las imágenes en el código HTML de mi web?

Con los enlaces listos, toca modificar el código. La pregunta a ChatGPT es directa: ¿cómo puedo modificar los enlaces de las imágenes de mis productos en el código? [06:30].

La respuesta apunta a dos conceptos clave del HTML que vale la pena entender:

La etiqueta img es el elemento HTML que muestra una imagen en la página, y dentro lleva un atributo src que indica de dónde sacar el archivo.
La ruta relativa apunta a una imagen guardada en tu propio computador o proyecto, útil cuando trabajas en local.
La URL absoluta apunta a una imagen alojada en un servidor externo, como Imgur, y es la que usas cuando quieres que cualquier persona vea la imagen desde Internet.

En este caso usamos URL absoluta porque las imágenes ya están públicas.

¿Qué es el atributo src en HTML? Es la parte de la etiqueta img que contiene el enlace de la imagen. Si cambias el valor entre comillas, cambias la imagen que se muestra en la web.

¿Qué pasos sigo para reemplazar el enlace en el código?

El proceso es mecánico pero hay que cuidar la sintaxis:

Copia la URL pública desde Imgur.
Abre tu archivo de código y localiza la etiqueta img del producto.
Borra el enlace anterior dentro del atributo src, dejando intactas las comillas.
Pega la nueva URL entre las comillas.
Repite el proceso para cada imagen, como la camiseta con nebulosa y el pantalón con estrella fugaz.
Guarda el archivo y recarga el navegador.

Las comillas son innegociables: si las borras, el HTML deja de reconocer el atributo y la imagen no carga.

Cuando recargas, tu página web aparece con los productos reales y la tienda empieza a verse como un proyecto terminado. Muéstrame en los comentarios cómo va tu página web con las nuevas imágenes y, si te animas, cambia también la descripción de los productos para verla completa.