¿Que puede hacer el servicio?
- Redimensionar imágenes
- Cortar imágenes
- Disminuir la calidad de las imágenes
- Convierte las imágenes a JPG para que sean aún mas livianas (se le puede especificar que no las convierta para mantener la transparencia de una PNG)
- Pasar la imagen en escala de grises
- Mantiene la imagen en Cache y la misma se carga desde un CDN (Solo la convierte una vez).
Como usar el servicio
El Servicio es muy fácil de usar, tan simple como editar un URL y luego poner el origen de la imagen, las siguientes son las parámetros del mismo:
- URL: https://webpixelapi.com/
- El ancho se define en la URL luego de: /w/ (cero para que se calcule proporcionalmente)
- La Altura se define en la URL luego de: /h/ (cero para que se calcule proporcionalmente)
- La Calidad se define en la URL luego de: /q/
- Si necesitamos mantener la transparencia de la imagen debemos poner un uno luego de: /png/
- Si necesitamos la imagen en colores se pone un 1 luego de /c/ en caso de necesitar la imagen en escala de grises debemos poner un 0.
- Y como último parámetro luego de /s/ debemos poner el URL original de la imagen son especificar el protocolo (sin
http://)
Por ejemplo en la siguiente imagen deberíamos cambiar lo que está marcado en rojo:
https://webpixelapi.com/w/100/h/100/q/60/png/0/c/0/s/programando.paginasweb.cr/wp-content/uploads/2018/03/example.jpg
Utilizando esa URL una imagen que pesa 176 KB y se ve así:
Quedaría así: 100 pixeles de ancho, 100 pixeles de alto, calidad de 60%, sin mantener el formato PNG (transparencia), en escala de grises.
Pesando 2.3 KB (2.9 KB con color)
Nota: Se puede poner cero en la altura o en el ancho para que se calculen de manera proporcional a la imagen, por ejemplo en esta imagen solo se especifica que debe tener 500 pixeles de ancho y el alto se calculará de manera proporcional: https://webpixelapi.com/w/250/h/0/q/60/png/0/c/1/s/programando.paginasweb.cr/wp-content/uploads/2018/03/example.jpg
¿Cuanto cuesta el servicio?
El servicio es gratis siempre y cuando se utilice para imágenes originales de menos de 1200 pixeles de ancho y alto y no hacer mas de 100 conversiones mensuales (solo la primera llamada es una conversión las demás se obtienen del caché)
Las imágenes convertidas a mas de 400px de ancho y más de 50% de calidad van a tener una marca de agua de manera predeterminada.
Si quieres el servicio premium que tiene una marca de agua personalizada y no hay restricciones de tamaños contáctenos al siguiente correo: [email protected] o en la siguiente página: https://paginasweb.cr/contactenos/
Porqué el usar el servicio
En los últimos años el uso de los dispositivos móviles y sus limitaciones han sido un tema muy importante en la programación web, ya que al tener una pantalla de menor tamaño, y usualmente una menor velocidad de Internet que las computadoras los programadores necesitamos proveer contenido diferente para estos dispositivos.
Utilizando el diseño responsivo específicamente media queries se ha logrado solventar el problema de las pantallas de menor tamaño sin tener que entregar diferente contenido a estos dispositivos como se usaba antes lo cual implicaba un mantenimiento de dos sitios y usualmente una perdida de compatibilidad con dispositivos de tamaño intermedio como tabletas.
En cuando a la limitación en velocidades de internet móvil las soluciones son un poco mas complejas, como todos sabemos lo que mas consume internet de nuestros lectores es el contenido multimedia y en algunos casos librerías Javascript muy pesadas o sin configurar para mantener una copa en el navegador en vez de estar descargándolas siempre que un usuario entra a una página.
En cuanto a videos hay plataformas como Youtube ya que ellos se encargan de cargar un video con la calidad acorde a la resolución del dispositivo y la velocidad de internet del usuario e incluso podrías monetizar tus videos, en el caso de que quieras monetizar tus videos pero no con publicidad de Google hay soluciones de pago como JW Player en las que también entregan contenido tomando en cuenta la velocidad y resolución del usuario y puedes administrar la publicidad como desees.
En cuanto a las imágenes varios CMS’s como WordPress cuando subes una imagen automáticamente crean varias versiones de esa imagen para usarla en diferentes secciones de un sitio pero no utilizan imágenes pequeñas cuando el sitio se ve desde un dispositivo móvil, entonces nuestros usuarios tienen que descargar las imágenes grandes de buena calidad creadas para una computadoras en un dispositivo móvil en el cual la imagen no se va a detallar tan bien, dado a esto Paginas Web CR pone a disposición un servicio para que los usuarios siempre puedan tener la mejor imagen según el tamaño de su dispositivo, esta tecnología la usa usa actualmente el periódico digital crhoy.com (Una de las páginas con más visitas en Costa Rica desde Costa Rica)
Web Pixel API de Páginas Web CR es una excelente alternativa a TimThumb, segura y con soporte. Con respecto al deprecado librería TimThumb el cual ha creado vulnerabilidades en múltiples sitios de WordPress en los últimos años.
Características del servicio:
Redimensión de imágenes: Necesitas una imagen de 400×400 para que tu home se vea perfecto pero los que administran el contenido siguen subiendo imágenes de todos los tamaños, pues ahora no te vas a tener que preocupar por que las imágenes se vean estiradas porque el servicio al redimensionar una imagen rectangular(600×500) a una cuadrada(400×400) lo que hace es que ajustar la imagen al tamaño requerido (480×400) centra la imagen y corta el espacio sobrante (40px a cada lado en este caso).
Cache / Consumo de ancho de banda de tu hosting: Un aspecto muy importante de este servicio es que trabaja con un chache en medio del API y tus clientes entonces la conversión de la imagen no se hace cada vez que un usuario accede a tu sitio entonces ni se tienen q convertir cada vez por lo tanto tu servidor no va a tener altos consumos de datos y tus usuarios siempre van a tener la imagen en el tamaño perfecto sin esperar conversiones tomándola desde el cache
Velocidad de carga: de manera predeterminada las imágenes se cargan en la calidad estándar de la web que es bastante liviana por lo que no te deberas de preocupar en estar cortando tus imágenes o cambiándoles la calidad para la web.