Go Back   Serif Software Forums > Design and Publishing > WebPlus

Notices

WebPlus Questions about using WebPlus for website design

 
 
Thread Tools Display Modes
Old 7th March 2009, 11:18 PM   #1
Simon Gerrard
Member
 
Join Date: Mar 2009
Posts: 45
Simon Gerrard is on a distinguished road
Default Photos on Webpages

Every time we try to use our own photos on Webplus X2 the pictures look very pixelated. What is the best format and pixel size for use on web pages? And how can you reduce the size of 3.5 - 7 million pixel pictures to look good on a website?

Simon
Simon Gerrard is offline  
Old 7th March 2009, 11:21 PM   #2
mjh
The one and only mjh
 
mjh's Avatar
 
Join Date: Feb 2009
Location: Michigan USA
Posts: 74,753
mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)
Default Re: Photos on Webpages

Simon

You need to optimize the images to the exact dimensions required for the site and also find a compression level that minimizes filesize while maintaining quality. NEVER resize an image in WP without going to FIle > Export as Picture and then re-inserting it in WP.

Ideally, web image filesizes as less than 35kb.
__________________
---------------
T9900, 8 GB RAM, 512 vidram, WIN 7 Ult 64-bit - Chrome
mjh is offline  
Old 7th March 2009, 11:23 PM   #3
Ali
Guru
 
Ali's Avatar
 
Join Date: Feb 2009
Location: Rushmere St Andrew, Ipswich, Suffolk, UK
Posts: 24,066
Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)
Default Re: Photos on Webpages

Quote:
Originally Posted by Simon Gerrard View Post
Every time we try to use our own photos on Webplus X2 the pictures look very pixelated. What is the best format and pixel size for use on web pages? And how can you reduce the size of 3.5 - 7 million pixel pictures to look good on a website?

Simon
Hi, Simon!

Here's my recipe, using PHPX2:
1. In WP, size your photo to what you want on the page - make a note of the pixel dimensions from the Transform tab.
2. Open your image in PhP and change the image size to match the pixel dimensions - use the Lanczos3 resampling method.
3. Export this to a .jpg (don't overwrite the original file) - choose a name and aim to get a good balance between the size (in Kb) of your file and the quality of the image.
4. Bring the resulting export into WP and place - do not size or manipulate any further in WP.
__________________
Ali
Win8.1 64-bit | Toshiba Laptop with Intel Core i7-4710HQ CPU @ 2.50GHz & 16GB RAM
Win7 Ultimate 64-bit SP1 | Samsung Laptop with Intel Core i5-2450M CPU @ 2.50GHz & 8GB RAM
WPX2-6 SITES: The Falcon Inn (X6) | Martin Sexton - Artist (X2) | Clover Greetings
(X6)
Ali is offline  
Old 7th March 2009, 11:49 PM   #4
Simon Gerrard
Member
 
Join Date: Mar 2009
Posts: 45
Simon Gerrard is on a distinguished road
Default Re: Photos on Webpages

Ali,

Forgive my ignorance, what's PHP>
I'm new to all this so go slow, be explicit.

Simon
Simon Gerrard is offline  
Old 8th March 2009, 12:06 AM   #5
mjh
The one and only mjh
 
mjh's Avatar
 
Join Date: Feb 2009
Location: Michigan USA
Posts: 74,753
mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)
Default Re: Photos on Webpages

Simon

PhP is PhotoPlus. If you do not have PhotoPlus, then use the suggestions I made to make the optimizations in WebPlus and use File > Export Image and save as a new filename, then insert it back into WP.... and do not touch the handles.
__________________
---------------
T9900, 8 GB RAM, 512 vidram, WIN 7 Ult 64-bit - Chrome
mjh is offline  
Old 8th March 2009, 12:07 AM   #6
Ali
Guru
 
Ali's Avatar
 
Join Date: Feb 2009
Location: Rushmere St Andrew, Ipswich, Suffolk, UK
Posts: 24,066
Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)
Default Re: Photos on Webpages

Quote:
Originally Posted by Simon Gerrard View Post
Ali,

Forgive my ignorance, what's PHP>
I'm new to all this so go slow, be explicit.



Simon
So sorry, Simon! I shall attempt to take it very slowly and be much more explicit. PhP is the acronym used around here for PhotoPlus, Serif's photo editor. You could just as easily use any photo editor to do that bit, but that's what I use. Other acronyms used are PP (PagePlus), DP (DrawPlus) and MvP (MoviePlus).

Hope that helps.
__________________
Ali
Win8.1 64-bit | Toshiba Laptop with Intel Core i7-4710HQ CPU @ 2.50GHz & 16GB RAM
Win7 Ultimate 64-bit SP1 | Samsung Laptop with Intel Core i5-2450M CPU @ 2.50GHz & 8GB RAM
WPX2-6 SITES: The Falcon Inn (X6) | Martin Sexton - Artist (X2) | Clover Greetings
(X6)
Ali is offline  
Old 8th March 2009, 12:21 AM   #7
Dallas
Regular Member
 
Dallas's Avatar
 
Join Date: Feb 2009
Location: Howlong NSW Australia
Posts: 140
Dallas is on a distinguished road
Talking Re: Photos on Webpages

This is how I was taught to optimise photos or photo type graphics for web publishing, it works well and produces images that retain quality and are sized to load quickly.

Know what size (in pixels) that you want to place your photo into WebPlus.

Use either Serif PhotoPlus or Photoshop or other good photo editing program to optimise the photo/s.

I am presuming you have already made any adjustments such as cropping.

First resample the photo to 72 or 96 dpi as this reduces the final file size. To do this go to >image> image size and untic the 'resize layers' button, change the dpi then OK. This changes the dpi without changing the photo's dimension and is a very important step in reducing file size. (some photo will already be 72 or 96dpi depending on the camera).

Then go to >image > size again and this time enter the final size of your image that you decided on before and OK.

IMPORTANT: NEVER ENLARGE a digial photo, thats when you get pixelating. Always use a photo the size or larger than you need.

Use the 'save to web' option. Use the image preview window and tweak the image quality until you are satisfied with the file size and quality balance. For instance I save a photo of dimensions 300 x 500px to about 35kb, but am happy with images up to 100kb and larger for photo galleries.

Now save the photo into an appropriate folder. Serif PhotoPlus does a better job of optimising for the web than Photoshop does!

Now you can import the photo into Webplus ready to go. You an do edge effects etc in webplus but do not resize it. (having said that I do resize for thumbnails, where quality is not an issue.


Hope that helps
Dallas in Australia
My site
Dallas is offline  
Old 8th March 2009, 12:24 AM   #8
PaulD
Sans Serif
 
PaulD's Avatar
 
Join Date: Feb 2009
Location: Nottingham
Posts: 310
PaulD is on a distinguished road
Default Re: Photos on Webpages

Quote:
Originally Posted by Simon Gerrard View Post
Ali,

Forgive my ignorance, what's PHP>
I'm new to all this so go slow, be explicit.

Simon
Simon, it depends upon the context.

In the context that both Ali and Marilyn (Mjh) are using, PHPX2 is Serif's PhotoPlus X2 application.

PhotoPlus is often referred to here in the forums as simply PhP, DrawPlus as DP, WebPlus as WP, PagePlus as PP and Digital Scrapboook Artist as DSA etc.

However, outside of the Serif forums, if you ask a web savvy person what PHP is, you'll get a completely different answer back.

In the web world, PHP is one of several scripting languages that can be used to build dynamic web pages, often integrated with content coming from MySQL databases.

In fact, the vBulletin software that runs this very forum is written in the PHP scripting language.

Needless to say, building a website with the PHP scripting language is a completely different ball-game to building a website with Serif's WebPlus.

PaulD
__________________

If you never try anything new, you'll miss out on many of life's great disappointments.
I occasionally post pointless drivel on Twitter
PaulD is offline  
Old 8th March 2009, 12:26 AM   #9
Ali
Guru
 
Ali's Avatar
 
Join Date: Feb 2009
Location: Rushmere St Andrew, Ipswich, Suffolk, UK
Posts: 24,066
Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)Ali has nothing more to prove (nirvana)
Default Re: Photos on Webpages

Quote:
Originally Posted by Dallas View Post
Now save the photo into an appropriate folder. Serif PhotoPlus does a better job of optimising for the web than Photoshop does!
Hope that helps
Dallas in Australia
My site
Dallas - much as I love Serif and PhP, which I use, when I did some direct comparisons between it and Adobe CS3 (which we have at work), Photoshop did a much better job. I wonder if you are comparing PhP with Elements?

PS I never bother about changing the dpi.
__________________
Ali
Win8.1 64-bit | Toshiba Laptop with Intel Core i7-4710HQ CPU @ 2.50GHz & 16GB RAM
Win7 Ultimate 64-bit SP1 | Samsung Laptop with Intel Core i5-2450M CPU @ 2.50GHz & 8GB RAM
WPX2-6 SITES: The Falcon Inn (X6) | Martin Sexton - Artist (X2) | Clover Greetings
(X6)
Ali is offline  
Old 8th March 2009, 01:00 AM   #10
AlfredP
Guru
 
AlfredP's Avatar
 
Join Date: Feb 2009
Location: Scotland, UK
Posts: 26,525
AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)AlfredP has nothing more to prove (nirvana)
Default Re: Photos on Webpages

Quote:
Originally Posted by Dallas View Post
First resample the photo to 72 or 96 dpi as this reduces the final file size. To do this go to >image> image size and untic the 'resize layers' button, change the dpi then OK. This changes the dpi without changing the photo's dimension and is a very important step in reducing file size.
Dallas,

If an image is 200 × 150 pixels it will contain 30,000 pixels, and if it has a colour depth of 24 bits per pixel (i.e. 3 bytes per pixel) its uncompressed size will be 90,000 bytes. Storing it with a DPI setting of 72 or 96 will determine its size when printed but will not affect the number of pixels it contains, so I don't see how your "very important step" achieves a reduction in file size.

Alfred
__________________
Windows 7® Home Premium SP1 64-bit; Intel® Core™ i5-480M 2.6GHz; 6GB DDR3 RAM; Intel® HD Graphics
La perfection est atteinte non quand il ne reste rien à ajouter, mais quand il ne reste rien à enlever.
(Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away.)
- Antoine de Saint-Exupéry (1900-1944)
AlfredP is offline  
Old 8th March 2009, 01:32 AM   #11
Jim B.
Master
 
Jim B.'s Avatar
 
Join Date: Feb 2009
Posts: 10,709
Jim B. will become famous soon enough
Default Re: Photos on Webpages

Quote:
Originally Posted by Simon Gerrard View Post
And how can you reduce the size of 3.5 - 7 million pixel pictures to look good on a website?
Very carefully!

When you resize a photo to a smaller width and height, the photo resizing or editing software (whichever type you are using) has to some how make a quart (or litre) of pixels fit into a smaller container. For example...

A photo of 1600 x 1200 pixels contains 1 920 000 pixels.

A photo of 800 x 600 pixels contains 480 000 pixels, or only 1/4 of the pixels in the larger photo.

A photo of 400 x 300 pixels contains 120 000 pixels, or only 1/16 of the original pixels.

There are two ways to get your bigger photo into a smaller size - eliminate some pixels, or combine some pixels.

Eliminate.

To resize that 1600 x 1200 photo down to 800 x 600 pixels means having to discard 3/4 of the pixels, a permanent loss of 75% of the image data.

The software might discard 3 of every 4 pixels, and keep that 4th pixel. The photo will have only 25% of the pixels to represent all the shades of color and brightness, and detail, that are in the original photo.

Combine.

To resize that 1600 x 1200 photo down to 800 x 600 pixels means having to merge 4 of the pixels into a single pixel, a permanent loss of 75% of the image data.

The software might merge the first four pixels of the photo into a single pixel, but which RGB values should that new pixel have? One value to try to represent the four removed pixels.

A combination of eliminate and combine.

OK, there are three methods.

Most resizing software does some combination of both eliminating and merging by using some rather sophistacated methods. But no matter which method of reducing the pixel count is used, there will be (far) fewer pixels available to represent all the colors and shades and detail of the original photo - your smaller photo will not look as good as the original.
__________________
Jim B. :> )

Picture taking. It's a snap!

Good photography. It's complicated.
Jim B. is offline  
Old 8th March 2009, 03:24 AM   #12
Dallas
Regular Member
 
Dallas's Avatar
 
Join Date: Feb 2009
Location: Howlong NSW Australia
Posts: 140
Dallas is on a distinguished road
Red face Re: Photos on Webpages

Ah well, maybe I got that one wrong, I was taught in a Photoshop course that when optimising photos for the web changing the DPI to 96 or 72 optimised the way the photo would be loaded and displayed on most monitors. If thats not right I stand corrected.

As for PhotoPlus v Photoshop - I have just noticed that PhotoPlus produces smaller file sizes when saving for web than Photoshop does. But I don't know if the quality settings are comparable? I have not made a study of it.

Dallas
Dallas is offline  
Old 8th March 2009, 04:18 AM   #13
Jim B.
Master
 
Jim B.'s Avatar
 
Join Date: Feb 2009
Posts: 10,709
Jim B. will become famous soon enough
Default Re: Photos on Webpages

Quote:
Originally Posted by Dallas View Post
I was taught in a Photoshop course that when optimising photos for the web changing the DPI to 96 or 72 optimised the way the photo would be loaded and displayed on most monitors.
DPI of an image file on a monitor or web page makes no (significant) difference to the image size or file size.

Examine these four shots - width & height in pixels, file size, and "DPI". Then add each to a DTP page at "native" resolution and see what hapens.

Also take a couple of minutes to read this.
__________________
Jim B. :> )

Picture taking. It's a snap!

Good photography. It's complicated.

Last edited by Jim B.; 19th April 2009 at 08:32 PM.
Jim B. is offline  
Old 8th March 2009, 04:54 AM   #14
Dallas
Regular Member
 
Dallas's Avatar
 
Join Date: Feb 2009
Location: Howlong NSW Australia
Posts: 140
Dallas is on a distinguished road
Default Re: Photos on Webpages

Hi Jim,
Amazing, that will save me some time as I am continually working with photos in my websites. I feel quite enlightened now that I have seen those examples and explanations.
Thanks for the education!
Dallas - always on a learning curve
Dallas is offline  
Old 8th March 2009, 04:55 AM   #15
Joe Mirsky
Senior Member
 
Joe Mirsky's Avatar
 
Join Date: Feb 2009
Location: New Jersey
Posts: 1,082
Joe Mirsky is on a distinguished road
Default Re: Photos on Webpages

This was discussed in another thread. Photoshop strips out EXIF (exchangeable image file format) data (camera settings, date and time, and a thumbnail) when using the save for web option for jpegs and this reduces file size. The photos on my site are typically in the 100 pixel per side range and are 4.5-7.5kb. I make all changes to my photos as tiffs, then save for web as jpegs. If I have a jpeg to start with, I save it as a tiff before I fool with it.
Joe Mirsky is offline  
Old 8th March 2009, 10:05 PM   #16
Simon Gerrard
Member
 
Join Date: Mar 2009
Posts: 45
Simon Gerrard is on a distinguished road
Default Re: Photos on Webpages

Could someone write me an idiots guide to getting a picture taken on a 5 million pixel camera down to a 35kb image on a website?
I mean step by step stuff from taking the picture from My Pictures onwards.

sorry to be annoying but all this is new to me so it has to be real beginners stuff so that I can understand and follow the steps. I have Photoshop software if that helps.

Thanks

Simon
Simon Gerrard is offline  
Old 8th March 2009, 10:24 PM   #17
mjh
The one and only mjh
 
mjh's Avatar
 
Join Date: Feb 2009
Location: Michigan USA
Posts: 74,753
mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)
Default Re: Photos on Webpages

Simon

Just a few hours ago I posted on this issue as did Ali and I think Jim B. It is not as daunting as it may seem. Look through some of the older threads of yesterday and today.
__________________
---------------
T9900, 8 GB RAM, 512 vidram, WIN 7 Ult 64-bit - Chrome
mjh is offline  
Old 9th March 2009, 02:54 AM   #18
Joe Mirsky
Senior Member
 
Joe Mirsky's Avatar
 
Join Date: Feb 2009
Location: New Jersey
Posts: 1,082
Joe Mirsky is on a distinguished road
Default Re: Photos on Webpages

How big are your pictures? I have 313x250 photos (10x8 aspect) that started out as slide scans -- 108 mb tiffs at the slide size! After Photoshop save for web at the high setting they are 25-40 kb. I think that's about the maximum size to keep the file size smaller than 35kb and still look good. Set the size in Photoshop before you save for web.
Joe Mirsky is offline  
 

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:26 AM.