[{"data":1,"prerenderedAt":342},["ShallowReactive",2],{"project-17210378":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":47,"post_text":49,"what":50,"said":68,"maker_in_thread":138,"shape":150,"grid":154,"attempts":304,"same_week":305,"maker_shows":48,"maker_hidden":334,"reader_version":335,"card":336},"17210378","react-ideal-image","An Almost Ideal React Image Component","title","Show HN: An Almost Ideal React Image Component","https:\u002F\u002Fgithub.com\u002Fstereobooster\u002Freact-ideal-image\u002Fblob\u002Fmaster\u002Fintroduction.md","github.com","stereobooster",1527887614,2018,106,59,409,2155,19,"notable","languages","react ui component","library",[24,25,26,27,28],"react","lazy loading","image placeholder","lqip","srcset","debated",-0.016,{"positive":32,"neutral":33,"mixed":34,"critical":35},8,4,2,13,27,{"idea":38,"execution":40,"performance":42,"design":45,"docs":46},{"positive":34,"critical":39},5,{"positive":41,"critical":41},0,{"positive":43,"critical":44},1,7,{"positive":41,"critical":43},{"positive":41,"critical":41},[48,48,39,41,48,41,41,41,43,41,48,43,39,39,39,41,43,43,43,41,48,48,41,43,43,43,41,41,43,43,43,48,41,43,39,41,41,41,39,41],3,null,{"problem":51,"audience":49,"pricing":49,"motivation":49,"time_to_build":49,"stack":58,"openness":67,"stage":67,"team_size":67},{"value":52,"source":53,"evidence":54},"Images load slowly and display poorly in web pages","inferred",[55],{"id":56,"by":11,"text":57},"17218532","Module size is ~7Kb. A detailed comparison is here https:\u002F\u002Fgithub.com\u002Fstereobooster\u002Freact-ideal-image\u002Fblob\u002Fmaster\u002Fother\u002Fidealimage-vs-img.md > The discussion on performance is…",[59],{"value":60,"source":61,"evidence":62},"React","commenter",[63],{"id":64,"by":65,"text":66},"17211801","meesterdude","I know this'll get downvoted, but this looks like an awful lot of work for... displaying images in a browser. As other HNers have said, it feels like the browser should be doing…","unknown",{"praise":69,"objections":81,"requests":109,"questions":124,"alternatives":129},[70],{"value":71,"source":61,"evidence":72},"Useful drop-in component with lazy loading and LQIP",[73,77],{"id":74,"by":75,"text":76},"17211492","ggregoire","Wow this is great. Right now I'm using a homemade \u003CImgWithPlaceholder src={src} \u002F> that displays a generic gray PNG on 404 or src null. I'll definitely try your lib as a…",{"id":78,"by":79,"text":80},"17212604","stanislavb","Seems very interesting. I'll give it a shot and try integrating it @ SaaSHub.com. Thanks for sharing and implementing it.",[82,97],{"value":83,"source":61,"evidence":84},"Lazy loading delays images and hurts experience on slow connections",[85,89,93],{"id":86,"by":87,"text":88},"17212652","chrismorgan","You know what’s an almost ideal image component? \u003Cimg>. Sure, browsers could be a little cleverer about prioritising image loading, and I wish everyone would prefer to slim their…",{"id":90,"by":91,"text":92},"17212488","jabn76","I hate lazy loading. - bit offtopic: Are there any good browser extensions that stop this behaviour?",{"id":94,"by":95,"text":96},"17214157","technion","Lazy loading clearly works because there are sites that manage it well. But when I hear \"lazy loading\" I think \"Medium\". The typical experience reading a medium blog is that I…",{"value":98,"source":61,"evidence":99},"Browsers should handle image loading natively",[100,104,108],{"id":101,"by":102,"text":103},"17210751","jbob2000","This is amazing, but I feel like there is something fundamentally lacking from \u003Cimg> if you have to do all this bullshit just to get an image to display. Why can’t the image and…",{"id":105,"by":106,"text":107},"17211465","TheRealPomax","That's kind of the browser's responsibility, really. The image element already covers what is required to instruct the user agent that there a) is an image resource and b) what…",{"id":86,"by":87,"text":88},[110,117],{"value":111,"source":61,"evidence":112},"Retina and styled-components support",[113],{"id":114,"by":115,"text":116},"17211871","samhunta","This is a great start. Some lightweight features that would make this even more ideal (for me) would be: - retina\u002F3x support - support for styled components extend feature (if…",{"value":118,"source":61,"evidence":119},"Optional SVG placeholders",[120],{"id":121,"by":122,"text":123},"17211406","matthberg","It would be cool to optionally integrate SVG placeholders, a-la: https:\u002F\u002Fmedium.com\u002F@jmperezperez\u002Fusing-svg-as-placeholders-more-image-loading-techniques-bed1b810ab2c (previously…",[125],{"value":126,"source":61,"evidence":127},"Why not just use the img element",[128],{"id":86,"by":87,"text":88},[130,134],{"value":131,"source":61,"evidence":132},"Native img element",[133],{"id":86,"by":87,"text":88},{"value":135,"source":61,"evidence":136},"Homemade placeholder image component",[137],{"id":74,"by":75,"text":76},{"comments":139,"answered":32,"key":140},11,[141,144,147],{"id":142,"text":143},"17212703","It supports SVG placeholders. SVGs need to be converted to data URIs, like `data:image\u002Fsvg+xml,%3csvg xmlns='...`, and it works the same as LQIP. You can use…",{"id":145,"text":146},"17212716","It supports retina\u002F3x. Provide big enough image and it will use it. It takes into account `devicePixelRatio` > maybe default max width of 100% on mobile? It is. > optional…",{"id":148,"text":149},"17210961","Read this https:\u002F\u002Fgithub.com\u002Fwhatwg\u002Fhtml\u002Fissues\u002F2806",{"commenters":151,"max_depth":32,"maker_replies":139,"first_comment_mins":152,"lifespan_hours":153},32,39,154,[155,157,161,162,164,165,169,171,173,175,177,180,182,186,188,191,194,197,199,200,203,205,208,210,211,215,218,220,222,225,228,232,235,238,240,242,245,247,250,252,254,256,258,261,263,264,269,273,275,276,280,282,286,289,292,294,297,300,302],[121,41,48,156,122,41],"project\u002Fneutral\u002Fidea",[158,41,48,159,160,41],"17211951","project\u002Fneutral\u002Fexecution","crooked-v",[142,41,41,159,11,43],[114,43,39,163,115,41],"project\u002Fpositive\u002Fnone",[145,43,41,159,11,43],[166,43,41,167,168,41],"17213374","commenter\u002Fneutral\u002Fnone","anonfunction",[101,34,48,170,102,41],"project\u002Fmixed\u002Fidea",[148,34,41,172,11,43],"other\u002Fneutral\u002Fnone",[174,34,41,172,102,41],"17211031",[105,34,41,176,106,41],"other\u002Fneutral\u002Fidea",[178,34,41,176,179,41],"17211530","zaroth",[181,34,41,176,106,41],"17215542",[183,34,43,184,185,41],"17213900","project\u002Fcritical\u002Fidea","lozenge",[187,34,41,167,106,41],"17215522",[189,34,48,156,190,41],"17211870","yesimahuman",[192,34,41,176,193,41],"17211965","tootie",[195,48,43,184,196,41],"17212883","TheAceOfHearts",[56,48,41,198,11,43],"project\u002Fneutral\u002Fperformance",[74,33,39,163,75,41],[201,39,39,163,202,41],"17210816","sunsetMurk",[78,204,39,163,79,41],6,[206,44,39,163,207,41],"17211795","dstroot",[209,44,41,172,11,43],"17212941",[86,32,43,184,87,41],[212,32,41,213,214,41],"17212759","commenter\u002Fneutral\u002Fidea","chacham15",[216,32,43,217,87,41],"17212855","project\u002Fcritical\u002Fperformance",[219,32,41,159,11,43],"17212771",[221,32,43,217,87,41],"17212811",[223,32,41,224,11,43],"17212904","maker\u002Fneutral\u002Fnone",[226,32,48,227,87,41],"17212958","project\u002Fmixed\u002Fexecution",[229,32,39,230,231,41],"17212806","project\u002Fpositive\u002Fidea","connorelsea",[233,32,43,234,87,41],"17212827","project\u002Fcritical\u002Fdesign",[236,32,41,237,11,43],"17212931","project\u002Fneutral\u002Fdesign",[90,239,43,184,91,41],9,[241,239,41,224,11,43],"17212578",[243,239,43,217,244,41],"17212838","ec109685",[246,239,41,167,231,41],"17212875",[248,239,43,217,249,41],"17212985","anothergoogler",[251,239,41,167,231,41],"17213025",[253,239,41,167,249,41],"17213061",[255,239,41,198,11,43],"17213054",[257,239,43,217,249,41],"17213066",[259,239,41,260,11,43],"17213167","project\u002Fpositive\u002Fperformance",[262,239,43,217,244,41],"17263170",[94,239,43,217,95,41],[265,266,48,267,268,41],"17211144",10,"project\u002Fneutral\u002Fdocs","faitswulff",[270,266,41,271,272,41],"17211246","commenter\u002Fneutral\u002Fdocs","JasonSage",[274,266,41,271,268,41],"17211309",[64,139,43,184,65,41],[277,139,41,278,279,41],"17211907","commenter\u002Fpositive\u002Fidea","alex504",[281,139,39,260,160,41],"17211989",[283,139,41,284,285,41],"17212116","commenter\u002Fpositive\u002Fnone","stevenhuang",[287,139,41,172,288,41],"17212457","unclebucknasty",[290,139,41,172,291,41],"17212661","shawn",[293,139,41,172,288,41],"17212802",[295,139,41,172,296,41],"17212912","mephitix",[298,139,39,230,299,41],"17212797","enobrev",[301,139,41,176,288,41],"17213035",[303,139,41,167,299,41],"17213157",[],[306,311,316,321,325,330],{"id":307,"name":308,"points":309,"category":310},"17226225","BitHubLab",318,"dev_tools",{"id":312,"name":313,"points":314,"category":315},"17242528","LogicEmu",210,"learning_science",{"id":317,"name":318,"points":319,"category":320},"17242136","Transity",190,"finance_crypto",{"id":322,"name":323,"points":324,"category":20},"17221221","Domain-tailored CRDTs for collaboration without server involvement",158,{"id":326,"name":327,"points":328,"category":329},"17227564","Podscripter",153,"ai",{"id":331,"name":332,"points":333,"category":315},"17246136","CircuitVerse",145,false,"v2",{"id":337,"name":5,"line":6,"ai":334,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":338,"top":18,"kw":339,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":340,"url":9,"mix":341,"praise":71,"objection":83,"sub":21},17210378,-0.02,[24,25,26,27,28],"3350300010315550111033011100111301500050",[32,33,34,35],1794036566529]