You need to be logged in to post in the forum - Log In
An active JCE Pro Subscription is required to post in the forum - Buy a Subscription
- Support
- Forum
- JCE Editor
- Adding a Border to a Picture shrinks image file and distorts picture
Support is currently Offline
Official support hours:
Monday To Friday
From 09:00 To 17:00 Europe/London (BST)
From 09:00 To 17:00 Europe/London (BST)
Please post your question in the Forum and we will get back to you as soon as we can.
Hello Support
I have a problem with applying borders to images with JCE, and I'm not sure whether the problem is intended behaviour or not ?
Some context first...
I run a tutorial website and upload a large amount of screen shots (into my articles) taken from inside programs like Vegas Pro.
Normally I save all my screen shots to .png format, because this keeps "text elements" looking nice and sharp!
If I insert a .png image file into an article without applying a border, the uploaded image maintains it's original 1:1 pixel width and height, and any Text shown in the image remains perfectly sharp.
However, if I apply a border to the exact same image, the image file suddenly becomes blurry - any text in the image looks blurry.
I can see exactly what is happening when a border is applied.
The original image is being shrunk to fit inside of the new border, which is causing fine detailed text to loose it's sharpness.
Example = Imagine the original .png image file was exactly 500px x 500px
If uploaded with no border, image displays inside of article with same dimensions of 500px x 500px
If a 3 pixel border is added to this image, the outside dimensions of the displayed image (including border) remain at 500px x 500px, however this means that the original image is being shrunk/squeezed to display at 494px x 494px.
Is this intended behaviour ?
I would prefer that the original image was not shrunk to fit inside any border.
If the example image was not shrunk, the outside border dimension including the border should become 503px x 503px.
This would make sure that the image was not distorted.
I have a direct example from my website you can use to inspect this problem.
Link #1 shows an image with no border applied - all text looks 100% sharp.
https://www.moviestudiozen.com/free-tutorials/sony-vegas-pro/593-render-avid-dnxhd-video-vegas-pro-movie-studio#b1
Link #2 is from my test site and this time a border is applied - see how the text has become blurry.
https://www.moviestudiozen.com/msz_test1/free-tutorials/sony-vegas-pro/593-render-avid-dnxhd-video-vegas-pro-movie-studio#b1
Thank you for taking the time to read this post.
Regards
Derek
I have a problem with applying borders to images with JCE, and I'm not sure whether the problem is intended behaviour or not ?
Some context first...
I run a tutorial website and upload a large amount of screen shots (into my articles) taken from inside programs like Vegas Pro.
Normally I save all my screen shots to .png format, because this keeps "text elements" looking nice and sharp!
If I insert a .png image file into an article without applying a border, the uploaded image maintains it's original 1:1 pixel width and height, and any Text shown in the image remains perfectly sharp.
However, if I apply a border to the exact same image, the image file suddenly becomes blurry - any text in the image looks blurry.
I can see exactly what is happening when a border is applied.
The original image is being shrunk to fit inside of the new border, which is causing fine detailed text to loose it's sharpness.
Example = Imagine the original .png image file was exactly 500px x 500px
If uploaded with no border, image displays inside of article with same dimensions of 500px x 500px
If a 3 pixel border is added to this image, the outside dimensions of the displayed image (including border) remain at 500px x 500px, however this means that the original image is being shrunk/squeezed to display at 494px x 494px.
Is this intended behaviour ?
I would prefer that the original image was not shrunk to fit inside any border.
If the example image was not shrunk, the outside border dimension including the border should become 503px x 503px.
This would make sure that the image was not distorted.
I have a direct example from my website you can use to inspect this problem.
Link #1 shows an image with no border applied - all text looks 100% sharp.
https://www.moviestudiozen.com/free-tutorials/sony-vegas-pro/593-render-avid-dnxhd-video-vegas-pro-movie-studio#b1
Link #2 is from my test site and this time a border is applied - see how the text has become blurry.
https://www.moviestudiozen.com/msz_test1/free-tutorials/sony-vegas-pro/593-render-avid-dnxhd-video-vegas-pro-movie-studio#b1
Thank you for taking the time to read this post.
Regards
Derek
I can see exactly what is happening when a border is applied.
The original image is being shrunk to fit inside of the new border, which is causing fine detailed text to loose it's sharpness.
The border style you are applying looks like this (from your template stylesheet):
img.border, .zenborder img {
padding: 4px;
border: 1px solid #dddddd;
}
Another style in your template stylesheet, which is assigned to all html on the site, box-sizing: border-box, results in the image being shrunk as you have observed, so that the total width and height of the image includes the border width.
You can fix this in 2 ways:
1. Insert the image without dimensions. As you are displaying the image at its full width and height, you can remove the dimensions when you insert it.
2. Fix the border style in your template stylesheet to override the box-sizing: border-box style, eg:
img.border, .zenborder img {
padding: 4px;
border: 1px solid #dddddd;
box-sizing: content-box;
}
Just because you're not paranoid doesn't mean everybody isn't out to get you.
- Page :
- 1
There are no replies made for this post yet.
Be one of the first to reply to this post!
Be one of the first to reply to this post!