Content Management Best Practices: Image loading and optimization for SEO and performance

This article is the first of our three-part series devoted to Content Management Best Practices. You can read the second article here and the third article here.

For people in charge of managing the content of any digital product (typically known as Content Managers), it is especially important that content loading or updating does not affect the page loading speed, that is, the page performance. It is also crucial to note that loading images correctly will have a positive impact on any searchable digital product's SEO.

At Modyo, we place great importance on keeping the loading speed of a page or application as low as possible, both when a product is delivered and during its administration over time. This is why we want to provide what we consider to be key recommendations to ensure that content management best practices are understood by all. Incoporating these best practices as part of day-to-day content management will facilitate the management and performance of a site.

Adjust the image size

This step may seem simple, but correctly adjusting the size of an image based on its original dimesions and its placement on your site will greatly affect the quality of the outcome (neither pixelated nor unnecessarily large in filesize).

We can adjust image sizes in Photoshop by choosing Image > Image Size in the main menu, choose to measure by pixels in the drop-down menu, lock the aspect ratio, and then choose the correct size. For professionals that may not have access to Photoshop, you can also adjust image size in Paint if you use Windows, or in Photopea as an in-browser option.

Save a web-optimized version of the image

Once you have adjusted the image size, if you use Photoshop, you can save it optimized for web, which will allow you to reduce the weight of the images as much as possible without losing quality or reducing its size.

You can do this by selecting File > Export > Save for Web (legacy) from the main menu, and then ideally choosing the JPG format (PNG will always have a larger filesize), leaving the Optimized option checked, and choosing the Very High, High or Medium image quality of the drop-down list (losing no more than 70% of the image quality). At the bottom left, we can see the final filesize to know whether it's small enough for our website, which should usually no more than 100KB.