A friendly reminder to please resize your images before including them on your website. Needlessly large images will slow down your website irking visitors and upsetting your Google web search ranking.

Nearly everyone and their grandmother is using a CMS such as WordPress, Joola & Drupal to build websites. A lot of rich-text editors that come bundled with them scale images for viewing in a web browser but leave the native width untouched. This effect is achieved by setting the <img> element’s width and/or height attribute(s) accordingly which effectively stretches or compresses the image but only after downloading it in its entirety.

While I’d rather avoid this practice altogether, I’m tolerant of it for making minute adjustments. While the line between “acceptable use” and “down-right ludicrous” is subjective, by far the worst offender I’ve come across was a certain Brunei website (name withheld) that embedded an image over 2,000 pixels wide and scaled it down to 200 pixels in the HTML.

Seriously, folks…

Yes, we’re all adjusting to cater to higher resolution devices, and Apple suggests that the native image size should be twice as large as it’s display size, but please use common sense when deciding upon & standardizing image sizes on your. Unless you’re in an industry that prizes or even requires huge images (hint: the organization behind that particular Brunei website wasn’t), reduce your image dimensions before including them on your website.

The WordPress Way

WordPress automates this task — every time you upload an image WordPress creates up to 3 additional copies of varying sizes (which you can adjust via Settings > Media). Themes and plugins may add additional image sizes and if you’d like to define your own, check out Simple Image Sizes (Caveat Emptor: I’ve not used this plugin myself).

I’ve not been able to find out if Joomla & Drupal have similar functions either built-in or provided through extensions. If anyone knows I’d appreciate a holler.

Resizing Images without Photoshop

Nearly every current-day desktop Operating System has in-built tools to resize images not to mention a slew of applications. You don’t need Photoshop for this. Since I live in the World of Windows my preference is for XnView which I use primarily as an image manager. Heck, you can resize images online too.

Pick any one method and use it.

The SVG Alternative

For non-photographic images (e.g. logos & icons), there’s always SVG which you can up-scale quite nicely. Browser support is very good and Inkscape is free.