Published 23 Oct, 2020 3 minutes of reading
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.
Optimizing an image with specific software
Alternatively, if you want to optimize an image without going through Photoshop, you can use tools like squoosh.app or TinyPNG.
Uploading images for web positioning (in Modyo)
Apart from optimizing an image for quality and filesize so that it does not affect the load time of a page or an app, we also need to take into account the name of the file, the alternative text that will appear in the "alt" tag that accompanies it, and, ideally, its description.
In Modyo these resources (assets or files) are managed in the Asset Manager, where the images are loaded and optimized ideally with a short but sufficiently descriptive name to be identified in both the platform and search engines such as Google. In the Asset Manager, we can define both the alternative text and a description.
How to measure page loading speed (or performance)
As a result of all the steps above, image loading should not affect the loading speed of the page, app, or digital product we are managing. To check page performance, we can use Lighthouse for Google Developers, as well as other extensions or tools
If you use Lighthouse, right click on the page, select Inspect, and in the bar that appears below or to the side of the screen, select Lighthouse. Then, choose the options you want to inspect, in either Desktop or Mobile, and click on Generate Report to obtain the scores of different metrics (Performance, Accessibility, Best Practices, SEO).
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.
Photo by Jason Leung at Unsplash
