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
     }
}