Greg135 Posted February 17, 2011 Share Posted February 17, 2011 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 Quote Link to comment Share on other sites More sharing options...
Manc Posted February 17, 2011 Share Posted February 17, 2011 (edited) Just resize. Click-Image-resize,I think you can choose how much bytes..Otherwise do click-able thumbnails Edited February 17, 2011 by ipswichmanc Quote Link to comment Share on other sites More sharing options...
Ego Eram Reputo Posted February 17, 2011 Share Posted February 17, 2011 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. Quote ebook: Mastering Paint.NET | resources: Plugin Index | Stereogram Tut | proud supporter of Codelab plugins: EER's Plugin Pack | Planetoid | StickMan | WhichSymbol+ | Dr Scott's Markup Renderer | CSV Filetype | dwarf horde plugins: Plugin Browser | ShapeMaker Link to comment Share on other sites More sharing options...
Simon Brown Posted February 18, 2011 Share Posted February 18, 2011 You could save the photos as JPEGs with the lowest quality that looks good. Quote Link to comment Share on other sites More sharing options...
Greg135 Posted February 18, 2011 Author Share Posted February 18, 2011 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 Quote Link to comment Share on other sites More sharing options...
Ego Eram Reputo Posted February 19, 2011 Share Posted February 19, 2011 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 Quote ebook: Mastering Paint.NET | resources: Plugin Index | Stereogram Tut | proud supporter of Codelab plugins: EER's Plugin Pack | Planetoid | StickMan | WhichSymbol+ | Dr Scott's Markup Renderer | CSV Filetype | dwarf horde plugins: Plugin Browser | ShapeMaker Link to comment Share on other sites More sharing options...
Greg135 Posted February 23, 2011 Author Share Posted February 23, 2011 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 Quote Link to comment Share on other sites More sharing options...
Sarkut Posted February 23, 2011 Share Posted February 23, 2011 If you want a 600x600 photo at 35 KB you will have to use JPEG. The quality of the image will suffer. OptiPNG will give the smallest file size with no loss of quality. Quote Link to comment Share on other sites More sharing options...
Ego Eram Reputo Posted February 24, 2011 Share Posted February 24, 2011 Unusual results. I'd be thinking that the quality slider on the JPG was not set at 100%. Quote ebook: Mastering Paint.NET | resources: Plugin Index | Stereogram Tut | proud supporter of Codelab plugins: EER's Plugin Pack | Planetoid | StickMan | WhichSymbol+ | Dr Scott's Markup Renderer | CSV Filetype | dwarf horde plugins: Plugin Browser | ShapeMaker Link to comment Share on other sites More sharing options...
Crazy Man Dan Posted February 24, 2011 Share Posted February 24, 2011 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. Quote 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 More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.