Jump to content

 
Photo

Image Optimization

- - - - -

  • Please log in to reply
22 replies to this topic

#1
Derek Tonn

Derek Tonn

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 455 posts
  • Gender:Male
  • Location:Springfield, Minnesota, USA
  • United States

Hello everyone!

As many of you know from Madison (NACIS), I am a person who feels VERY passionate about the issue of web graphics optimization......so much so that I recently registered the domain name "graphicsoptimization.com" and plan to develop a web site this summer that both illustrates the "how" and "why" of why "G.O." is important, offering tutorials, advice and services to those interested in taking things a step or two further. For me, web graphics optimization is about three primary areas of benefit:

1. Economic. Smaller image sizes = more page/image views, for those sites dependent upon advertising revenues to help support themselves, as well as fewer servers/lines needed to move all of the information through cyberspace.

2. Environmental. Less bandwidth consumption = less hardware needing to be manufactured (and replaced) to store and distribute information, as well as the "extension of life expectancy" of existing equipment via the increase in their ability to process information faster than before. Another environmental benefit would be the fact that less time would be needed to effectively view the content that one is desiring, resulting in less time running one's computer and consuming electricity (though my guess is that at least some of that "void" would be filled by people simply viewing more online content).

3. Social. Slow-loading pages and graphics puts individuals who are poor and/or do not possess access to higher connection speeds at a SUBSTANTIAL disadvantage to those of us who do.....and smaller image sizes will dramatically improve the usability of the internet for individuals on dial-up connections or slower cable/DSL services.

I wanted to raise this issue in CartoTalk again after viewing one of Jean-Louis' beautiful renderings of Montreal in our Map Gallery this afternoon: http://www.cartotalk...t...post&id=584 An absolutely WONDERFUL work, and a joy to look at! Even on my cable/DSL connection, however, it took me a few seconds to display the entire graphic (445,081 bytes). Just for "grins", I ran that graphic through some image optimization techniques that I have available to me, and was able to reduce that same .jpg file (same pixel height/width, same resolution, same JPEG quality, etc.) to 268,500 bytes....a savings of 39.7% in bandwidth (176,581 bytes every time the image is viewed on a computer that is not storing a copy of that image in its cache). The results of the optimization work is attached to this message, and I would be confident in saying that a vast majority of individuals will see little/no change in the image whatsoever.

I'm not sure if people are REALLY understanding the profound social, environmental and economic benefits of image optimization! However, I was hoping to receive people's sincere and honest feedback on if you all feel that this topic should have more of a place in the forefront of the work we are all creating and publishing for on-screen display. As an example, I recently contacted Google Maps and illustrated to them (in as detailed of a fashion as one can without boring people to tears....like I am sure this long-winded message is doing) how converting all of their spliced .png map panels from 256-colors to 64 colors would have absolutely NO noticeable visual effect on their on-screen imagery, yet would reduce the time/bandwidth required to process and display that imagery by one-third (30+ percent). That one site alone going "optimized" would result in TERABYTES of bandwidth being saved on the internet every month....not to mention reducing the number of server slots that Google needs to fill in order to distribute their content.

I do not want to belabor this issue! However, I've heard people talk about "reducing their carbon footprint" as an incredibly important part of ensuring a world worth living for future generations. When I think about the internet and/or what I/we can do to make the world a better place, I am thinking of ways/opportunities for "reducing our BANDWIDTH footprint".....which would be a win/win/win for ourselves and almost everyone around us.

I would welcome your thoughts on this issue. Thanks!

Derek

Attached Files


Derek Tonn
Founder and CEO
mapformation, LLC

datonn@mapformation.com
http://www.mapformation.com

#2
natcase

natcase

    Ultimate Contributor

  • Validated Member
  • PipPipPipPipPipPip
  • 572 posts
  • Gender:Male
  • Location:Minneapolis, Minnesota
  • Interests:cartography
    aeshetics
    cartographic design
    John Bartholomew
    road maps
    large-scale mapping
  • United States

While I don't care about the issue as passinately, I would eagerly use a black-box "optimizer" or header-stripper, or even an easy set of rules for reducing file size in Photoshop. Derek, would you be willing to post your tips from NACIS here. I recall their being very useful. And I look forward to the site.

Nat Case
INCase, LLC

Minneapolis, Minnesota USA
maphead.blogspot.com



#3
Rob

Rob

    Legendary Contributor

  • Moderator
  • PipPipPipPipPip
  • 418 posts
  • Gender:Male
  • Location:Kailua, Hawaii
  • Interests:anything outside.
  • United States

it's a great idea Derek. I'd definitely benefit from some of your knowledge via your site in progress. Looking forward to it.

#4
Jean-Louis

Jean-Louis

    Ultimate Contributor

  • Validated Member
  • PipPipPipPipPipPip
  • 545 posts
  • Gender:Male
  • Location:Montreal Quebec
  • Interests:In the vast ocean of my ignorance, I have a few bubbles of interests
  • Canada

Thank you for the complimentary words Derek.
So yes I did see that my original image went down from about 460K to 260K without any changes to how it looks.
So how did you do this?
I am somewhat of of techo-dinausor, Whenever I send an image I simply limit myself to a 7 by 4 in (150DPI) canvas in photoshop and try to fit it whatever I can into that.
Obviously there are better ways. So where do I start?
Jean-Louis Rheault
Montreal


#5
benbakelaar

benbakelaar

    Ultimate Contributor

  • Associate Admin
  • PipPipPipPipPipPip
  • 658 posts
  • Gender:Male
  • Location:North Brunswick, NJ
  • Interests:maps, information, technology, scripting, computers
  • United States

Derek, I personally agree with your philosophy of a low footprint/low usage lifestyle, whether digital or real-life. I'm just not sure I agree that image optimization is a major component of bandwidth reduction. For example, this article http://arstechnica.c...70131-8748.html claims that 5% of Internet users (out of a study of 2 million users) generate 43.5% of traffic. You bring up an interesting point, and I'm going to look deeper into how power usage and bandwidth consumption are related.

I'm not sure if people are REALLY understanding the profound social, environmental and economic benefits of image optimization! However, I was hoping to receive people's sincere and honest feedback on if you all feel that this topic should have more of a place in the forefront of the work we are all creating and publishing for on-screen display.



#6
Derek Tonn

Derek Tonn

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 455 posts
  • Gender:Male
  • Location:Springfield, Minnesota, USA
  • United States

Thank you for the complimentary words Derek.
So yes I did see that my original image went down from about 460K to 260K without any changes to how it looks.
So how did you do this?


Jean-Louis,

With that particular image, I used a program called ImageOptimizer to run some quick passes over the image to look for adjacent runs of identical colors in the image. When the program finds some (especially all of that white space on the bottom and right-hand edge of the .jpg), it is able to compress those very specific regions of the graphic at various customizable levels. I then took the extra step of turning off any optimization/compression around areas of the graphic that included text, since text and .jpg usually equals a blurry/chunky mess if one does not take care in their file export process. All told, about three minutes of work to save 175,000+ bytes and a few seconds of time each time that graphic is displayed in a browser.

"Save/Export to Web" in Adobe and Corel products has always been a bit "lacking", in my opinion. With .jpg, they just aren't designed to achieve the smallest file sizes possible, and every time I have asked people about that very issue in online discussion forums or chats with product tech support, they don't really seem to care (a la "computers are getting faster/better all the time, so it doesn't matter that much").

With .png and .gif, I don't think they do an adequate job of helping people to minimize the number of colors used in the output before one begins to noticeably (on-screen) affect image quality. For most output produced in vector (AI, Corel Draw, Freehand, Inkscape, etc.), 64 colors is more than adequate. For raster output saved into .gif or .png, 128 colors is usually plenty when showcasing your designs that include rich color gradients. However, Corel and Adobe default (generally) to 256 colors for all output saved to .gif and .png....for no real good reason that I have been able to decipher. I have 20/15 vision and no color blindness issues, and when I put many images with 256 colors next to images with 128 or even 64 colors, I cannot see the difference.

At any rate, that is what I did with your particular .jpg file. Hope that helps! B)

Derek
Derek Tonn
Founder and CEO
mapformation, LLC

datonn@mapformation.com
http://www.mapformation.com

#7
Derek Tonn

Derek Tonn

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 455 posts
  • Gender:Male
  • Location:Springfield, Minnesota, USA
  • United States

Derek, I personally agree with your philosophy of a low footprint/low usage lifestyle, whether digital or real-life. I'm just not sure I agree that image optimization is a major component of bandwidth reduction. For example, this article claims that 5% of Internet users (out of a study of 2 million users) generate 43.5% of traffic. You bring up an interesting point, and I'm going to look deeper into how power usage and bandwidth consumption are related.


Ben,

I think what really opened my eyes related to image optimization was when I downloaded the [url=https://addons.mozilla.org/firefox/60/]Web Developer add-on for Mozilla Firefox. I'm not sure if you have that add-on (or if you are a Firefox user), but if you happen to use it and check some of your favorite web sites via Web Developer/Images or Web Developer/Information/Document Size, you will see that over 80-90 percent of the information being processed to display many, MANY web sites is imagery. Even in the display of this particular CartoTalk forum page, which has NOTHING to do with the sharing of imagery per-se, 194Kb of the 316Kb being processed (61 percent) is imagery.....the CartoTalk banner, Donate|PayPal button, smilies, etc.

That arstechnica.com article is absolutely correct in stating that VoIP/VoIP users are using an ever-increasing amount of bandwidth. However, the quote in that article:

As it turns out, bandwidth hogs only make up about 5 percent of the entire Internet-using audience, but generate about 43.5 percent of the total traffic.........What in the world are the bandwidth hogs doing to generate all of that traffic? It appears as if VoIP is significantly more popular among bandwidth hogs than with the light users, with 41.9 percent of the heavy traffic group using some sort of VoIP service by December?an increase of 0.4 percent from August.


...is not saying that VoIP is behind 43.5 percent of all bandwidth traffic, but rather that individuals using VoIP are behind 43.5 percent of all bandwidth traffic. I use VoIP as an example, and might spend 15-20 minutes (at most) using that service on a daily basis. Meanwhile, every evening when I clear our my browser cache in Firefox, I have to throw-away 60-80mb of cached data.....80 to 90 percent of which is usually image files.

The deeper I delve into this topic the more I realize I need to learn (and the more fascinated I become). I just hope I don't ever sound too "preachy", as that is not my intent. I'm just trying to solicit ideas and feedback from others in our very graphical/visual line of work...since we are frequently the one creating the output that finds its way on to a web page.
Derek Tonn
Founder and CEO
mapformation, LLC

datonn@mapformation.com
http://www.mapformation.com

#8
Jean-Louis

Jean-Louis

    Ultimate Contributor

  • Validated Member
  • PipPipPipPipPipPip
  • 545 posts
  • Gender:Male
  • Location:Montreal Quebec
  • Interests:In the vast ocean of my ignorance, I have a few bubbles of interests
  • Canada

Thanks for the tips Derek but there does not appear to be an imageoptimizer for Mac. Does anyone else know?
Jean-Louis Rheault
Montreal


#9
Derek Tonn

Derek Tonn

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 455 posts
  • Gender:Male
  • Location:Springfield, Minnesota, USA
  • United States

Jean-Louis,

Sorry about that! I forgot to mention platform. SO much of the software development work related to image optimization has been on the Windows/Linux side of the house, which is interesting, given the fact that some of the staunchest defenders of the Mac platform are artists and designers.

I did a quick search on Google tonight to see what I could find for the Mac platform. The following web pages had a few different software options:

http://graphicssoft....on_Software.htm.
http://www.allgraphi...ompression.html

ImageOptimizer is the best I have seen at balancing image quality and maximum file size compression...though I am always on the look-out for new and interesting tools. If I happen to come across a few additional options for the Mac, I'll let you know. Thanks!

Derek
Derek Tonn
Founder and CEO
mapformation, LLC

datonn@mapformation.com
http://www.mapformation.com

#10
Hans van der Maarel

Hans van der Maarel

    CartoTalk Editor-in-Chief

  • Admin
  • PipPipPipPipPipPipPip
  • 3,898 posts
  • Gender:Male
  • Location:The Netherlands
  • Interests:Cartography, GIS, history, popular science, music.
  • Netherlands

Derek,

Thanks for the link to that Firefox toolbar, I'm sure I'll be using that quite often in the future.
Hans van der Maarel - Cartotalk Editor
Red Geographics
Email: hans@redgeographics.com / Twitter: @redgeographics

#11
Derek Tonn

Derek Tonn

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 455 posts
  • Gender:Male
  • Location:Springfield, Minnesota, USA
  • United States

You're welcome, Hans. B)

Say, I just thought I would share another benefit to image optimization that I happened to stumble across this evening: Google SketchUp libraries. Many of the models that are being built out there today are using .jpg, .png or .gif graphics that are a part of one's "Library" of textures and decor for their designs. I didn't put two and two together until tonight, when one of our clients was complaining about "how trees on their model really slowed the overall performance of the .skp file down" (and its subsequent performance in .pdf and HTML).

I opened up the .skp file tonight and, sure-enough, I found four .png tree graphics that totaled 2.6Mb in size. I spent under ten minutes running those four graphics through my image optimization processes, and got the total cumulative file size down to 700Kb. Nearly 2Mb in file size savings...when the entire size of the model pre-trees optimization was 11Mb. That's almost a 20% improvement in the speed/performance of the SketchUp file resulting from less than ten minutes of effort that is so simple I could teach my 11-year old niece to do it over the course of an afternoon. Then I think about how many library items, how many SketchUp models, how many TERABYTES of data could be conserved from something as simple as not having 3-4 bloated tree graphics in a .skp library.

A bit "preachy", I know. However, this kind of stuff practically makes it hard for me to sleep at night.....thinking about the HUGE positive consequences this seemingly simple little task could have on our world.....IF I could only convince other people to jump on that bandwagon with me. ;)
Derek Tonn
Founder and CEO
mapformation, LLC

datonn@mapformation.com
http://www.mapformation.com

#12
danielle

danielle

    Key Contributor

  • Validated Member
  • PipPipPip
  • 52 posts
  • Location:NYC
  • United States

Derek,

I think this is a worthwhile idea to pursue. The Google maps are an excellent example, I hope this can be followed through. Their basic street maps are simple in terms of color and detail, a smaller color palette makes perfect sense. I am very surprised they are not already optimized. With the amount of storage they use, why didn't anyone think to optimize all those tiles when they were created?

In general, I would expect the "computers are getting faster" mindset to be a major obstacle, especially with the public at large. Those images people post on ebay and myspace can be ridiculously huge! But there may be hope for the "professionals".

I've actually been surprised by the lack of technical computer/programming knowledge that many web designers have. Maybe it's just the small shops I've had experience with. They seem to be great with the graphic design, but less so with the technicalities that are web-specific. Such as web-safe colors, writing clean and simple code, etc. And practical matters such as not having the page too wide to be printed on a normal sheet of paper.

I don't know if it's as simple as a left-brain right-brain bias. Are all the art school grads working in web design because that's where the jobs are? Is it the wysiwyg software programs that are so popular? Or am I just old fashioned because I learned HTML using telnet, unix, and vi?

Anyways, focusing on the environmental and accessibility benefits of optimization is a smart approach. Have you considered writing an editorial for any design journals? Please keep us updated...

-Danielle

#13
benbakelaar

benbakelaar

    Ultimate Contributor

  • Associate Admin
  • PipPipPipPipPipPip
  • 658 posts
  • Gender:Male
  • Location:North Brunswick, NJ
  • Interests:maps, information, technology, scripting, computers
  • United States

I don't know if it's as simple as a left-brain right-brain bias. Are all the art school grads working in web design because that's where the jobs are? Is it the wysiwyg software programs that are so popular? Or am I just old fashioned because I learned HTML using telnet, unix, and vi?


To cut right to the chase, Yes, yes, and yes. :) I'll insert a longer reply later.

#14
Derek Tonn

Derek Tonn

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 455 posts
  • Gender:Male
  • Location:Springfield, Minnesota, USA
  • United States

Danielle,

I've been thinking a lot about your post today. I think that, related to your question on the "gap" or "disconnect" between web development and design, I would respond as follows:

1. Most professionally trained web developers (those who went to school for it and/or have taken formal classes in the field), at least in my own experience, are provided with ample formal training on all of the "technical" (how to code), but do not spend nearly as much time learning about the "art" of designing a page (from an aesthetic standpoint). A .jpg is a .jpg is a .jpg to many (MANY!) web developers I have worked with....and all they care about is that the .jpg looks good and is sized correctly. Whether it is 40Kb or 14Kb makes absolutely no difference to them, as long as it "looks good."

2. Most designers (like us) who have stumbled into web design either by accident or on purpose have had ample training on the "art" of creating the visuals which will make for effective designs, but have little/no understanding of the "technical" (how the internet or web pages actually work, or how the information is processed). We generally don't understand how to take a 50Kb page and make it look/function the same at only 15Kb. All we care about (generally) is that it "looks good." I would also argue that most designers (at least those of us in the business before and/or during the early/mid 1990s) still have an overwhelming bias or tendency toward print media versus electronic media. We think about our graphics with one eye on the idea of "what will this page or graphic look like if someone prints it out"....even though 99.99% of most people visiting most web sites are not going to be printing anything other than .pdfs available on a site. A tendency for people to put "print-quality" graphics on their web pages ensues.

3. WYSIWYG editors (especially FrontPage) is sometimes to web development what MSWord is to page layout/design: It places some incredibly powerful tools and abilities in the hands of do-it-yourself types who don't have a clue what they are doing. For the lion's share of do-it-yourselfers, BOTH their coding AND their graphics are a complete trainwreck. The pages might look nice! However, they are bloated, non-cross browser compliant, non-ADA section 508 compliant, etc., etc. That's not to say that "trained" web developers are not guilty of the identical things too, although more often than not, they are making a choice with full-knowledge of the consequences (versus the do-it-yourselfer, who doesn't even realize there might be a problem or a better solution).

On #1, I find myself having to "educate" trained web developers on graphics issues on a regular basis. On #2, I run into the P-word (print) all the time. On #3, you just focus on making baby-steps and expose people to the opportunities and concepts (though I do find "#3" to be as much or more receptive than "#1", because people who went to school for web design do not like having a map designer telling them how to optimize their code/graphics). ;)

I've been designing maps and other graphics for-pay since 1992, and I built my first web pages in 1994. All I had ever been taught or told related to graphics optimization for "on-screen" display in 13-15 years was ".jpg for photos, .gif/.png for everything else." That's it. I suspect that most other designers and web developers have had a similar experience. I am working to change that, as much as one person can, because seeing 500Kb graphics on the web that could/should be 125Kb graphics is literally like nails on the chalkboard for me. It's like people running their cars for 30 minutes while they are inside their house or running errands, because they wanted their car to be warm/cool when they were finally ready to use it. It's wasteful, it is harmful to the environment and it is harmful to our economy on both a macro and micro level.

Sorry for the rant! :) Your post really got me thinking today though.......

Derek
Derek Tonn
Founder and CEO
mapformation, LLC

datonn@mapformation.com
http://www.mapformation.com

#15
danielle

danielle

    Key Contributor

  • Validated Member
  • PipPipPip
  • 52 posts
  • Location:NYC
  • United States

I found an article today that reminded me of this thread:

Expected Environmental Impacts of Pervasive Computing
Andreas Kohler and Lorenz Erdmann
Human and Ecological Risk Assessment, 10: 831?852, 2004

http://www.empa.ch/p...*/51472/---/l=2

ABSTRACT
Pervasive Computing will bring about both additional loads on and benefits to the environment. The prevailing assessment of positive and negative effects will depend on how effectively energy and waste policy governs the development of ICT infrastructures and applications in the coming years. Although Pervasive Computing is not expected to change the impact of the technosphere on the environment radically, it may cause additional material and energy consumption due to the production and use of ICT as well as severe pollution risks that may come about as a result of the disposal of electronic waste. These first-order environmental impacts are to be set off against the second-order effects, such as higher eco-efficiency due to the possibility to optimize material and energy intensive processes or to replace them by pure signal processing (dematerialization). The potential environmental benefits from such second-order effects are considerable and can outweigh the firstorder effects. But changes in demand for more efficient services (third-order effects) can counterbalance these savings. The experience gained thus far with ICT impacts has shown that such a rebound effect occurs in most cases of technological innovations.


Maybe someone has already done a study more related to website image optimization? You could calculate some estimates of electricity use, bandwith, and server hardware requirements.

Google could probably do this themselves as a cost-benefit analysis. How long would it take to optimize their graphics compared with the resource savings. (Factors could include server hadware, backups, physical space, cooling systems, electricity, management, etc.). There's probably a reasonable tradeoff even without factoring in the savings for their customers.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

-->