Images

Images play a crucial role in any website, as they not only capture users attention but also aid in conveying information and creating an appealing and professional appearance. By utilizing appropriate illustrations and photos, you can significantly enhance communication with visitors and improve their overall experience with your site.

Appropriate image management is essential to ensure convenience, fast development, and high performance. By efficiently handling images, you can optimize their loading times, maintain the quality of visual content, and minimize the overall impact on your site's performance.

Handling images is one of the most significant issues we had to face while integrating Gatsby and WordPress.

Images in Wordpress

WordPress, as a content management system, allows users to easily add images and other multimedia files to their website. After uploading images to the server, WordPress processes these files in the following way:

File format recognition - WordPress recognizes the image file format based on its extension, such as .jpg, .png, .gif, etc.
Creating thumbnail versions - WordPress automatically creates several thumbnail versions of the image for each added file. These thumbnails are used in various places on the website, such as on the list of posts or in galleries.
Extracting metadata - WordPress retrieves data stored in the image file, such as name, size, creation date, author, etc.
Assigning alt and title attributes - WordPress automatically assigns values for the "alt" and "title" attributes for each image, which helps in indexing images by search engines and ensures accessibility for people using screen readers.
Saving the file on the server - WordPress saves the image file on the server and creates a record in the database indicating the file location and its properties.
Sharing the image - After processing the image file, WordPress shares it in a form ready for use on the website, for example, by inserting it into the content of a post or page, or in galleries.

Images in Gatsby

As a static site generator, Gatsby takes care of image processing to optimize them and display them in the most browser- and user-friendly way. It offers tools, such as gatsby-image, which enable the creation of rich user experiences while maintaining the website's performance. As a result, visually appealing and engaging content can be generated without worrying about a decrease in site performance. Gatsby's actions are quite similar to those performed by WordPress; however, the main difference is that the processing takes place during each site build, which can be a time-consuming process.

Additionally, Gatsby provides a base component for handling images, which simplifies image management in the project. It is important to note that, by default, Gatsby mainly manages with images embedded locally in the code. To fully harness the potential of the tools offered by Gatsby, proper management of graphic resources on the site should be kept in page

More about default managing images you can find in Gatsby Documentation

SiteBox Image

The SiteBox Image component effectively integrates and links two systems, enabling efficient utilization of data from both systems without the need to repeat tasks performed by Wordpress.

The use of this component also provides a solution to the issue of long build times associated with image processing in Gatsby. This component utilizes image data prepared by Wordpress and sends it to Gatsby via GraphQL.

By using this solution, we can leverage optimized images and metadata that have been saved by Wordpress on the backend. This eliminates the need for image processing to take place during the site build process, which results in a significant reduction in build time. This is especially noticeable in larger projects that have more images, and on the frontend side, these images are handled similarly to any other data that is fetched via GraphQL.

GraphQL

As mentioned earlier, GraphQL sends all prepared data to instances ready to be utilized by the SiteBox Image component. There is more information than necessary, so only the required data should be used.

The following screenshot shows a portion of GraphQL that presents a set of data that will later be utilized. As seen, on the Wordpress side, there is a prepared srcSet that contains appropriately prepared images to display at different resolutions. ![SiteBox image GraphQL]./_images/statik-image_graphql.webp)

Gatsby

On the Gatsby side, the above data can be utilized using the <StatikImage /> component, which takes the required data as props, such as:

mediaItem
className
alt
imgStyle
data-object-fit
data-object-position

Of course, not all props are required. It is enough to just retrieve the mediaItem object to display the image correctly. For accessibility purposes, it is also necessary to add alternative text. Below is an example of using the component in the cover block.

<StatikImage
  mediaItem={block.mediaItem.node}
  className={clsx(
    "wp-block-cover__image-background",
    id ? `wp-image-${id}` : null,
  )}
  alt={alt}
  imgStyle={{ objectPosition }}
  data-object-fit="cover"
  data-object-position={objectPosition}
/>

Fonts SEO