Why is the images I queried is so tiny

[gilbertlucas46]

Please help The base64 images I get is so tiny

Below is my Query

query Services {
    allMarkdownRemark(filter: {frontmatter: {categories: {eq: "services"}}}) {
            edges {
                node {
                    frontmatter {
                        categories
                        title
                         thumbnail {
                           childImageSharp {
                             id
                            fluid(maxWidth:3000){
                              base64
                            }
                           }
                         }
                    }
                }
            }
        }
    }

Here's the results

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "categories": "services",
              "title": "Frontend Development",
              "thumbnail": {
                "childImageSharp": {
                  "id": "bcf3d86c-fb81-504e-91df-c31ed9e92fb8",
                  "fluid": {
                    "base64": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAEDBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAdWBLAP/xAAWEAADAAAAAAAAAAAAAAAAAAACEDH/2gAIAQEAAQUCKL//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAQ/9oACAEBAAY/An//xAAZEAEAAgMAAAAAAAAAAAAAAAABESEAEGH/2gAIAQEAAT8h6Rg2Ws6//9oADAMBAAIAAwAAABCH7//EABcRAQADAAAAAAAAAAAAAAAAAAEQESH/2gAIAQMBAT8QHaj/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAZEAEBAQADAAAAAAAAAAAAAAABESEAEDH/2gAIAQEAAT8QuItGnFB1vQgdf//Z"
                  }
                }
              }
            }
          }
        },
        {
          "node": {
            "frontmatter": {
              "categories": "services",
              "title": "Fullstack Developement",
              "thumbnail": {
                "childImageSharp": {
                  "id": "462b078d-0203-52df-8e69-15c12acba463",
                  "fluid": {
                    "base64": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECBf/EABYBAQEBAAAAAAAAAAAAAAAAAAMCBP/aAAwDAQACEAMQAAAB0oMq2B1//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABBQJ//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFhEAAwAAAAAAAAAAAAAAAAAAARAx/9oACAECAQE/ARF//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAFhAAAwAAAAAAAAAAAAAAAAAAARAh/9oACAEBAAE/ITH/AP/aAAwDAQACAAMAAAAQd/8A/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQEQ/9oACAEDAQE/EKuf/8QAFhEAAwAAAAAAAAAAAAAAAAAAEBFB/9oACAECAQE/EFkf/8QAGRABAAMBAQAAAAAAAAAAAAAAAQARITFB/9oACAEBAAE/EGDVpzIrdXZ4mQ525//Z"
                  }
                }
              }
            }
          }
        },
        {
          "node": {
            "frontmatter": {
              "categories": "services",
              "title": "Logo Design",
              "thumbnail": {
                "childImageSharp": {
                  "id": "0b7666bb-b689-5f3f-aa71-83bc5f87e8f4",
                  "fluid": {
                    "base64": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAIEBf/EABQBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAdCAlED/AP/EABoQAAICAwAAAAAAAAAAAAAAAAECAAMREiH/2gAIAQEAAQUCDDNvV2sE/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8BZ//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAECAQE/ASf/xAAbEAABBAMAAAAAAAAAAAAAAAAAAQIRITEyQf/aAAgBAQAGPwKOlZNGqf/EABoQAAICAwAAAAAAAAAAAAAAAAABETFRcdH/2gAIAQEAAT8hTi6FxEqCrsQf/9oADAMBAAIAAwAAABCHz//EABYRAQEBAAAAAAAAAAAAAAAAABEAAf/aAAgBAwEBPxDATf/EABcRAQADAAAAAAAAAAAAAAAAAAABETH/2gAIAQIBAT8QlbH/xAAZEAEAAwEBAAAAAAAAAAAAAAABABEhUUH/2gAIAQEAAT8Qc6ktXVFfAlXHICvX9i2f/9k="
                  }
                }
              }
            }
          }
        },
        {
          "node": {
            "frontmatter": {
              "categories": "services",
              "title": "Print Design",
              "thumbnail": {
                "childImageSharp": {
                  "id": "afbc817d-7110-5da9-b888-da15289036bd",
                  "fluid": {
                    "base64": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUC/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAaOhJ4P/xAAZEAACAwEAAAAAAAAAAAAAAAABAgARITL/2gAIAQEAAQUC2IbU9f/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABoQAAICAwAAAAAAAAAAAAAAAAABIVERcYH/2gAIAQEABj8CjPGVNj2f/8QAGxAAAgEFAAAAAAAAAAAAAAAAAAERITFRYaH/2gAIAQEAAT8hdkGzQGNidg6R/9oADAMBAAIAAwAAABD33//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQEAAgMBAAAAAAAAAAAAAAERAFEhQWGB/9oACAEBAAE/EEky1RwTbjq0FC19ubl7Puf/2Q=="
                  }
                }
              }
            }
          }
        },
        {
          "node": {
            "frontmatter": {
              "categories": "services",
              "title": "Web Design",
              "thumbnail": {
                "childImageSharp": {
                  "id": "fc80f4ce-5286-5fb0-9a25-554d35a3edef",
                  "fluid": {
                    "base64": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAEDBP/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHZJFoP/8QAGRABAQADAQAAAAAAAAAAAAAAAgEDERIT/9oACAEBAAEFAvba7Rhymz//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAADAQEBAAAAAAAAAAAAAAAAAREhMVH/2gAIAQEABj8Ci56a6zXGf//EABgQAQADAQAAAAAAAAAAAAAAAAEAEVEh/9oACAEBAAE/IUU3OoXcISlhc//aAAwDAQACAAMAAAAQ/wD/AP/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAQEAAwADAAAAAAAAAAAAAAERACExQVFh/9oACAEBAAE/EIlbLErNT5zGYpiCh42d94mfd3TP/9k="
                  }
                }
              }
            }
          }
        }
      ]
    }
  }
}

this is my gatsby-config.js

{
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/img`,
        name: 'media',
      },
    },
{

   resolve: `gatsby-transformer-remark`,
      options: {
        // CommonMark mode (default: true)
        commonmark: true,
        // Footnotes mode (default: true)
        footnotes: true,
        // Pedantic mode (default: true)
        pedantic: true,
        // GitHub Flavored Markdown mode (default: true)
        gfm: true,
        // Plugins configs
        plugins: [
          // gatsby-remark-relative-images must
          // go before gatsby-remark-images
          {
            resolve: `gatsby-remark-relative-images`,
            options: {
              name: "media" // Must match the source name ^
            }
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590,
            },
          },
        ],
      },
    },

[gilbertlucas46]

okay I just changed my query to fixed width & height and it worked!

childImageSharp {
    fixed(width: 680, height: 286) {
          ...GatsbyImageSharpFixed_withWebp_tracedSVG
     }
}