Closed caleb15 closed 3 years ago
Hi @caleb15 as you can see here the module shows the fixed_width_downsampled
image from the images
object. In my opinion, this is the best format that combines loading speed, rendering performances, and image quality (and I also seem to remember reading something about this topic). And yes, it's not the best one in quality but is a compromise.
It's not a bad idea to add a prop that customizes this setting, but if a user uses this without knowing what he’s doing, he could drastically compromise the performances.
Anyway, feel free to open a PR to improve this. 😉
For your records, this is the complete images
object:
"images": {
"original": {
"height": "283",
"width": "310",
"size": "5959",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy.gif",
"mp4_size": "16710",
"mp4": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy.mp4?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy.mp4",
"webp_size": "8446",
"webp": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy.webp?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy.webp",
"frames": "3",
"hash": "720702b1077d015b77d327da67f353ae"
},
"downsized": {
"height": "283",
"width": "310",
"size": "5959",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy.gif"
},
"downsized_large": {
"height": "283",
"width": "310",
"size": "5959",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy.gif"
},
"downsized_medium": {
"height": "283",
"width": "310",
"size": "5959",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy.gif"
},
"downsized_small": {
"height": "282",
"width": "310",
"mp4_size": "11286",
"mp4": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy-downsized-small.mp4?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy-downsized-small.mp4"
},
"downsized_still": {
"height": "283",
"width": "310",
"size": "5959",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy_s.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy_s.gif"
},
"fixed_height": {
"height": "200",
"width": "219",
"size": "3923",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/200.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=200.gif",
"mp4_size": "7137",
"mp4": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/200.mp4?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=200.mp4",
"webp_size": "18468",
"webp": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/200.webp?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=200.webp"
},
"fixed_height_downsampled": {
"height": "200",
"width": "219",
"size": "3923",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/200_d.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=200_d.gif",
"webp_size": "5454",
"webp": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/200_d.webp?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=200_d.webp"
},
"fixed_height_small": {
"height": "100",
"width": "110",
"size": "1785",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/100.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=100.gif",
"mp4_size": "3517",
"mp4": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/100.mp4?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=100.mp4",
"webp_size": "7880",
"webp": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/100.webp?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=100.webp"
},
"fixed_height_small_still": {
"height": "100",
"width": "110",
"size": "685",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/100_s.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=100_s.gif"
},
"fixed_height_still": {
"height": "200",
"width": "219",
"size": "1531",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/200_s.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=200_s.gif"
},
"fixed_width": {
"height": "183",
"width": "200",
"size": "3551",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/200w.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=200w.gif",
"mp4_size": "6582",
"mp4": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/200w.mp4?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=200w.mp4",
"webp_size": "16578",
"webp": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/200w.webp?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=200w.webp"
},
"fixed_width_downsampled": {
"height": "183",
"width": "200",
"size": "3551",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/200w_d.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=200w_d.gif",
"webp_size": "5012",
"webp": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/200w_d.webp?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=200w_d.webp"
},
"fixed_width_small": {
"height": "92",
"width": "100",
"size": "1639",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/100w.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=100w.gif",
"mp4_size": "3341",
"mp4": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/100w.mp4?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=100w.mp4",
"webp_size": "6976",
"webp": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/100w.webp?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=100w.webp"
},
"fixed_width_small_still": {
"height": "92",
"width": "100",
"size": "622",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/100w_s.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=100w_s.gif"
},
"fixed_width_still": {
"height": "183",
"width": "200",
"size": "1381",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/200w_s.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=200w_s.gif"
},
"looping": {
"mp4_size": "397885",
"mp4": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy-loop.mp4?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy-loop.mp4"
},
"original_still": {
"height": "283",
"width": "310",
"size": "2706",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy_s.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy_s.gif"
},
"original_mp4": {
"height": "438",
"width": "480",
"mp4_size": "16710",
"mp4": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy.mp4?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy.mp4"
},
"preview": {
"height": "282",
"width": "310",
"mp4_size": "11286",
"mp4": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy-preview.mp4?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy-preview.mp4"
},
"preview_gif": {
"height": "283",
"width": "310",
"size": "7303",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy-preview.gif?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy-preview.gif"
},
"preview_webp": {
"height": "283",
"width": "310",
"size": "8446",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/giphy-preview.webp?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=giphy-preview.webp"
},
"480w_still": {
"height": "438",
"width": "480",
"size": "5959",
"url": "https://media1.giphy.com/media/QTykRTKdn38D07zMCa/480w_s.jpg?cid=e8452e68af7mokxvrbcotxmmkb3bupvjio6lqw60sk7w8ble&rid=480w_s.jpg"
}
},
Thanks for the good explanation! I would suggest adding in a prop to customize the setting. That way high-quality/slower-loading gifs could be used for desktop users and lower quality/faster-loading for mobile users. Best of both worlds :)
Actually even better method with network API: https://stackoverflow.com/a/47511842
Sadly not yet supported in Firefox: https://caniuse.com/netinfo
psuedocode:
if network API exists:
use_high_quality = network_speed > 10 MBPS or whatever just throwing out a arbitrary number
else:
use_high_quality = !is_mobile
# pass in use_high_quality to react-giphy-searchbox
I tried the codesandbox and noticed that the gifs displayed are blurry and sped up from the normal speed.
For example, search for "high five" and look at the liz lemon gif:
It is a downgraded version of the actual gif:
Is there some setting that would need to be set to use the higher-quality version? Or maybe the lower quality version is just because of the API key used?