search

sergiop / react-giphy-searchbox

Responsive and customizable search and select for Giphy's GIFs and Stickers.
https://sergiop.github.io/react-giphy-searchbox/
MIT License
48 stars 19 forks source link

sped up / blurry gif? #37

Closed caleb15 closed 3 years ago

caleb15 commented 4 years ago

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:

first

It is a downgraded version of the actual gif:

second

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?

sergiop commented 4 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"
      }
    },
caleb15 commented 4 years ago

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 :)

caleb15 commented 4 years ago

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