Legacy Knowledge Base
Published Jun. 30, 2025

OpenGraph image preview looks pixelated in page settings

Written By

Sorin Pop

How To articles are not official guidelines or officially supported documentation. They are community-contributed content and may not always reflect the latest updates to Liferay DXP. We welcome your feedback to improve How To articles!

While we make every effort to ensure this Knowledge Base is accurate, it may not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with any feedback or concerns.

Legacy Article

You are viewing an article from our legacy "FastTrack" publication program, made available for informational purposes. Articles in this program were published without a requirement for independent editing or verification and are provided"as is" without guarantee.

Before using any information from this article, independently verify its suitability for your situation and project.

Issue

We are facing an issue with OpenGraph and images. OpenGraph uses preview images instead of the full size images. Therefore, the image is too small for Twitter/X and Facebook to use it.

Upon further clarification and investigation, we could illustrate the issue with the following steps:

1. In your portal-ext, use this property:

dl.file.entry.preview.document.max.width=500

(default is 1000)

2. Start up the portal and then start adding a new widget page.
3. Click on the Open Graph tab on the left.
4. From your local PC, select the attached image file, which has a size of 1601x664 pixels.
5. Scroll down and look at the Preview section.
Result:

    • the image you see here appears quite pixelated 

    • you can also notice that its URL has this part at the end: &imagePreview=1 

    • if you right-click on this image and save it, you notice that it has a resolution of 300 pixels (and that is why it appears pixelated, because the original one is much bigger) - this resolution of 300 seems to correspond to the second resolution in Adaptive Media (Thumbnail). Customer’s thumbnail resolution is of 128 pixels, so for them the image appears even more pixelated.

    • if you leave out step 1 (so you don't reduce the value of that property), then the resulting image has a 1000 resolution (and as such, it is not that pixelated, it looks better) - this seems to correspond to the first AM resolution (Preview 1000x0)

Environment

  • 7.3, 7.4

Resolution

  • This is just a matter of proper configuration. The fact that you:
     
    • set dl.file.entry.preview.document.max.width to 500 
    • and at the same time, you have an Adaptive Media resolution (Preview 1000x0) with max width of 1000 pixels
     
    seems a bit like a contradiction, like an inconsistency. And the solution is to remove this contradiction by either:
     
    • setting dl.file.entry.preview.document.max.width back to 1000, or
    • modifying the "Preview 1000x0" AM resolution (or creating and using a new one) to have max width 500  (but in this case you would still run into this problem, because a 500 width image would still be somewhat pixelated, compared to the original 1600 pixels)

Additional Information

  • We had this analyzed with our engineers and from what we can tell, there does not seem to be a bug here. This behaviour is a result of Adaptive Media and how the property dl.file.entry.preview.document.max.width impacts it. It is important to note once the property has been set lower, the adaptive media image resolution “Preview {value}x0” will change to the value set, but will not be upscaled afterwards if the property is changed again.
     
    Regarding the url with &imagePreview=1, this is intended. The idea is to point to a preview that will, generally, be smaller and require less resources to serve as it is not intended as a final image.
     
    Therefore,  we suggest to solve this matter through the mentioned configuration possibilities.

 

 

 

 

Did this article resolve your issue ?

Legacy Knowledge Base