Shortcode para GoHugo: optimización de imágenes

Cuando estaba migrando mi sitio de WordPress a GoHugo quería aprovechar todo el trabajo que implicaba la migración para asegurarme también de optimizar las imágenes. Lo que necesitaba era: Reducir el tamaño de la imagen original conservando la calidad Cargar las imágenes de manera perezosa con el atributo loading en lazy de HTML Ofrecer imágenes en distintos tamaños para cada pantalla. Es decir, ofrecer una imagen más pequeña para móviles y una más grande para dispositivos de escritorio Usar picture y source De este modo mi blog iba a cargar más rápido. Al final terminé creando un shortcode que me permite incrustar imágenes cumpliendo con todas las características que acabo de mencionar. ...

agosto 5, 2025 · 5 min · 1059 palabras · Parzibyte

PHP: incrustar imagen en base64

El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP: cómo mostrar una imagen (existente en el sistema de archivos) codificada en base64 como el atributo src de un elemento img generado con PHP. Veremos cómo leer y codificar la imagen así como colocar el tipo mime correcto. ...

mayo 1, 2024 · 2 min · 356 palabras · Parzibyte

Rotar imagen en navegador web con JavaScript y canvas

En este artículo te voy a enseñar a rotar una imagen con HTML y JavaScript a través de canvas, de manera que podrás girar una imagen los grados que tú quieras, es decir, rotarla 90, 180, 270 o cualquier cantidad. Veremos cómo cargar una imagen, pintarla en un canvas, agregarle rotación y después hacer cosas como descargar esa imagen o enviarla al backend que puede ser con Node, C#, PHP, etcétera. ...

marzo 6, 2023 · 5 min · 957 palabras · Parzibyte

Centrar imagen con CSS

En el post de hoy te mostraré algo muy simple: cómo centrar una imagen HTML usando CSS, sin frameworks.alinear una imagen al centro Si bien es algo sencillo, en ocasiones olvidamos cómo hacerlo. Así que en este artículo te mostraré el estilo CSS para centrar un elemento img. ...

septiembre 1, 2021 · 1 min · 206 palabras · Parzibyte

Generar códigos QR con JavaScript

En este post de programación web te voy a mostrar cómo generar códigos QR desde JS o JavaScript para que puedas generar un QR desde la web. Vamos a usar una librería de terceros; verás que es muy simple crear códigos QR y tal vez esto te anime para crear tu propio generador. Te aviso que vamos a usar JavaScript puro, así que puedes portar este código para frameworks como Angular, React o Vue. ...

junio 27, 2021 · 4 min · 790 palabras · Parzibyte