¿Cómo usar las imagenes "BPG" en mi página web?

[jheberg]

Hola, por ahí me topé con esta foto comparativa de BPG vs JPG


Sucede que me interesa usar ese formato en mi página para volverlo más liviano, pero el navegador no reconoce ese formato, esto lleva desde el 2013 y no entiendo porque no lo hace, supongo que algún detalle se me escapa y quisiera que me guíen en eso.

Gracias.

[engel lex]

ningún navegador soporta este formato actualmente, probablemente sea más ligero que jpg con mejor calidad pero a su vez posiblemente requiera más ram y procesamiento para decodificalo por lo que no ha sido tomado en cuenta...

aparentemente hay proyectos de interpretes implementados en jscript, pero eso haría que tu pagina consumiera demasiado cpu al cargarse (y por consecuencia sería muy lenta), recuerda que en web no solo es importante el peso en KB, sino tambien el tiempo de render

[jheberg]

requiera más ram y procesamiento para decodificalo por lo que no ha sido tomado en cuenta...

Eso se soluciona con un mejor hardware... así que no problem, al menos no en mi caso.

aparentemente hay proyectos de interpretes implementados en jscript, pero eso haría que tu pagina consumiera demasiado cpu al cargarse (y por consecuencia sería muy lenta), recuerda que en web no solo es importante el peso en KB, sino tambien el tiempo de render

La lentitud por el render será del lado del servidor o del lado del cliente?


Si no se puede con BPG conoces otros formatos parecidos pero que los navegadores lo soporten?
webP ya la conozco así que dale con otros formatos.

[engel lex]

Eso se soluciona con un mejor hardware... así que no problem, al menos no en mi caso.

es una pagina web, no le puedes exígir al usuario mejor harware a menos que sea para ti personal

La lentitud por el render será del lado del servidor o del lado del cliente?

del lado del cliente, el servidor envía todos los datos que tenga y le da igual... el renderizado con la conversión de esos datos a cosas visibles...

webP ya la conozco así que dale con otros formatos

creo que solo lo soportan opera y chrome, allí no estoy muy seguro

[jheberg]

creo que solo lo soportan opera y chrome, allí no estoy muy seguro

Webp da el problema de que no es soportado por las aplicaciones nativas de windows, peor BPG, entonces, se me ocurría la idea de que si el usuario sube una foto en formato JPG, el servidor lo convierte en Webp para colocarlo en la página, y cuando el user quiera bajar la imagen el servidor lo convierte a la imagen original o en vez de eso tiene dos carpetas una con los Webp y otra con los JPG así cuando el user le de a Download se baja la imagen de la carpeta JPG.

Mi pregunta es, se puede hacer eso? cuáles serían los inconvenientes? aparte del almacenamiento claro está.

[engel lex]

el lio de eso, es que si el usuario guarda la imagen, se guardará el formato mostrado, tienes que colocar a parte un botón de descarga, por otro lado, que no todos los navegadores serán compatibles, chrome tiene casi 60% del mercado pero el otro 40% también es importante y no podrá ver la imagen...

tienes que hacer pruebas de rendimiento y tiempo de carga

[jheberg]

el lio de eso, es que si el usuario guarda la imagen, se guardará el formato mostrado, tienes que colocar a parte un botón de descarga, por otro lado, que no todos los navegadores serán compatibles, chrome tiene casi 60% del mercado pero el otro 40% también es importante y no podrá ver la imagen...

tienes que hacer pruebas de rendimiento y tiempo de carga

Con lo del botón tienes razón, se vería feo, pero Firefox si que aguanta el Webp con este formato no hay problema de navegador sino de visualización fuera del navegador.

Bueno, supongo que eso es todo, gracias.

[3n31ch]

Si es por el botón podrías hacer con javascript que al hacer click derecho sobre la imagen se te desplegara un menú creado por ti con el texto "guardar imagen como..." o algo así.

Por otro lado... eso solo ayudaría en tu sitio. No con buscadores como google.

------------ EDITO ------------------

Si no te interesa cuanto consume el usuario de internet para ver las imagenes, (y solo quieres que cargue rapida la pagina). Puedes optar por cargar las imagenes en JPG (de mediana calidad) y luego con javascript haces que una vez el sitio ya este cargado (.onload() o con jquery $(function(){}); ) cargue por medio de ajax la imagen PNG (alta calidad) y la ponga por arriba

[WHK]

Definitivamente hoy en dia no hay ninguna manera nativa de cargar una imagen bpg en ningún tipo de navegador WEB.

Desde mozilla dicen que probablemente no se haya incorporado por problemas con la licencia de uso: https://bugzilla.mozilla.org/show_bug.cgi?id=1111277

Acá hay una tabla interesante sobre los diferentes tipos de compresiones incluyengo bpg: https://docs.google.com/spreadsheets/d/1LxY78fbm47VmrYGTXkBXXitGjhGl32NsuHPH2QXufgA/edit#gid=751305882

Desde Google Chrome dicen que se debe a que aun ni si quiera ha sido estandarizado por ninguna entidad, ni si quiera ha sido revisada por ISO, por lo cual chrome no puede adoptar una tecnología no estándar (véase caso visual basic script): https://bugs.chromium.org/p/chromium/issues/detail?id=444452

Asi que en conclusion veo que las diferentes entidades que manejan la creación de los diferentes navegadores web ya se han planteado hacer uso de esa tecnología pero han topado en trabas que dependen netamente del creador de bpg ya sea por temas de licencia como de estandarización. Mientras que no se solucione eso se ve dificil que sea adoptado al corto plazo, pero si se ve un alto interés. No dudo que en uno o dos años más terminemos utilizando ese formato.

Yo hoy en día utilizo png y jpg dependiendo del caso, hay imágenes como diagramas que son infinitamente mas livianos en png que en jpg, no así una fotografía, por lo general prefiero más calidad que velocidad, prefiero tener un jpg grande a 90% que pese relativamente harto a tener de portada en una web un jpg de 40% de calidad ya que muchas veces toca vender imagen en cuanto a la publicidad. Cuando hago diseños intento utilizar la menor cantidad de assets posibles, de hecho  por eso utilizo fonts awesome en ves de imágenes para crear los iconos vectorizados, bootstrap y uno que otro toque con css y javascript, de hecho los fondos con lineas y degrades los hago en css sin imagenes apelando al uso de html5.

[jheberg]

Si es por el botón podrías hacer con javascript que al hacer click derecho sobre la imagen se te desplegara un menú creado por ti con el texto "guardar imagen como..." o algo así.

Por otro lado... eso solo ayudaría en tu sitio. No con buscadores como google.

Me encantó esta idea, es muy buena, y si, solo es para el sitio que es lo que me interesa no tanto para el buscador aunque ya veo que eso me dará problemas con el SEO, que ver...

Si no te interesa cuanto consume el usuario de internet para ver las imagenes, (y solo quieres que cargue rapida la pagina). Puedes optar por cargar las imagenes en JPG (de mediana calidad) y luego con javascript haces que una vez el sitio ya este cargado (.onload() o con jquery $(function(){}); ) cargue por medio de ajax la imagen PNG (alta calidad) y la ponga por arriba

Me interesa que el internet lento pueda manejarse bien en mi web con las imágenes y no tanto que cargue rápido la fachada de la página, lo que tú me propones no cumple con esa idea.