Scaling Images for Websites

Last week I hastily posted a rant about massive images used in some web pages and web formatted email newsletters.

Fingers have since been pointed at Mailchimp, a popular mass mailout service, for the bungle. Apparently Mailchimp says it scales images that are published with emailouts. It does, sort of.

There are several ways an image appears as a suitable size on your webpage, most of which the web developer has control over. But some public website platforms may not behave as expected. Here’s how an image gets from the website manager to your browser, the rude way:

  1. Web site manager uploads massive photo to the site.
  2. Web server thinks to itself “Wow! That’s a big one, George! People will wait for ages for that to download! And it will waste a lot of their bandwidth. Worst of all, they’ll get sick of waiting and not come back to your site. Too bad, hey. I’ll just stick some width and height tags in the page to make their browser shrink it.”
  3. A browser comes along requesting the page. “Hey dude, can I have your page?”
  4. Web-server says, “No probs, man, here you go.”
  5. Browser: “It’s got images. Can I have all those, too?”
  6. Server: “All yours.”
  7. Browser: “Gee, they’re taking a while to come down. How big are they?”
  8. Server: “Huge, man.”
  9. Browser: “Says here I have to show them at 400 by 300 but this looks ten times that size!”
  10. Server: “Hey, I just store ‘em and hand ‘em out. Not my problem.”

In my opinion websites should store a variety of appropriate sizes for a given image, including thumbnails, web-friendly sizes and the original, with an option to download that if necessary. If not, toss the original. If a website doesn’t automatically resize the uploaded images it’s up to the person managing those images to ensure the correct size.

Not really my snad sculture.

Not really my sand sculpture. Original was 2.4 MB, this version is 400 wide and is 65 KB.

That’s what I did here on a website I manage. We take a full sized uploaded photo, and create the thumbnail (110 x 61), hero image (235 x 235 cropped centre square) and the gallery sized image to a maximum of 1200 pixels wide, keeping the aspect ratio.

In Photoshop and GIMP you can scale the image. In The Windows 8 version of MSPaint you can resize it by pixels or percentage. From memory Windows XP MSPaint resizing was a little trickier but you could do it. There are plenty of another graphics apps that can resize/scale your images. You might even want one that does them in bulk, too.

Another trick to reduce the file size with JPG’s is to fiddle with the quality factor. Some of the better graphics packages like Photoshop and GIMP will let you play with the Q factor which is expressed as a percentage. By default most cameras will set Q to the high 90’s. I’ve found that with the photos on a website I manage, we could reduce Q to about 75% before we noticed any degrading of the image, while significantly reducing the file size. This option pops up when you export to the JPG format, in GIMP. For PNG files the Quality factor is known as the compression factor.

Then once you upload the correct sized image to the website, all your readers will be happy because your site will be fast and responsive. And people will likely come back. A slow website with unnecessarily large images will put people off coming back unless the rest of your content is so fantastic it offsets the frustrations waiting can cause.

Advertisements

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s