g-image not crop

[danieldocki]

Description

I do not know why but it seems that g-image is not working properly, it does not put the image at the optimal size and with that it is downloading an image with more than 4mb.

Environment

package.json

{
  "name": website-gridsome",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "dependencies": {
    "@gridsome/plugin-sitemap": "^0.1.1",
    "@gridsome/source-filesystem": "^0.4.1",
    "@gridsome/transformer-remark": "^0.3.1",
    "gridsome": "^0.6.1",
    "gridsome-plugin-gtm": "^0.1.1",
    "gridsome-plugin-netlify-cms": "^1.0.6",
    "gridsome-plugin-remark-youtube": "^1.0.1",
    "marked": "^0.6.2",
    "netlify-cms": "^2.9.1",
    "vue2-touch-events": "^2.0.0"
  },
  "devDependencies": {
    "eslint": "^5.16.0",
    "eslint-plugin-gridsome": "^1.1.1",
    "eslint-plugin-vue": "^5.2.2",
    "vue-eslint-parser": "^6.0.4",
    "vue-svg-loader": "^0.12.0"
  }
}

<template>
  <Layout>
    <section class="container">
      <article
        v-for="block in $page.expertise.blocks"
        class="article -is-block"
      >
        <g-image
          :src="block.picture.imageUrl"
          :alt="block.picture.imageAlt"
          width="500"
          height="500"
          fit="cover"
          class="image"
        />

        <div class="about">
          <h2 class="title">
            {{ block.title }}
          </h2>
          <p class="description">
            {{ block.description }}
          </p>
        </div>
      </article>
    </section>
  </Layout>
</template>

<page-query>
query Page($path: String!) {
  expertise: expertise(path: $path) {
    title
    description
    blocks {
      title
      description
      picture {
        imageUrl(width: 500, quality: 80)
        imageAlt
      }
    }
    seo {
      title
      description
    }
  }
}
</page-query>

For Tooling issues:

• Node version: v10.8.0
• Platform: Mac

[hjvedvik]

What does your frontmatter section with the imageUrl field look like?

[danieldocki]

@hjvedvik

I think you want to see this.

---
title: Procedimentos restauradores
description: >-
  Os procedimentos...
blocks:
  - title: Restauração em cerâmica ou porcelana
    description: >-
      Muito utilizada.... 
    picture:
      imageAlt: Restauração em cerâmica ou porcelana
      imageUrl: /uploads/restauracao-em-ceramica-ou-porcelana.png
  - title: Restauração em resina composta em dentes anteriores
    description: >-
      Os dentes anteriores... 
    picture:
      imageAlt: resina-composta-dente-anterior
      imageUrl: /uploads/img_5582a.jpg
seo:
  title: 'Procedimentos restauradores '
  description: >-
    Os procedimentos...
---