HELP - Reducing Image Size for Mobile

KingMedia · 21st Feb 2012, 12:33 PM

I searched and didn't find the answer... :confused: Not a photoshop user here, so some guidance please.

How do you take a photo of 166kb and reduce it to 12kb or so without losing much quality? Whilst also retaining the "100% - Auto" stretch method.

Just resizing (I use FastStone) the image won't always work or rendering it to a .gif which looks terrible in auto stretch. I read somewhere about "pixel reduction" but not sure how to do that.

* We all know that speed is #1 in mobile sites, thus smaller image files makes things way faster.

Any ideas on what tools to use or where this can be done online?

beeswarn · 21st Feb 2012, 12:40 PM

Originally Posted by KingMedia

How do you take a photo of 166kb and reduce it to 12kb or so without losing much quality?

You can't. By definition, when you remove 93% of the content you are going to affect the quality enormously.

You have to learn to compromise when necessary. Speed is very important. So is clarity.

Adrian John · 22nd Feb 2012, 01:22 AM

If you have Photoshop try this:
After you edit your image(if any modification necessary), transform it into a Smart Object, resize the image down to 320px width if you want it to fill all phone screen(100%), or lower if in your layout the image won't take 100% of the width.
After you do that, go to File-> Save for Web Pages and on the top right corner you have some options for gif, png 8, png 24, jpg. try an play with those settings to see how low you can get the size of the file(it shows you under the image preview on the left side) so you won;t lose much quality.
After you have decided on those settings, click Preview and it will open IE for a preview and you can save it directly from there for the lower byte size.

It's an easy process once you play couple times with it.

Something i often do when i don't have access to Photoshop it's using

Code:

http://www.webresizer.com/resizer/

or pixlr to reduce the size of the images

Hope it helps.

Adrian

Nail Yener · 22nd Feb 2012, 01:34 AM

Firstly, you cannot reduce a 166kb image to 12kb without sacrificing quality considerably.
Secondly, I wouldn't use a full 100% stretching on an image for mobile sites.

When I want stretching, I use something like the following:

HTML

HTML Code:

<div id="logo">
	<img src="logo.jpg" width="100%" alt="Business Name" />
</div>

CSS

HTML Code:

#logo img{max-width:400px}

where 400px is the real width of the image. This makes sense when using single images, but it is possible to apply a similar procedure for all the images on your site using some sort of script.

Quentin · 22nd Feb 2012, 02:15 AM

Get the free program Infranview and reduce the size to about 350 pixels and make sure you also add the plugin and then save as.

Should get it down to about 12 to 15 pix.

Quentin

KingMedia · 22nd Feb 2012, 09:34 AM

Thanks for your replies guys! Will def try those suggestions out.

ttrfanatic · 22nd Feb 2012, 10:05 AM

I disagree with those saying that you cannot reduce a 166kb file down to 12kb without sacrificing quality. If I have a very high resolution image let's say 1024 x 768 or whatever and I scale that image down to 256 x 192 then that file size is going to be greatly reduced and I shouldn't have lost all that much quality. It really is in how you scale the image. Most good graphic programs should allow you to scale the image and keep the size proportional.

WillR · 22nd Feb 2012, 07:26 PM

I use gifbot to optimize my mobile images and get the file sizes down:
HTML code help, search engine optimization and web site maintenance tools by NetMechanic.

Smidid Sammia · 22nd Feb 2012, 08:59 PM

really so many ways, learn a lot, I would have a try

lint631 · 22nd Feb 2012, 10:12 PM

Super easy tool to use:

psydk.org - PngOptimizer

Thomas Anderson · 23rd Feb 2012, 12:23 AM

Well to reduce image size u have to first crop the image to remove unwanted part.
After cropping change the pixel of the file desired.
Save the file in JPEG format & use the compression to high range.

skagenweb · 23rd Feb 2012, 03:43 AM

Shouldnt it do it automatically? Phones are advanced enough these days to display on scale.

ttrfanatic · 23rd Feb 2012, 03:30 PM

Skagenweb, you could code the page to shrink and grow the image anyway, but the real issue is the amount of data that needs to be served up from the webserver to the mobile device. The smaller you can make it the faster it will show up on the mobile device.

WillR · 24th Feb 2012, 05:28 AM

Originally Posted by skagenweb

Shouldnt it do it automatically? Phones are advanced enough these days to display on scale.

We are talking about file size of the image, not the actual image size itself. The phone cannot do anything about the filesize... whatever the size of that image that is exactly what the phone has to download to display the image.

KingMedia · 24th Feb 2012, 11:07 AM

Actually with everyone's help here, I am able to get my images down to 350-400 wide and in or around 20-25kb while still looking sharp on an HTC (biggest screen) landscape.

22nd Feb 2012, 01:22 AM	#3
Adrian John Mobile Website Designer War Room Member Join Date: 2009 Posts: 529 Thanks: 611 Thanked 119 Times in 95 Posts	Re: HELP - Reducing Image Size for Mobile Share on: If you have Photoshop try this: After you edit your image(if any modification necessary), transform it into a Smart Object, resize the image down to 320px width if you want it to fill all phone screen(100%), or lower if in your layout the image won't take 100% of the width. After you do that, go to File-> Save for Web Pages and on the top right corner you have some options for gif, png 8, png 24, jpg. try an play with those settings to see how low you can get the size of the file(it shows you under the image preview on the left side) so you won;t lose much quality. After you have decided on those settings, click Preview and it will open IE for a preview and you can save it directly from there for the lower byte size. It's an easy process once you play couple times with it. Something i often do when i don't have access to Photoshop it's using Code: http://www.webresizer.com/resizer/ or pixlr to reduce the size of the images Hope it helps. Adrian
	ARE YOU A CONSULTANT? Do you have clients who could use MORE LEADS? Get them a MOBILE WEBSITE PLATFORM built to stay up with their clients habits. More than 50% of their customers buys from their mobile devices now! CLICK HERE FOR MORE INFO

22nd Feb 2012, 01:34 AM	#4
Nail Yener You reap what you sow. War Room Member Join Date: 2008 Location: Sometimes you don't. Posts: 1,078 Thanks: 196 Thanked 411 Times in 243 Posts	Re: HELP - Reducing Image Size for Mobile Share on: Firstly, you cannot reduce a 166kb image to 12kb without sacrificing quality considerably. Secondly, I wouldn't use a full 100% stretching on an image for mobile sites. When I want stretching, I use something like the following: HTML HTML Code: <div id="logo"> <img src="logo.jpg" width="100%" alt="Business Name" /> </div> CSS HTML Code: #logo img{max-width:400px} where 400px is the real width of the image. This makes sense when using single images, but it is possible to apply a similar procedure for all the images on your site using some sort of script.

22nd Feb 2012, 02:15 AM	#5
Quentin Web Marketing For Profit War Room Member Join Date: 2002 Location: Brisbane Posts: 2,895 Thanks: 8 Thanked 1,162 Times in 528 Posts Blog Entries: 10	Re: HELP - Reducing Image Size for Mobile Share on: Get the free program Infranview and reduce the size to about 350 pixels and make sure you also add the plugin and then save as. Should get it down to about 12 to 15 pix. Quentin
	DIY Product Creation Online Business Training on How To Create Products to sell online Plus Lots More.

22nd Feb 2012, 09:34 AM	#6
KingMedia HyperActive Warrior Join Date: 2009 Posts: 168 Thanks: 33 Thanked 21 Times in 20 Posts	Re: HELP - Reducing Image Size for Mobile Share on: Thanks for your replies guys! Will def try those suggestions out.

22nd Feb 2012, 10:05 AM	#7
ttrfanatic Active Warrior War Room Member Join Date: 2011 Location: Southern California Posts: 61 Thanks: 4 Thanked 4 Times in 4 Posts	Re: HELP - Reducing Image Size for Mobile Share on: I disagree with those saying that you cannot reduce a 166kb file down to 12kb without sacrificing quality. If I have a very high resolution image let's say 1024 x 768 or whatever and I scale that image down to 256 x 192 then that file size is going to be greatly reduced and I shouldn't have lost all that much quality. It really is in how you scale the image. Most good graphic programs should allow you to scale the image and keep the size proportional.

21st Feb 2012, 12:33 PM	#1
KingMedia HyperActive Warrior Join Date: 2009 Posts: 168 Thanks: 33 Thanked 21 Times in 20 Posts	HELP - Reducing Image Size for Mobile Share on: I searched and didn't find the answer... :confused: Not a photoshop user here, so some guidance please. How do you take a photo of 166kb and reduce it to 12kb or so without losing much quality? Whilst also retaining the "100% - Auto" stretch method. Just resizing (I use FastStone) the image won't always work or rendering it to a .gif which looks terrible in auto stretch. I read somewhere about "pixel reduction" but not sure how to do that. * We all know that speed is #1 in mobile sites, thus smaller image files makes things way faster. Any ideas on what tools to use or where this can be done online?

22nd Feb 2012, 07:26 PM	#8
WillR Digital Marketer War Room Member Join Date: 2010 Location: Australia Posts: 12,475 Thanks: 1,984 Thanked 8,187 Times in 4,079 Posts	Re: HELP - Reducing Image Size for Mobile Share on: I use gifbot to optimize my mobile images and get the file sizes down: HTML code help, search engine optimization and web site maintenance tools by NetMechanic.
	. ➨ Here's How to Make Your First $177 Online This Week Using the Piggyback Method... .

22nd Feb 2012, 08:59 PM	#9
Smidid Sammia Active Warrior Join Date: 2011 Posts: 35 Thanks: 12 Thanked 3 Times in 2 Posts	Re: HELP - Reducing Image Size for Mobile Share on: really so many ways, learn a lot, I would have a try

22nd Feb 2012, 10:12 PM	#10
lint631 MobileWebRockstar War Room Member Join Date: 2011 Location: New York Posts: 253 Thanks: 41 Thanked 52 Times in 37 Posts	Re: HELP - Reducing Image Size for Mobile Share on: Super easy tool to use: psydk.org - PngOptimizer
	WPMobileSalesPro - Mobile Web Sales Tool

23rd Feb 2012, 12:23 AM	#11
Thomas Anderson Anderson Join Date: 2012 Posts: 12 Thanks: 1 Thanked 0 Times in 0 Posts	Re: HELP - Reducing Image Size for Mobile Share on: Well to reduce image size u have to first crop the image to remove unwanted part. After cropping change the pixel of the file desired. Save the file in JPEG format & use the compression to high range.

23rd Feb 2012, 03:43 AM	#12
skagenweb Active Warrior Join Date: 2009 Location: Birmingham, U.K. Posts: 61 Thanks: 1 Thanked 9 Times in 6 Posts	Re: HELP - Reducing Image Size for Mobile Share on: Shouldnt it do it automatically? Phones are advanced enough these days to display on scale.

23rd Feb 2012, 03:30 PM	#13
ttrfanatic Active Warrior War Room Member Join Date: 2011 Location: Southern California Posts: 61 Thanks: 4 Thanked 4 Times in 4 Posts	Re: HELP - Reducing Image Size for Mobile Share on: Skagenweb, you could code the page to shrink and grow the image anyway, but the real issue is the amount of data that needs to be served up from the webserver to the mobile device. The smaller you can make it the faster it will show up on the mobile device.

24th Feb 2012, 11:07 AM	#15
KingMedia HyperActive Warrior Join Date: 2009 Posts: 168 Thanks: 33 Thanked 21 Times in 20 Posts	Re: HELP - Reducing Image Size for Mobile Share on: Actually with everyone's help here, I am able to get my images down to 350-400 wide and in or around 20-25kb while still looking sharp on an HTC (biggest screen) landscape.