General Support: Photo Quality
Does anyone know of a way to stop the quality of photos degrading so badly when uploaded that you can only display them on the website very small or they become very pixilated and blurred?
If you add a picture that is wider than 430 pixels, the system will automatically produce a resized version 430 pixels wide (with the height adjusted proportionately) and store this in your site's asset library.
This is the version that will be available for you to use when you add it to a page on your site. Trying to resize it in the editor after adding it to a page will often degrade its visual quality.
The automatic resizing is usually a good thing, as it ensures that the picture won't be too large for the layout of your page, won't take ages to download etc. However, there may be times when you want to use larger (wider than 430 pixels) pictures. There are two ways you can do this and retain the quality of the picture.
The first method, and the one that I would recommend, will work with any picture stored in the images folder of your assets library.
- Add the picture to your page as normal (click the insert/edit image button in the editor and select the picture you want to use from your library). Once you've selected the image, don't click the insert button yet.
- Instead, click in the Image URL box and add ?attr=image_orig to the end of the url. For example, if it was:
then you should change it to:
- Now click the insert button.
The full-size image, as originally uploaded to your library, will be added to the page. (Note that the layout of your page may constrain the size it is displayed at, but it will be the original image).
Alternatively, the other approach would be when you first add the image to your assets library, to add it to your data folder not the images folder. The image will be stored full size in the library. Note though that if you then want to add the image to a page, you'll have to manually enter the url for it when you use the insert/edit image button (you won't be able to select it by using the browse button). You can find the url on the image's index tab in the asset library. For most circumstances, the first method will be easier.
With either method, do keep an eye on the size of your pictures – both in terms of height and width, as well as their file size. Massive pictures are an easy way to slow down a site and/or cause problems with the layout of the page.
For what it is worth, most Voice sites will only be 1140 pixels wide at their absolute widest. I tend to try and have no more than 300k of images in total on any one page to make sure that the page displays quickly.
Hope this helps, but post again here if it doesn't.
Option 1 worked a treat thank you.
Now I know the magic number of 1140 is the widest I'll export my images at 1024pixels on the Long Edge as well as dropping to 72PPI (used to exporting images at 2048pixels for Facebook to stop them mashing the image with their compression software!).