Jump to content

How to resize images for a website?


Recommended Posts

Hi there,

I developing a new website for a client....the challenge is that they have a load of images and photos that they want on the website...

Apart from causing the webpages to load slowly, Google also penalises these webpages.....

Can anyone suggest how to resize images to small sizes in pixels (25-35kb) but the image must still be fairly large i.e 600x600 and it must look good?????

Are there other programs available that can do this? Preferably free!

Appreciate your help...

Regards

Greg

Link to comment
Share on other sites

You simply cannot resize the image down to a smaller number of pixels without incurring some pixelization when the image is expanded again. The harder you squash an image, the worse it will get. See here: http://forums.getpai...-print-and-web/

Instead, save the images as Optimized PNG's. You'll find the OptiPNG plugin here .

You should also crop the images heavily (make the client scream with rage if you have to). For each little bit of image that you can remove the final filesize will be smaller.

Very important: resize to the final dimension that will be displayed. One of the biggest mistakes is to upload an arbitrarily large image (say 1024x800 for example) then force the browser to display it at a smaller size (e.g. 200x150). The browser is still going to download that large image in it's entirety in order to compress it to the smaller size. Instead, resize the image to its final size (in this case 200x150). Use Image > Resize. The ratio of actual image size to displayed size should always be 1:1.

Link to comment
Share on other sites

You simply cannot resize the image down to a smaller number of pixels without incurring some pixelization when the image is expanded again. The harder you squash an image, the worse it will get. See here: http://forums.getpai...-print-and-web/

Instead, save the images as Optimized PNG's. You'll find the OptiPNG plugin here .

You should also crop the images heavily (make the client scream with rage if you have to). For each little bit of image that you can remove the final filesize will be smaller.

Very important: resize to the final dimension that will be displayed. One of the biggest mistakes is to upload an arbitrarily large image (say 1024x800 for example) then force the browser to display it at a smaller size (e.g. 200x150). The browser is still going to download that large image in it's entirety in order to compress it to the smaller size. Instead, resize the image to its final size (in this case 200x150). Use Image > Resize. The ratio of actual image size to displayed size should always be 1:1.

Thanks Ego Eram Reputo,

This really helps....Are you saying that Optimized PNG's are better to use on a website than Jpegs?

The tips on cropping and saving to the final size....great.

Regards

Greg

Link to comment
Share on other sites

Are you saying that Optimized PNG's are better to use on a website than Jpegs?

It's not an absolute but it is very likely that PNG's will work better that JPGs.

PNG's support transparency, JPG's do not. For a graphic that you want to have overlaying another, it is pretty much essential to have transparency support (unless its a strict box shape).

PNG's are not supported by older browsers (like IE6), but then IE6 should DIE DIE DIE! (so this shouldn't bother you much).

JPG's do not work well on line drawings, lettering or simple graphics (sound like web graphics to you?). This is because the image loses clarity and sharpness due to the lossy compression. JPG's work best with photographic images (the format for which the filetype was created).

Try this simple exercise:

1. Take any web graphic you are using & open it with PDN.

2. Use Save As..., to alternately save it as a JPG, PNG & Optimized PNG.

3. Compare filesizes.

4. Open each image in a browser tab & flick between them. Any visual difference that is worth bothering about?

My guess is that OptiPNG comes out the smallest, by far. I tried this test with a 1024 x 768 photo (Win7 sample pictures: Penguins), here are the results:

JPG @ 100% 608.2kb

PNG 1.7mb

OptiPNG 264kb

More...., JPG quality

Link to comment
Share on other sites

It's not an absolute but it is very likely that PNG's will work better that JPGs.

PNG's support transparency, JPG's do not. For a graphic that you want to have overlaying another, it is pretty much essential to have transparency support (unless its a strict box shape).

PNG's are not supported by older browsers (like IE6), but then IE6 should DIE DIE DIE! (so this shouldn't bother you much).

JPG's do not work well on line drawings, lettering or simple graphics (sound like web graphics to you?). This is because the image loses clarity and sharpness due to the lossy compression. JPG's work best with photographic images (the format for which the filetype was created).

Try this simple exercise:

1. Take any web graphic you are using & open it with PDN.

2. Use Save As..., to alternately save it as a JPG, PNG & Optimized PNG.

3. Compare filesizes.

4. Open each image in a browser tab & flick between them. Any visual difference that is worth bothering about?

My guess is that OptiPNG comes out the smallest, by far. I tried this test with a 1024 x 768 photo (Win7 sample pictures: Penguins), here are the results:

JPG @ 100% 608.2kb

PNG 1.7mb

OptiPNG 264kb

More...., JPG quality

Hello Ego Eram Reputo,

Thanks for the explanation.....

I followed your example with a photograph as well....

Interestingly, I got the opposite of what you did....

The image size was 3000x2000 JPG

The JPG size was 2.59MB......... final size 3000x2000

The PNG size was 9.06MB .........final size 3000x2000

The OptiPNG was 5.43MB ..........final size 3000x2000

Admittedly, I was unsure of the settings to use in OptiPNG.....so I set the trials at 7

Is there something that I'm missing here?

Appreciate your insight....

Regards

Greg

Link to comment
Share on other sites

Unusual results. I'd be thinking that the quality slider on the JPG was not set at 100%.

Link to comment
Share on other sites

Because of the way PNGs store information, the final bit size of a PNG can vary wildly between two pictures even if they are the same pixel dimensions. Photos are usually more easily compressed with JPG, whereas line art or vector type images with large areas of the same color are generally very much smaller with PNG. You should use whichever format best fits the scenario, but you should try to remain around a consistent quality setting for all photos on a single page.

As far as the decreased SEO value of image-heavy pages, you can mitigate that by including descriptor attributes such as alt and title on your img tags to provide a textual alternative for Google to chew on. The alt attribute is technically required anyway. ;)

Finally, regarding the slow loading, if I'm understanding correctly, it sounds like the page to which you are referring is an image gallery. If that is the case, I would suggest implementing a gallery script if you have not already. Scripts of this sort allow you to place only the thumbnail image on the page, with the full image being shown in an on-page pop-up when the user clicks the thumbnail. This ensures that the user only has to load the images they explicitly request, keeping the bandwidth down, significantly in most cases. The gallery script I used most often before I started writing my own was a jQuery script called Thickbox, but it looks like the developer moved on to other projects a few years ago, so it is presently "unsupported". I imagine it would still work perfectly fine, but he does offer a list of active alternatives at the top of the page.

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...