Northwoods Forest

Optimizing Image Sizes On Your Website

Sydney ShimkoSydney Shimko/Front End Developer
June 11, 20182 min read

Choosing the perfect images for your website is half the battle. The other half involves optimizing those images to give users the best possible experience.

When sites load slow, the first thing we look into is image optimization. Especially as your site evolves over time and image content changes, it’s easy for content authors to lose sight of how well image size and quality is managed.


Images and impact, your biggest asset

The strategy for the launch of your new (or redesigned) website should include a conversation about performance. While performance, or the perceived speed of your website, should always be good, there is a trade-off between super-speed and the inclusion of large and/or plentiful images.

Aesthetically pleasing visual design and compelling photography lead to happy users, return visits to your site, and conversions. Visual design and imagery correlate directly to your brand impression and credibility. They also make your site slower than it would be without them.


Images and page speed, your biggest threat

High-quality images bring obvious benefits, but large, uncompressed images slow down the loading of your site and degrade user experience and brand impression. The trick is to find the sweet-spot between the two competing interests with image optimization.


Image optimization is paramount

Image optimization must be a conscious and continuous component of your web content workflow, but there is no single correct way to optimize images. Optimization factors include file type, compression, pixel dimension, quality, content of encoded data and vector vs raster, among others.


Optimization and file types: Where to begin

If you don’t have access to Adobe Photoshop, many online tools, some of them free, are available for image compression.

With Photoshop, we recommend that you save/export your photographic images as jpg files optimized at 60-80% quality. Choosing to minimize the included metadata (see below) will also be beneficial. File types like png, gif and svg are best for other types of graphics that require scaling, animation, transparency or less color variation.




The image dimensions, width and height, are also important and can vary depending on the demands of your visual design. Your CMS should automatically create a set of multiple image versions at various sizes on upload, configurable to support your design. When you create content pages, it’s important to be mindful of selecting the right image size so you’re not asking the user’s browser/device to download an image file that is larger than is required. Ask us about how to automate this image selection process to ensure your site performance is high and user-centered.

Sydney ShimkoSydney Shimko/Front End Developer

Sydney Shimko is a senior member of the Front-End team and Accessibility Practice Lead at Northwoods. She combines the aesthetics of thoughtful design with semantic, responsive code. She strives to provide the best solutions for client projects, negotiating rapid change in the field of Front-End development and ensuring functionality across an ever-growing variety of devices and new technologies.

Connect with Sydney on LinkedIn | Read Sydney Shimko's Blogs

Related Blog Posts

Eight Things to Consider Before Choosing a Website Font

Fonts and typography are important website design elements. Keep these eight considerations in mind before choosing a font for your site.

Top 10 B2B Website Design Trends of 2018

Design ideas emerge in one year and solidify as trends or fade as fads in the next in every industry, from automotive to fashion to mobile phones. The same applies to both consumer-facing and B2B website design. Get started with this quick survey of the Top 10 web design trends that will carry over from last year or emerge in 2018.

Six Things to Consider Before Redesigning Your B2B Website

Redesigning your website? Here are six things to consider before you start thinking about home page colors or font choices.

View All Blog Posts



Subscribe to our blog for expert tips, insights and analysis on digital trends, best practices, and more.

Share Your Thoughts

The following required items were not provided or are in the wrong format. Please provide the required responses and submit again:

  Please enter your name
  Please enter a valid email
Comment: 250 characters left
  Please enter a comment
Cookie Settings