JPG Importing Changes File Size

We are trying to experiment with size, quality and cropping of some pictures on our site so we can make some improvements. So I created the test site below so we could test some things. However, I immediately noticed that the jpg size is changed once I import it to my web files. Is there a setting somewhere that I can change to prevent this from happening?

Details: The original size of the 4 photos are as follows...
Project A is size 954KB
Project B is size 243KB
Project C is size 173KB
Project D is size 91KB

I uploaded each photo to a different page on the test below. Project A is uploaded to the page named Project A, etc. Not only do they appear to be the same size on each page once I import them. But if I click on the picture, then right click and choose "Ask Bing about this picture", all 4 photos are 500x357 / 42 KB.

Next question: This is probably happening when pictures on imported into slideshow widgets that are used also. Our slideshows are full screen (we have several on our original site) so the slideshow widget already crops our pictures once loaded into the widget. We want to adjust our picture so that, once loaded, it isn't cropping out parts of the picture we need to show ... as well as, loose picture quality.

http://www.casteendesign.com/eci/a.htm

Quote:

---

Originally Posted by Alliefan

We are trying to experiment with size, quality and cropping of some pictures on our site so we can make some improvements. So I created the test site below so we could test some things. However, I immediately noticed that the jpg size is changed once I import it to my web files. Is there a setting somewhere that I can change to prevent this from happening?

Details: The original size of the 4 photos are as follows...
Project A is size 954KB
Project B is size 243KB
Project C is size 173KB
Project D is size 91KB

I uploaded each photo to a different page on the test below. Project A is uploaded to the page named Project A, etc. Not only do they appear to be the same size on each page once I import them. But if I click on the picture, then right click and choose "Ask Bing about this picture", all 4 photos are 500x357 / 42 KB.

Next question: This is probably happening when pictures on imported into slideshow widgets that are used also. Our slideshows are full screen (we have several on our original site) so the slideshow widget already crops our pictures once loaded into the widget. We want to adjust our picture so that, once loaded, it isn't cropping out parts of the picture we need to show ... as well as, loose picture quality.

http://www.casteendesign.com/eci/a.htm

---

Try opening a Blank Photo template and importing into that first then copy & paste to the target design.
That should bring the image in at its original pixel dimensions but scaled to 96dpi.

Acorn

Alliefan, it doesn't matter what filesize an image is when you import them into Xara. For example if you drag in a 4000px x 3000px then resize it 500px x 375px and publish your site Xara creates a jpg (or png) at 500 x 375 @ 96dpi when published to html. However it remains as a 4000 x 3000 within the xar/web file.

It's the same with highslide images except it creates a thumbnail image and a second one at the zoomed size, which is determined by the width you set in Xara. Slideshows are handled in the same manner.

Here is how your four images are published on your site:

EDIT: Rereading your post I misunderstood your issue. This is being caused by Utilities / Options / View / Bitmaps. Yours appears to be set to 'Resize large images to 500 px'. You can set this to 'import all photos at 96dpi. It would be advisable to set this and resave the blank web template otherwise it defaults to 500px.

Ok I will try the 2 suggestions. Can you please tell me how to view the size of a jpg that is on a web file I am working on before exporting it out? So I can show coworkers as I'm working on it? If I click on a jpg and right click, none of those options show the jpg size.

Physical size? If so select the photo with the Photo Tool then click the 100% icon on the Infobar. This will show the actual size of the image at 1:1 (96dpi).

The pixel dimensions will also appear on the Infobar H & W.

Never, ever seen that before Gary :)

So does it make sense to import images at 96 dpi so that when the website file is saved, it is a smaller working file?

No, the file size will be the same (I think). Xara publishes images at 96 and 192 dpi. The higher dpi is for devices with retina quality display. You can turn this option off in Web Properties > Website. Basically resize your image how you want it then optimize the image to eighter 96 or 192. Xara will export at these two resolutions and will only display the correct image for the device or browser.

Dear Gary, I mean on the hard disk when saved as a project .web

They always come in at 500. You have to then make them their original (or the desired) size from there. The file size in Kb is irrelevant. Just pay attention to the width and height in pixels.

You can see the image size as in the embedded photo. You need to select the image with the "pick tool" (arrow), and see the image size in the toolbar.

Attachment 120239

@edmiston99, the OP is talking about the picture pixel dimensions on import (being reduced to a default 500px width), not the scale on the page. This is relevant if you are scaling up to a much larger width.
@Egg, I am making a guess that XWDP does not have the import option to override or change this; XDPX does.
@Gary, the 100% tool is a coarse control as it only scales on the centre of the image; one then has to re-position all over again. The dragging of corners is more controllable. Deleting and dragging afresh form the Bitmap gallery resotres to 100% (96dpi).

My Post #2 stands but I am happy to be corrected.

Acorn

Quote:

---

@Egg, I am making a guess that XWDP does not have the import option to override or change this; XDPX does.

---

Cheers Acorn, I can never remember what's included & not included within all these Xara optional software variations.

Quote:

---

Originally Posted by Egg Bramhill

Cheers Acorn, I can never remember what's included & not included within all these Xara optional software variations.

---

The sad thing is a lot of the time the code is in the lesser application, it is just the User Interface that has been mangled to satisfy some weird marketing dream that by making the designer jump through hoops to achieve something the hard way will force them to buy XDPX.

Acorn

I don't have the same options under Utilities as you have. ???Attachment 120243

Mine scales the entire page view, not just a photo. I'm not seeing the features or the "view bitmap" that Egg mentioned above

Egg's screen capture is for Designer Pro X. WD 365 does not have those same options.

Quote:

---

Originally Posted by Egg Bramhill

Alliefan, it doesn't matter what filesize an image is when you import them into Xara. For example if you drag in a 4000px x 3000px then resize it 500px x 375px and publish your site Xara creates a jpg (or png) at 500 x 375 @ 96dpi when published to html. However it remains as a 4000 x 3000 within the xar/web file.

It's the same with highslide images except it creates a thumbnail image and a second one at the zoomed size, which is determined by the width you set in Xara. Slideshows are handled in the same manner.

Here is how your four images are published on your site:

EDIT: Rereading your post I misunderstood your issue. This is being caused by Utilities / Options / View / Bitmaps. Yours appears to be set to 'Resize large images to 500 px'. You can set this to 'import all photos at 96dpi. It would be advisable to set this and resave the blank web template otherwise it defaults to 500px.

---

Hi Egg,
Can't find those settings in WDP v15???

Hi LGF. Apparently it's as Gary stated:

Quote:

---

Egg's screen capture is for Designer Pro X. WD 365 does not have those same options.

---

So if I can't change the dpi of a jpg that is imported .. please educate me on this ... merely dragging a picture to a larger size once imported does not change the dpi correct? spreading the picture out (making it larger) makes the image quality lower or it has no effect?

Image quality of photos is of particular importance on this one project I'm working on. Images are being rendered on very large displays are being compared for quality. It I needed to upgrade my software that would allow me more control of how images are imported ... which would you recommend?

Quote:

---

Originally Posted by Alliefan

So if I can't change the dpi of a jpg that is imported .. please educate me on this ... merely dragging a picture to a larger size once imported does not change the dpi correct? spreading the picture out (making it larger) makes the image quality lower or it has no effect?
Image quality of photos is of particular importance on this one project I'm working on. Images are being rendered on very large displays are being compared for quality. It I needed to upgrade my software that would allow me more control of how images are imported ... which would you recommend?

---

I think we are going round in circles.

If you have high definition images then bring them into XWDP as I described in Post #2.
If the original image was 2560 x 1600 px then Xara will render at 96 dpi. The result is an image that is 26.67 x 16.72 inches, big enough for most monitors (and I know monitors have their own dpis).

If you simply drop the image onto a web page, Xara presents the image as 500 px Wide (I think, in my application, I tweaked the registry to bring images in at 1024 px Wide). This is 368 dpi.
if you then hit the 100% icon, will the image be displayed at 96 dpi. The pixel dimensions are, however, 1920 x 1204 px.
When brought back to the original dimensions, the dpi is only 72, so someone in Xara thinks were are using Apples (Windows uses 96 dpi/ppi).

You are right, if you try to scale up an image beyond its original dimensions, you lose quality.
No need to get another program.

To the specific problem you have, you are importing four images and scaling them to 500 px for their presentation.
When Xara builds the site, it renders the 500 px Wide image at 96 dpi.

There is a fudge you can use and develop.

Import your images as I described but into a separate Layer (Let's call it Photos) and ensure each is at 100% scaling (96 dpi).
For each image give it a Name of filename=PhotoA, filename=PhotoB, filename=PhotoC and filename=PhotoD (Utilities > Names).

Create a small box with a Link to the Photos layer and hide it under something else on the MouseOff layer.
This allows you to hide the Photos layer but still publish the full-size images.
There are other ways to achieve this but this is the simplest.

Now, on the MouseOff layer, create a rectangle the dimension of your image: 500 x 313 px for my example.
In its Placeholder HTML code (body), add the following:

Quote:

---

<img src="index_htm_files/PhotoA.jpg" width="500">

---

If you now publish, the Placeholder will present the original resolution of the image.

Attachment 120271 is my demo - don't click the red box!
Oh, go on, I know you want to.

Acorn