Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

sped up / blurry gif? #37

Closed
caleb15 opened this issue Oct 13, 2020 · 3 comments · Fixed by #39
Closed

sped up / blurry gif? #37

caleb15 opened this issue Oct 13, 2020 · 3 comments · Fixed by #39
Labels
enhancement New feature or request

Comments

@caleb15
Copy link

caleb15 commented Oct 13, 2020

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
Copy link
Owner

sergiop commented Oct 14, 2020 •
edited

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
Copy link
Author

caleb15 commented Oct 14, 2020

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
Copy link
Author

caleb15 commented Oct 14, 2020 •
edited

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

@sergiop sergiop mentioned this issue Oct 15, 2020
Merged
@sergiop sergiop added the enhancement New feature or request label Oct 22, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add management for image rendition. sergiop/react-giphy-searchbox
2 participants
@sergiop @caleb15