Keeping your Image file sizes small

Keeping your Image file sizes small

In this article as per the description we are going to deal with keeping your image file sizes small. But first some background as to why this is necessary.

Loading, loading loading…. how long do you wait for a website to load before you click back and try another site?

I know I hate waiting for a site when I am surfing. Statistics on the web suggest 3 seconds is safe.

Any more than that and people start to bail out. So why is that? What is taking so long?

There are a number of things that may be responsible for this, many of which we can solve if we are aware of them.

Below is a list and best practice for dealing with them.

  • Poor quality hosting.
  • Visitors to your site have poor bandwidth.
  • Poorly setup websites ignoring best practice when they were made.
  • Landing page for website contains too much data to load before it can render in your visitors browser.
  • Too many large or uncompressed images.
  • there are more, but we can avoid most of them with a little thought and knowledge.

If we did our homework when we started the new website,  we should have selected a reliable Hosting company

We cannot control the quality of our visitors bandwidth and service.

But we can help by keeping at least our landing or homepage clean and well compressed.

We can follow best practice to keep our website up to date and well formatted.

Images, what about Images?

We must manage images, their file types, and image file sizes.

There’s no benefit having an image bigger than the web page that displays it. This can save heaps guys.

So what are the guidelines to follow?

  • The first thing to know is when we upload images to WordPress it stores them in our Media library.
  • The Second thing to know is that WordPress makes multiple copies of each file in different sizes.

Media setings

Above is a shot of the Settings-Media screen accessed in the control panel.

WordPress Core is set to create 3 sizes of any media images we upload plus the original which makes 4 in total.

In this screen you see the default sizes WordPress comes with. You can edit these sizes if you choose to do so.

You can also prevent WordPress from making them by typing zero in the max width and height boxes.

If you do this, ensure you leave the top option for “thumbnail” intact as it is necessary for displaying you media in the Media library.

Themes

The next thing to know is about Themes. We learned about installing or changing themes earlier.

We know the theme customises the appearance and features of our WordPress site.

Consequently many themes also affect the media and image file sizes we use.

Themes may create additional versions of media files, in addition to sizes created by WordPress core.

Further to this, mobile devices are used to view Websites more than ever.

Modern themes have to display well on Desktop computers as well as on tablet and smartphone screens without losing quality.

The term we use for a theme capable of this is “Responsive”.

It means the theme checks to see what device a visitor is using first then serves up a suitable format.

This includes layout and image size for the best experience of your site.(not image file sizes)

This is where additional sizes of your image files get created.

Its something we don’t want to mess with because it is such a big slice of the web traffic these days.

Consider every time we use an image somewhere on our site, we may get the opportunity to change or crop its dimensions.

This creates further versions of the image we are using.

Phew!! are you still with me? Sounds big huh? Don’t worry, you just read the background stuff so the rest of it will make more sense now.

Below you can see a screenshot I took from inside CPanel on my hosting server. It is the folder where images are stored.

Temple-wall-detail

Here you see an image with the filename “Temple-wall-detail.jpg” towards the bottom.

But if you look above it there are ten other versions of it. All with different sizes and dimensions.

This is the point I just explained. So now we know for every image we upload there will be multiple versions created.

Image Compression and keeping your image file sizes small.

We need to keep our website lean, mean, and loading fast while giving the best visual experience we can. Making image files lighter weight is the solution.

To avoid a common point of confusion before we get into file sizes.

Cameras are often listed as being so many Mega-pixels.

This is not the size of the data or file it makes.

Your camera sensor captures light as pixels.

The number of pixels wide multiplied by the number of pixels high tells us how many megapixels are present.

My smartphone camera set on 4032 x 2268px will capture 9.15 megapixels.

Further down this page is the “Temple-wall-detail.jpg” photo I took at that setting with fine detail enabled on the smartphone camera.

The file-size was 5.75mb before I compressed it to use here.

Mega-pixels and Mega-bytes refer to two different characteristic of your image.

file sizes
file sizes relates as how much data in kilobytes or megabytes.

If we upload an image we keep it small to display quick and use up no more space on our server than necessary.

As a guideline we should rarely have any image files in the megabyte category.

If you look at the file sizes in the previous screenshot you see the largest full size version is 245kb.

The original 5.75mb image was compressed in Photoshop and saved as a Legacy web file sizes.

I then uploaded it to this site and WordPress used its default compression to reduce it slightly also.

Image size

relates to the maximum displayed height by the width in pixels.

If we select an image to display, first we consider the size on page where we want to display it.

As a guide you rarely need anything than more 800-1000px width. (even though my example below exceeds that…oops)

So how do we satisfy both needs yet still have beautiful images and a fast loading site?

We use Image compression to remove unnecessary data in image files

Below is an image called “Temple Wall detail”.

The original was taken using a Galaxy S7 Edge smartphone. (amazing camera on these) The filesize was 5.75Mb and image size 4032x2268px.

Way to big to use on the web.

I ran it through Photoshop and reduces the image size down to 1200 x 900 pixels.The data removed reduced the file sizes dramatically.

I then used the “export for web” function which removes further data not perceivable by the human eye or critical to  detail in the image.

The compressed  file is 244.94kb and is actually 1200 x 900 pixels.

If you do the math, the image I uploaded is 1/20th its original size. and still stunning.

The 11 variation add up to 956.13kb (just under 1mb)..

Also the total of the 11 variants is close close to 1/6th the size of the uncompressed original.

Keeping your Image file sizes small. 1

So what do we learn? – Image compression is our friend and well worth the effort.

But how to do it?

You’ll need tools to optimize and reduce images to a suitable size, while keeping image file sizes small.

There are many options both free and paid.

Below are Image editors that can handle a variety of common photo editing tasks.

Free solutions (Basic)

Paint for Windows or Preview for Mac
Both function as perfectly adequate image resizing tools in a “pinch”.

Free solutions (more sophistication)

Gimp download to your computer to provide a free, cross-platform, open-source desktop solution.
Pixlr runs online in the browser. It has a good range of tools for comprehensive photo editing and manipulation.

Commercial solutions,

Pixelmator on the MacIrfanView on Windows

Photoshop cross-platform

Photoshop still remains King of the patch by far.  If you can afford it, I personally recommend it.

The good news is Adobe’s Creative Cloud packages have finally put this best of breed photo manipulation tool within reach of you and me.

For years I could not quite bring myself to pay the premium price to buy the program.

Now Adobe have followed Microsoft Office and offer monthly subscriptions paid yearly.

You get the package you want, and it  automatically updates to the latest version as they are released.

I use the “Photography” subscription.

This gives me Photoshop CC, Adobe Lightroom CC, Behance Network, Adobe Portfolio, Adobe Spark for A$14.29 per month.

If you are serious about your images, and not just for web you cant go past it.

Regardless of the solution you end up going for keeping your image file sizes small.

Bear the following points in mind at all times when resizing your images:

  • Keep your original images safe. Make copies to work with.
  • Working on a copy of the image (rather than the original high-quality source file)
    gives you room to experiment and change your mind.
  • Always be sure to maintain the original image’s aspect ratio without introducing
    optical distortion when resizing.

Cropping (your first task)

Whenever you prepare an image to upload to your website.
Take a moment to think what the message is.
Zone in on that focal point of the image.
Then crop the image to remove any unnecessary or superfluous background.

Cropping achieves two purposes:

  • file sizes will come down, and
  • your images will pack more of a visual punch.

You can’t always do this if it loses context within the image. But when you can, it will reduce file sizes.
It will also focus your reader more to the message in the photo and make it load quicker.

Compressing Your Images (your second task)

Compression is the process of using an algorithm to remove image information that the human eye can’t perceive.

It’s essential in optimization and dramatically decrease image sizes.

This is the second task because you don’t want to be compressing the unwanted data you remove when cropping.

You final file sizes will be smaller by following this order.

JPEGs are typically the best candidates for compression and the most common format of photographic devices.

In contrast to PNGs and GIFs, they use lossy compression which means potentially larger gains in file sizes reduction.

When compressing seek a balance of the lowest file sizes with the highest possible image quality.

PNGs and GIFs also benefit from compression but the reductions in file sizes will be less.

They are more commonly used for graphics than images.

Their key unique attribute is they  support transparent backgrounds.

Image Compression Tools

When it comes to actually performing compression, there are a number of options at your disposal.

If you’re using one of the offline image editors we mentioned earlier, you can simply tweak the built-in Save-as options.

In Photoshop the tools are substantial, including an “export for web” function where you can set quality, size and file format.
This is my personal “go to” solution for keeping image file sizes small.

If you just want  online compression only try these options: –

Shortpixel.com   Shortpixel.com is an online image compression and optimization site.
They offer free (up to 100 images per month) compression and optimization.
They also have plans to cater for larger volumes at a very reasonable rate.

If you prefer a completely automated solution they also have a Plugin you can install on your WordPress site.
It will do the compression/optimization as you upload images to your site.
This can semi automate the task of keeping your image file sizes small.
But it wont crop or resize. Follow the link to the plugin page to see if it meets your needs.

  • The pros:
  • You reduce your workload
  • The optimization is done for you
  • The Cons:-
  • You give up control to a programmed process.
  • Less flexibility on a image by image basis.

Compressor.io    Compressor.io is a free online tool to compress images. It has a high level of compression without loosing the original quality.
It will go a long way to keeping your image file sizes small.

Jpeg.io  Convert any major image format into a highly optimized JPEG. Allows bulk upload, converts, then download files in a zip.

Webresizer.com   Making photos faster

ImageOptim.com  JPEG and PNG compressors


Optimizing Your Images for SEO

SEO optimization is of equal importance to your site’s overall success. It’s simple if you make it part of your Image upload process.

Let’s quickly review the basics:

  • Filenames:Use descriptive filenames that showcase your keywords rather than meaningless generic names.
    For example, use “green-child-bicycle.jpg” rather than “BX8A132E.JPEG”.
    It is easier to give your images relevant names before you upload them to your site.
  • Alt tags:Once in your media library you have further definition you can add.
    Provide a succinct, non-spammy alt tag for each image for reasons of SEO and wider accessibility.
    For example, “alt=’Side view of a child’s green bicycle’”.

Conclusion

 Use the following four-step sequence. Adjust according to the needs of your own particular site as you go.
When finished you’ll be in good shape
Keeping your Image file sizes small:

  1. Always select the right image format for the job.
  2. Crop first and then resize images for maximum visual impact and minimum file sizes.
  3. Take advantage of image compression and visually proof the results.
  4. Take a moment to optimize all images for SEO to pick up some low-hanging fruit in terms of traffic.
    You often rename files when you store them on your computer. 
    Just keep in mind that at some point you may want to use them on your website

Now you are aware of:-

  • the importance of Image size,
  • you are aware of what is involved achieving this,
  • you are better equipped to deal with Images and issues that might arise.
  • You will no longer be doing it blindly.
  • You will understand where to look to overcome any future problems.

Now if you chose to, there is one other way that might suit your preference.
You can add a Plugin which will assist you Keeping your Image file sizes small.

  • you understand what factors are involved,
  • you understand how quality can be retained

That’s all folks. I know there was a lot of content in this post – Keeping your Image file sizes small.
I don’t expect you will remember every scrap of it.

What i do know is the information is in here. When you you are working with your images I’m sure the answers will surface.

 

See you here next Post…….

For our latest posts an topics visit our main Blog here

For an archive or all our topics go here

Don’t forget to Subscribe to receive notifications for new articles and Tutorials as they appear.

 

You can get in touch with this author at: 'brendan@brendan-ryan.com''

Hi, I'm Brendan Ryan. Welcome here. I build, maintain and troubleshoot WordPress based websites for myself and my customers. I regularly help out by psting splutions in beginners forums on Facebook and the like. I hope the posts here demystify some of the process that make a website. I am happy to help if you require assistance. Small things I am happy to guide you. For larger things my rates are reasonable and my service is prompt. Contact me in the form below if you need more information or help. Enjoy your visit. Get me on Facebook Messenger:- m.me/https.brendan.ryan

1 Comment

  1. Is my site Fast or slow? | Brendan Ryan
    June 13, 2019

    […] Images should be a separate topic. I Have and will continue to write Posts about this topic. […]

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top