Making Custom WordPress Website Design
More Affordable for Small Businesses

Laura has an abundant balance of integrity, professionalism and creativity that make her the perfect fit for website design. She immediately understood my desires for a professional, informative and yet user-friendly website for my law firm and made the process so easy, efficient and affordable. And now I have the website that I always wanted, designed so that I can make changes and additions hassle-free. What an important first impression your website is – it reflects who you are and what you do. Laura acutely understands the importance of capturing your identity in your website. And I could not be more pleased the result.

Jim Gianelli
Gianelli & Polley Law Office

Sizing website images & why it matters

How fast your site loads is important. Visitors don’t like slow sites, and they often won’t wait for slow-loading pages to load before they move on. One of the things that slows down a website is using large images — and by “large” I mean file size. The file size of an image is the digital size of the image file, measured in kilobytes (KB) or megabytes (MB). Images can be identical in dimension (width and height, in pixels), but be vastly different file size depending on the image format, compression/quality, etc. Sizing website images correctly is an incredibly important part of maintaining your site. With that said, I wanted to take a minute to offer some basic guidance on sizing images for your website.

Understanding file format and how it affects File Size: JPEG vs PNG

screen-saving-jpgJPEG: As a rule, I recommend using compressed JPEGs in your site. They are dramatically smaller than PNGs (which I’ll talk about in a bit).

When saving an image in JPEG format, users have the choice of compression vs quality. More compression equals a smaller file size, but you lose quality. Likewise, less compression equals a larger file size, but gives you higher quality. The key is finding a balance for the image you are saving so that it looks good and has a small file size.

You’ll find that you can use quite a bit of compression for images that do not contain text. As soon as you are saving a graphic that includes text, you will begin seeing the quality difference dramatically as you increase compression.

Another quick note about JPEG is that they are “lossy”, meaning if you resave the same image multiple times for some reason, the image quality will degrade with each additional save.

PNG:  PNGs are always significantly bigger than JPEGs, so why would anyone use them? The main reason is that they support transparency, whereas JPEGs do not.

In this example below, the first image shows the logo and header color as PNGs. The logo displays without a background and you can see the background image through the transparent header color.

header-example1

Let’s look at that same image done with JPEGs below. A JPEG does not support transparency, so you see the logo with a white box behind it. Likewise, the header color displays as solid rather than the soft, transparent way it displays above.

header-example2

Another reason that you might use PNG is because that format supports lossless data compression so you can save the image over and over and over without losing any of the quality. But check out this example of file size and quality for a compressed JPEG vs PNG below. Can you see a difference in the two images? Is that difference worth the huge increase in file size?

TOP IMAGE = PNG = 426 kb
BOTTOM IMAGE = JPEG (compressed to low/medium) = 41 kb
(Difference = 385 kb!!!)
This image is a PNG - File size 426kb
This image is a PNG – File size 426kb
This image is an optimized JPEG - File size 41kb
This image is an optimized JPEG – File size 41kb

So, to sum that up, use JPEG unless there is a reason you need transparency in an image, in which case you would use PNG.

Understanding Image Dimensions

Images with larger pixel dimensions will equate to larger file sizes, so it’s really beneficial to size your images down before you upload them to your site. Pixels are a unit of measurement — like inches. There is no firm rule on how many pixels the height and width of an image should be, but in my experience, there is no reason for images that are going to be used on pages & posts to be uploaded at more than 1000px max dimension. In comparison, pictures right off your camera will likely be between 2500px and 4000px wide, so if you upload those without sizing and optimizing, they are enormous files.

You should try to size images down based on how they are going to be used within the site. In other words, you wouldn’t want to upload a 1000px wide photo to use on a page where it is only going to appear at 400px wide.

In this example below, the images look exactly the same, right? They aren’t. The top image file is 300px by 225px and is 16kb. The bottom image file is huge, but sized within the WordPress page editor to display at the same size as the top image. That file is actually 1500px by 1125px and 150kb. That’s a difference of 134kb for one image. You can see how that can add up and affect your page loading even though you don’t actually see the difference on the front end.

This image is 300px by 225px (16 KB)
This image is 300px by 225px (16 KB)
This image is actually 1500px by 1125px SIZED IN WORDPRESS EDITOR to display as 300px by 225px (150 kb)

When you upload an image, WordPress does create additional (smaller) versions of that image for you to use on your pages, but WordPress does not compress images when it creates these. It’s important that you have uploaded a sized and optimized image so that the smaller images that WordPress creates are not larger files sizes than they need to be.

Also, often as you see in the example above, we place an image on a page or a post in full size and size it down manually in the page editor. Or in the case of image rotations/slideshows, those use the full size image that you’ve uploaded. Super important in those cases that you are not placing an enormous image on the page.

How Do I Size & Compress Images For My Website?

Photoshop Elements is a great, affordable program to use for sizing & compressing your images for your website. Their “Save For Web” feature allows you to size and compress in one place. Read their tutorial on Optimizing Images.


Hopefully these tips help you understand a bit more about why sizing website images and optimizing them with the correct file format/compression is important.

Sizing website images & why it matters

How fast your site loads is important. Visitors don’t like slow sites, and they often won’t wait for slow-loading pages to load before they move on. One of the things that slows down a website is using large images — and by “large” I mean file size. The file size of an image is the digital size of the image file, measured in kilobytes (KB) or megabytes (MB). Images can be identical in dimension (width and height, in pixels), but be vastly different file size depending on the image format, compression/quality, etc. Sizing website images correctly is an incredibly important part of maintaining your site. With that said, I wanted to take a minute to offer some basic guidance on sizing images for your website.

Understanding file format and how it affects File Size: JPEG vs PNG

screen-saving-jpgJPEG: As a rule, I recommend using compressed JPEGs in your site. They are dramatically smaller than PNGs (which I’ll talk about in a bit).

When saving an image in JPEG format, users have the choice of compression vs quality. More compression equals a smaller file size, but you lose quality. Likewise, less compression equals a larger file size, but gives you higher quality. The key is finding a balance for the image you are saving so that it looks good and has a small file size.

You’ll find that you can use quite a bit of compression for images that do not contain text. As soon as you are saving a graphic that includes text, you will begin seeing the quality difference dramatically as you increase compression.

Another quick note about JPEG is that they are “lossy”, meaning if you resave the same image multiple times for some reason, the image quality will degrade with each additional save.

PNG:  PNGs are always significantly bigger than JPEGs, so why would anyone use them? The main reason is that they support transparency, whereas JPEGs do not.

In this example below, the first image shows the logo and header color as PNGs. The logo displays without a background and you can see the background image through the transparent header color.

header-example1

Let’s look at that same image done with JPEGs below. A JPEG does not support transparency, so you see the logo with a white box behind it. Likewise, the header color displays as solid rather than the soft, transparent way it displays above.

header-example2

Another reason that you might use PNG is because that format supports lossless data compression so you can save the image over and over and over without losing any of the quality. But check out this example of file size and quality for a compressed JPEG vs PNG below. Can you see a difference in the two images? Is that difference worth the huge increase in file size?

TOP IMAGE = PNG = 426 kb
BOTTOM IMAGE = JPEG (compressed to low/medium) = 41 kb
(Difference = 385 kb!!!)
This image is a PNG - File size 426kb
This image is a PNG – File size 426kb
This image is an optimized JPEG - File size 41kb
This image is an optimized JPEG – File size 41kb

So, to sum that up, use JPEG unless there is a reason you need transparency in an image, in which case you would use PNG.

Understanding Image Dimensions

Images with larger pixel dimensions will equate to larger file sizes, so it’s really beneficial to size your images down before you upload them to your site. Pixels are a unit of measurement — like inches. There is no firm rule on how many pixels the height and width of an image should be, but in my experience, there is no reason for images that are going to be used on pages & posts to be uploaded at more than 1000px max dimension. In comparison, pictures right off your camera will likely be between 2500px and 4000px wide, so if you upload those without sizing and optimizing, they are enormous files.

You should try to size images down based on how they are going to be used within the site. In other words, you wouldn’t want to upload a 1000px wide photo to use on a page where it is only going to appear at 400px wide.

In this example below, the images look exactly the same, right? They aren’t. The top image file is 300px by 225px and is 16kb. The bottom image file is huge, but sized within the WordPress page editor to display at the same size as the top image. That file is actually 1500px by 1125px and 150kb. That’s a difference of 134kb for one image. You can see how that can add up and affect your page loading even though you don’t actually see the difference on the front end.

This image is 300px by 225px (16 KB)
This image is 300px by 225px (16 KB)
This image is actually 1500px by 1125px SIZED IN WORDPRESS EDITOR to display as 300px by 225px (150 kb)

When you upload an image, WordPress does create additional (smaller) versions of that image for you to use on your pages, but WordPress does not compress images when it creates these. It’s important that you have uploaded a sized and optimized image so that the smaller images that WordPress creates are not larger files sizes than they need to be.

Also, often as you see in the example above, we place an image on a page or a post in full size and size it down manually in the page editor. Or in the case of image rotations/slideshows, those use the full size image that you’ve uploaded. Super important in those cases that you are not placing an enormous image on the page.

How Do I Size & Compress Images For My Website?

Photoshop Elements is a great, affordable program to use for sizing & compressing your images for your website. Their “Save For Web” feature allows you to size and compress in one place. Read their tutorial on Optimizing Images.


Hopefully these tips help you understand a bit more about why sizing website images and optimizing them with the correct file format/compression is important.

It was such a pleasure to work with Laura Bowly on the new website for our organization. She started with a comprehensive questionnaire and built a beautiful, professional website for our agency. She worked closely with us throughout the process, checking in frequently about details and soliciting feedback, while always respecting our limited staff time and availability. Her communications were focused and clear, and she was more than willing to provide education and guidance when we encountered areas where we were not sure how to proceed. Always patient, she helped us get focused and move forward, and completed the project ahead of schedule and beyond our expectations. The new CNVC site, nonviolentcommunity.org, is amazing and has greatly enhanced our ability to reach those we serve and communicate with our supporters. We have truly enjoyed our experience working with Laura Bowly and we highly recommend her web design services!

Willow Thorpe, Operations Director
Center For a Non Violent Community