Quality of pictures in Xara Web Designer.

[ArturBonoVox]

Hey,

I have a problem with pictures' quality.

I insert picture (jpg, very good quality and resolution) on the web. Resize it for example 400x300.
And when i publish this website the quality is poor and whe I zoom the page in browser the quality of this picture is horrible.

How to set picture to get very good quality during browsing web and zoom it in browser?


Thanks.

[Charles Moir]

Exporting unnecessarily hi-res images is really bad for website performance, so Web Designer tries to avoid this, and always produces, as standard, 96dpi images which is the official standard resolution for web browsers (W3C CSS pixel definition is 96dpi). So if you place a hi-res image on the page (or scale an image down) to be higher than 96dpi (the status line in Web Designer shows you the resolution of the image on the page), then it's re-generated at 96dpi. This produces the fastest possible download performance for your website - and all graphics will look exactly the same on the website at 100% as they do in Web Designers at 100% view.

However if you have the 'Retina (hidef) images' option on (in the Web Properties dialog, Website tab), then we will also create double resolution versions (192dpi) of all graphics and images, which is designed for hi-res screens of modern phones, tablets and computers. This means all images and graphics are pin-sharp on hi-res screens. If you zoom, I believe desktop browsers will switch to using the hi-res one. That seems to be the case in my tests. So try that option.

[pauland]

Charles, on a similar note..

I've noticed on my Mac Retina screen that the menus (particularly the text) on many Xara sites look fuzzy because of the lower image resolution compared to the browser text (which is rendered at native resolution). There doesn't seem much discussion about this on TG. I realise this is partly because many Xara users don't have such Hi Def screens. It's not just a Mac issue, increasingly Windows based kit is using high-density displays.

Does the 'Retina (hidef) images' option also upgrade menu resolution?

[ArturBonoVox]

Hey,

Look at this web: http://www.joeyl.com/overview/category/quick-portfolio

I can't do this the same with Xara.
Even if you zoom browser pictures still look sharp and good.

[mwenz]

Hey,

Look at this web: http://www.joeyl.com/overview/category/quick-portfolio

I can't do this the same with Xara.
Even if you zoom browser pictures still look sharp and good.

The photographer has, in most of the images there, two different images for each. One is the thumbnail that on a desktop is served at a larger size in a lightbox. On a higher def screen, another is served.

Take the first Army soldier. There is the 600x400 version and a 2048x1535 version. DPI means absolutely zilch on the web. It's pixel dimensions.

[pauland]

I have inspected the HTML on the site and the photographer is using images thumbnail images sized as 320x200, but in fact they are 640x400 scaled at 50%. So, the actual image is sized at 640x400 but when you see it on the browser it looks like it is 320x200.

The lightbox is displaying images at a size that depends on the height of the browser, but the actual image is 2014x1534.

If you have a 'standard' screen where one pixel of your display is the same as one pixel on your browser, then when you zoom in to the picture on the browser, the quality will remain good.

Charles has already explained that to achieve that you must tell the Xara software to export images for Retina screens. When you do so you will be able to zoom on thumbnails and the quality will be good (up to a point).

The use of 2014x1534 images means that the images take longer to load but will be of good quality in the lightbox regardless of the browser height. This is NOT the behaviour that people want in general on a website because if every image was like that the site would take forever to load. Using the browser to zoom is just plain clunky. For the lightroom image on a photogaphy site, I can understand it a bit more.

Xara and the Retina option is a good way to achieve a very similar (but not exactly the same) behaviour on your site.

The photographer is very good!

[gwpriester]

http://gwpriester.com/photo-test/

Start with a hi-res image and specify a larger pop up size.

If you know how to edit HTML you can also substitute larger size images in the index_html_files folder and change the sizes in the HTML script.

[Acorn]

Hey,

Look at this web: http://www.joeyl.com/overview/category/quick-portfolio

I can't do this the same with Xara.
Even if you zoom browser pictures still look sharp and good.

OK,you can do this with Xara products, you just need to understand that there are different methods and each has its own limitations.

DSC03317.JPG: 4224 x 3168 px, 3.49 MB

Thumbnail and Pop-up Photo
Drop an image onto your Background
Open the Bitmap gallery and inspect the content - DSC03317 (Optimised): 173 kBytes, 1920 x 1440 pixels, 96 DPI.
Scale the image to 256 px wide; Page & Layer gallery Photo 'DSC03317 Optimised)' (720dpi').
Select Thumbnail and Web Properties > Image > Photo pop-up: set Pop-up width to 1920 pix.
Preview the page and click on the thumbnail.
Right-click the pop-up image and examine its dimensions: 1723 x 1292 pixels, size 159 kB, 96dpi.

Thumbnail and Pop-up Layer
Drop an image onto your Background
Open the Bitmap gallery and inspect the content - DSC03317 (Optimised): 173 kBytes, 1920 x 1440 pixels, 96dpi.
Scale the image to 256 px wide; Page & Layer gallery Photo 'DSC03317 Optimised)' (720dpi').
Select Thumbnail and clone onto a new Layer (M).
Scale to 1920 px wide; Page & Layer gallery Photo 'DSC03317 Optimised)' (96dpi').
Select Thumbnail and Web Properties > Link: Pop-up Layer (M).
Preview the page and click on the thumbnail.
Right-click the pop-up image and examine its dimensions: 1920 x 1440 pixels, size 173 kB, 96dpi.

Thumbnail and Pop-up Layer and Magic
Drop an image onto your Background
Open the Bitmap gallery and inspect the content - DSC03317 (Optimised): 173 kBytes, 1920 x 1440 pixels, 96dpi.
Scale the image to 256 px wide; Page & Layer gallery Photo 'DSC03317 Optimised)' (720dpi').
Select Thumbnail and clone onto a new Layer (M).
Scale to 1920 px wide; Page & Layer gallery Photo 'DSC03317 Optimised)' (96dpi').
Select Thumbnail and Web Properties > Link: Pop-up Layer (M).
On Layer (M), Web Properties > Link > Link to file (PDF, AVI, etc.), attach the original DSC03317.JPG.
Preview the page and click on the thumbnail.
Right-click the pop-up image and examine its dimensions: 1920 x 1440 pixels, size 173 kB, 96dpi.
Close the Properties pop-up and left-click the pop-up window; original image is presented.

These are the basic concepts not the solutions, you still have to manipulate then to what you want.
The image on Layer (M) can have a border added and lightbox effects and the Magic can be better controlled with JavaScript.

I use the latter as it retains the original filename.

i also create Placeholders with the image and dimension parameters with CSS to achieve the highest quality presentations.

Most of the time, you do not this this level of fidelity.

Acorn

[pauland]

ArturBonoVox, welcome to TG (I don't think anyone has said that).

Please don't feel overwhelmed by the response - you've picked a scenario that has a number of possible solutions.

I'd go with Gary's solution and for best results use an image twice as big (in pixels) as the size of the lightbox and turn on the Retina option.

As you can see this is a friendly and very knowldegable group.

Xara takes the complication out of web design (well mostly).

[Acorn]

ArturBonoVox, welcome to TG (I don't think anyone has said that).

@ArturBonoVox, also few get a first response from the founder of Xara (Charles Moir).
Acorn