Image

We will explain how to upload, optimize, and crop images for your website using the ImageComponent. By doing this, you can achieve faster loading times and enhance the user experience. Use the following syntax to upload and display an image:

{!! $page->image('picture')->getPicture() !!}

The getPicture() method automatically optimizes the image for various screen sizes. Add styling with style and class attributes:

{!! $page->image('picture')->getPicture(class: 'rounded-lg', style: 'width: 100%') !!}

For accessibility and SEO, include an alt attribute:

{!! $page->image('picture')->getPicture(alt: 'A beautiful picture') !!}

You can use another component's value for the alt attribute:

{{ $page->text('title') }}
{!! $page->image('picture')->getPicture(alt: $page->title) !!}

To enhance performance and achieve higher Google PageSpeed scores, it is essential to avoid loading large images. The ImageComponent is designed to display the optimal image at the right moment. When an image is published, it is resized into multiple dimensions. This resizing process utilizes the Catmull-Rom encoder, which guarantees high-quality images that closely resemble the original while minimizing quality loss.

When you specify ->widthPx(1200), we save up to six different sizes whenever possible.

• Original: the uploaded size.
• 2400 px (big2x): for Retina displays.
• 1200 px (standard): optimized for desktops.
• 1280 px: for iPhones.
• 640 px (mobile): for smaller screens.
• 640 px (miniature): Used for preview purposes.

{!! $page->image('picture')->widthPx(250)->getPicture() !!}

To achieve better designs, allow users to crop images. Centering automatically might cut important areas of an image. The ->ratio() method lets users define the aspect ratio.

{!! $page->image('picture')->ratio(3, 4)->getPicture() !!}

In this example, if the with of the image is 300px, the height will be 400px.

You can also specify the height and width of the image. For instance, combining ->widthPx(1200) with ->ratio(1200, 800) will ensure the image is resized to 1200px by 800px.

{!! $page->image('picture')->widthPx(1200)->ratio(1200, 800)->getPicture() !!}

The ->get() method returns an array with all relevant image data.

{{ json_encode($page->image('picture')->widthPx(1200)->ratio(1200, 800)->get()) }}

This returns:

[
  'original' => '/model/homepage/hero/image/table_5000.original.jpeg',
  'crop' => ['x' => 0, 'y' => 0, 'width' => 1200, 'height' => 800],
  'sources' => [
      [
          'name' => '/model/homepage/hero/image/table_5000.jpeg',
          'size' => ['height' => 1200, 'width' => 800],
          'media' => 'standard',
      ],
      // Other sources...
  ],
];