Blog

5 Ways to Optimize Image File Sizes for Web Use

To maximize visitor engagement and conversions, your page needs to load in less than 2-3 seconds. And since so much visitor traffic now originates from cell phones, often on lower bandwidth 3G connections, it’s important to optimize your images.

In 2018, the median website page size was approximately 2.1 Mb. And the average page size was much higher.

Here are 5 ways to reduce image file sizes to improve your page load speed:

  1. TinyPNG
    TinyPNG is a web-based tool that uses lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size, with size reductions up to 70% or more.
  2. Adobe Photoshop, Elements
    Graphics editing software usually has a ‘Save For Web’ or Export option that allows you to reduce file sizes for web use. A compression (‘quality’) setting of 50%-60% of the original image is often sufficient. An advantage of using these tools is that you can also perform color and lighting corrections, as well as custom crop images to the exact dimensions required (a performance best practice).
    If your organization cannot afford Photoshop, Elements provides most basic image editing tools; GIMP is a cross-platform open source alternative available for free.
  3. File Explorer (Windows)
    This is a quick method that allows you to send images at smaller dimensions. Right click any image and select “Send To: Mail recipient.” A window should be generated giving you the ability to send the image(s) from Smaller sizes (640 x 480 pixels) up to Large size (up to 1280 x 1024). With the exception of full width or super wide panorama header images, most images on your website should not need to be wider than 1,280 pixels.
  4. Cell phone
    If the images are accessible on your cell phone, both iPhones and Android give you options to ‘Reduce image size’ when forwarding images.
  5. WordPress
    When you upload an image to your Media Library, by default, WordPress creates 3 physically different, proportional versions of your image: thumbnail, medium, and large sizes. (These default image dimensions need to be adjusted to coordinate with your theme layout) Be careful inserting full-size images into your website.
    You can further reduce image sizes with WordPress Plugins – such as EWWW Image Optimizer, Smush, TinyPNG. My favorite web host, SiteGround, even includes an image optimization option with its SG Optimizer performance Plugin.
    And, if your WordPress Theme supports it, WordPress 4.4 added native responsive image support by including srcset and sizes attributes to the image markup it generates. Browsers can now choose to download the most appropriate size and ignore the others — potentially saving bandwidth and speeding up page load times in the process.

Beautiful WordPress Websites

screenshot Seattle home consignment store website

Visual Design by Joan van den Berg
WordPress Theme Development by Scott Marlow

A fine visual refresh for a fine Seattle furniture consignment store.

Trish Wills’ new mobile-friendly website features easy-to-update product Posts that customers can browse by category. A modern, minimalist design draws visitors eyes to product details, with descriptions in a readable, classic serif/sans-serif typeface.

The previous non-mobile responsive site had been developed with a custom database that store employees could no longer update in-house. The new WordPress site allows any staff member to publish and edit new inventory as it arrives.

With a homepage size of 223 Kb, and only 23 web server requests – this store site scores in Google’s 90th percentile for page load speed.

WordPress: A World of Difference

screenshot Cipalla Communications website

Copywriting by Rita Cipalla
Visual Design by Joan van den Berg
WordPress Child Theme Development by Scott Marlow

An overdue mobile-responsive website upgrade for my writing colleague, Rita Cipalla.

For this website redesign, we chose to skin an existing template WordPress Theme, Argent, by Automattic. The Argent Theme is based on _Underscores, so theme skinning is fast and straightforward – and the final product is guaranteed to be compatible with WordPress software and Plugins.

Overall Page Size is a lean 584 Kb, ~25% the industry median page size, with only 32 web server requests. As a result, page load speed is well optimized for mobile devices.

The site features Rita’s custom travel photographs for an authentic look. A classic combination of custom serif and sans-serif fonts are typeset in very readable line widths, with bold red and yellow call-outs for emphasis. And, unlike her previous static HTML site, Rita can now easily add and edit portfolio and blog content.

I love it! Thank you so much.

WordPress. A Powerful Content Management System for Attorneys

screenshot F2VM medical defense attorneys website

Team: Pinpoint Strategic Communications, Scott Marlow, Charles Cotugno

F2VM (Fitzer, Fitzer, Veal, McAmis) is one of Washington State’s premier trial law firms for medical professionals. Pinpoint spearheaded a rebrand for the law firm and a redesign for their outdated and non-mobile friendly website.
The new site features Charles Cotugno’s custom photography taken on location at the law firm and  in the Tacoma Federal Courthouse. Unique page templates were created with the new Gutenberg Block Level (HTML) Editor, introduced with WordPress 5.0. These layots include full browser-width images and blockquotes for an on-point online identity.
Scope of Work
brand discovery
project management
creative strategy
art direction
color palette development
front-end web development
performance optimization
photography
security hardening
search engine optimization
visual design

Performance Metrics

Benchmark tests show the newly launched website outperforming 90% of tested sites.

PerformanceWordPress SiteBenchmark
Google Mobile Speed:98
Google Desktop Speed99
Pingdom87
WebPageTest Speed Index1,239median = ~4,493
top 10% = <1,388
YSlow84average score = 70
Web Page Size448 KbIn 2018, average page size = ~2.4 Mb
median page size = ~2.1 Mb
Web Server Requests26< 40 – 60 recommended

 

 

Experienced, Professional WordPress Web Development

screenshot Colorado psychiatrists website

Copyediting by Rita Cipalla
Visual Design by Joan van den Berg
WordPress Theme Development by Scott Marlow

A long overdue mobile-responsive website upgrade for Colorado’s Rocky Mountain Neuropsychiatrists. RMNA has specialized in medication management for general psychiatric disorders – such as anxiety, depression and bipolar disorder – for Colorado Springs residents since 1999.

RMNA’s decade-old static HTML site no longer reflected the quality of their service business. The new, cleaner visual design is more inline with their brand identity. Contact information was prioritized for ease of use. Regional landscape stock photos give the light content a positive lift.

Overall Page Size is a lean 489 Kb, ~25% the industry median page size, with only 31 web server requests. As a result, page load speed is well optimized for mobile devices.

My specialty is accessible, mobile responsive, user-friendly front-end web development for Content Management Systems – such as WordPress. And since 2005, I have provided expert, professional marketing support to help you regain control over technology.