Loading
Abi Travers

My Blog. Full Stack Software Engineer. Ex-Growth Hacker.

Talking Through a Logical Ruby Challenge

As part of the Makers Academy  pre-course week 2 we have been tasked with working through the Ruby-Kickstarter github tutorials by Josh Cheek.

I decided to go through my thought process on one of the challenges I got stuck on, 1:6, in the hope that this may help me discover the solution. This post is about how I went about trying to understand the challenge and what I am still confused about. I have ordered this post as the way I looked at the information, worked through it in a lineal time format.

So hold tight as we ride through the waves of my mind … and apologizes if i stray off on a visual tangent ..

 

Question Asked:

 

You'll get a string and a boolean.

When the boolean is true, return a new string containing all the odd characters.

When the boolean is false, return a new string containing all the even characters.

If you have no idea where to begin, remember to check out the cheatsheets for string and logic/control

# odds_and_evens("abcdefg",true)    # => "bdf"

# odds_and_evens("abcdefg",false)   # => "aceg"

 

So two things that are seemingly unrelated are now bound together by a method I am to create …

My solution:

def odds_and_evens(string, return_odds)

  if return_odds

   string.size.times do |n|

   next if n % 2 == 0

   print 'n'

  end

   else

    string.size.times do |n|

    next if n % 2 != 0

   print 'n'

  end

end




odds_and_evens("abcdefg",true)

odds_and_evens("abcdefg",false)

Initial Issues:

  1. I don’t understand why this does not ‘print’ the answer to the screen when I call the method odds_and_evens(“abcdefg”,true).
  2. When I run the rake test on the file I get the following error messages.:

 

syntax error, unexpected end-of-input, expecting keyword_end

rake aborted!

Command failed with status (1):

 

The Given Solution:

 

def odds_and_evens(string, return_odds)

to_return = ""

string.size.times do |index|

next if return_odds && index.even?

next if !return_odds && index.odd?

to_return << string[index]

end

to_return

end

 

My thought process, the steps it went through:

We want to design a method which takes two arguments, one is a string of characters the other is a true or false statement.

The first step is therefore to create this method name it ‘odds_and_evens’ and pass it two arguments ‘string’ and ‘return_odds’.

def odds_and_evens(string, return_odds)

We want this method to return the string, given to it, in an altered way.

We need some mechanism to return the string at the end.

We will have to split this string into an array of it’s characters in order to count which index number each character sits at. So we need something which converts it back to a string.

By putting a variable set as ‘to_retrun’ then assigning it a value of an empty string we can then push the characters of the original string which has passed through our if argument, back into it.

to_return = ""
to_return << string[index]

We want it to split up this string into its characters. So the string is now an array of it’s characters.

 

The index number of the character in a string is what will determine if it is odd or even. Index numbering starts at 0. All the characters with an odd index number are add, all the characters with an even index number are even.

The method .size returns the character length of a string.

string.size

.times do is a loop. What this does is say ‘for’ a certain amount of times (we have assigned this number with the .size method) ‘do’ the following block of code.

string.size.times do |index|

What I am still confused about here:

Does .times do or .size split a string into an array? I Have tried to look for this answer but cannot find it.

Potential answer:

We not need to split the string into its characters, do we simply need to assign a number to each character in the string depending on it’s place and act on those numbers … drawing the string back according to those numbers.

We need to do something different to the string depending on weather the returns_odd variable, is true or false.

We need an if statement which looks at the returns_odd varaibale and the split string. We need a Boolean here.

&& index.even?
&& index.odd?

If it is true then we need to return only the characters at the odd index number.

If returns_odd is not an object, i.e. it is false, we need to return only the characters at the even index numbering.

The string is passed through the loop block of code.

string.size.times do |index|

next if return_odds && index.even?

next if !return_odds && index.odd?

The name  ‘index’ is given to the block of code as a placeholder for every character in the string. So on the first loop around the code it represents the character at index 0, then on the next, the character at index 1 and so on.

The block of code then assesses if the character which is now the ‘index’ has an odd or even index number.

 

I need to go through the loop again:

When the string is split up into its characters, an index number is assigned to each character according to it’s original string, starting with 0:

string.size.times do |index|

next if return_odds && index.even?

next if !return_odds && index.odd?

 

So for size(the arrays’ length or size) number of times each character is assigned to the ‘index’ placeholder.

The character at the ‘index’ placeholder is then put through the argument;

Is the returns_odd object true? If so pass over all those characters whose index number is even.

If retruns_odd is not an object, give me back all the characters which appear at an even index number. Do not give me back any characters which have been assigned an odd index number.

At the moment these characters are still an index number.

We need to return the string which has been through the the argument.

We push this new ‘string’  into the empty string variable we set at the beginning.

to_return << string[index]

The string is now an array which has the elements assigned to ‘index’. As it is displayed as string[index].

 

Walking through this solution in depth, explaining the coding solution to myself in english has allowed me to really understand what is going on with it. As a beginner looking at a seemingly difficult logical problem can seem very daunting if you don’t understand what it is saying. I highly recommend talking, (or writing), yourself through some code. It helped to understand the logic and hopefully apply it in future. Ruby seems like a game of cards, or musical instrument, the more you play the better you get but this only comes with practice …

(Apologize to those who are simply trying to learn ruby and are not interested in the shameless plug of my photographs).

 

Git IS a Version Control System | But What Does This Mean?

how does git help me

 

It is week one of the pre-course at Makers Academy and I am working through our Git and Github tutorials.

One of the learning objectives is for us to be able to explain how git is a version control system. I thought I would delight the whole two readers I get to my blog (thanks mum and dad), by answering that question here:

What is version control?

Version control systems are ones which record changes made to files or a group of files in a directory.

YOU choose when to make these bookmarked changes. Once you have done this you can always go back to that version of the file / files.

This is useful on an individual or group basis.

As an individual it allows you to track your changes. You can compare a file against it’s earlier version so see where you may have gone wrong or how your mind was working when you made improvements.

It is very useful if you are worried a change you want to make may break something and cause it not to run the way you wanted. – Which is something which happens a lot when coding!

It allows effective collaboration!

It means that you can work with someone else at the same time on the same project but (here is the ground breaking part) on your own computer or work station!!

 

What is so great about being able to work from two computers on the same project… at the same time …without having to worry about replicating the work-load or clashes?

I hear you ask … :-/ (and by you I mean mum .. as I know dad has drifted off by now)

git merging files- version contro

 

This is incredible for two reasons!

Lean Development – like an efficient ford assembly line people can work on the exact same project at the same time without having to wait for someone else to complete their part of the project.

It is like building a house by building the roof and the floor at the same time, even though there are no walls!

git hub version control building a house analogy

This also means that a mistake in one doesn’t delay or immediately effective another part. The mistake can be more efficiently identified and solved!

See told you it was mind blowing …

Better still you can both work on the roof together .. in fact everyone can work on the roof at the same time! Yay…Here is another picture of a house to celebrate …

git house analogy version control

 

To do it like this you start with a master copy which you pull to your computer. As you edit and add on parts you update it in a centralised system. Before adding this to the ‘master branch’ everyone on the project can check they are happy.  If someone else has edited the same bit but differently you can quickly identify this and merge your changes quicker.

Think of this as two people editing an article, both correcting gramma and spelling but both doing it on the original document. When they bring these together you would have to check both documents against the original individually and it could lead to a waste of time as both editors are making the same spelling corrections.

An additional note to make here is git is NOT a centralised version control system. Versions are not held on one central server or system .. all versions are equal. The client computer (thats mine and yours) doesn’t just look at snapshots of files; they fully mirror the repositories!! This is a flat non-hierarchical system which allows you to collaborate as an equal !!

equality in git version control

 

So there you have it, my explanation of how git is a (de-centralised) version control system. Thank you for reading if you are still here. I feel like here is a good time to add the disclaimer that my parents don’t even read this blog…. 🙁

Learning Ruby The Hard Way | How I Beat the Un-stoppable Error Messages

Trouble shooting exercise 25 of learning ruby the hard way by zed

I have enrolled at the intense computer programming bootcamp, the Maker Academy, next month. To get a head start I thought I would work through Zed Shaw’s Learn Ruby the Hard Way book.

Exercise 25 seems to be testing my problem solving skills so I thought I would write a post documenting how I worked out then fixed my error messages. This post is aimed at newbies to the programming world as I imagine it is very basic things which I am getting wrong.

First Script – The Start of the Problem 

This was my first attempt at writing exercise 25’s script in my editor:

exercise 25 of Learn ruby the hard way by zed shaw error messages

 

 

 

 

 

 

 

 

 

 

 

 

When I ran this in the terminal I got the following error message:

ex25.rb:2:in `<main>’: undefined local variable or method `ex25′ for main:Object (NameError)

The first thing I did was google the error message.

Solving the Error Message with Google 

I found an answer on Stackoverflow. It told me I was accidentally typing Alt + Space on my Mac, therefore creating non-breaking space. That this is considered by Ruby as part of the variable name as opposed to the whitespace it was intended to be.

It gave two solutions to this problem:

1.  Remapping Alt + Space to space to stop this typo occurring again.

2. Highlighting invisible characters in text editor to immediately realise the typos.

 

The preference seemed to be for solution 2  so I thought I would try this way first. It seemed the most simple and quick to fix. I wanted to rule out the off-the-shelf issue to my broken code.

Highlight invisible characters in my text editor – Part 1

Next I googled how to highlight invisible characters with my text editor, Sublime Text editor 2.

Turns out this is supposed to be a default feature of my text editor. Every time I highlight text I am supposed to be able to see little white dots like the image below (look close they are there in the empty spaces):

how to highlight invisible characters with Sublime Text editor 2

 

 

 

 

 

 

 

 

So I highlighted the text and nothing happened:

textselected in sublime text editor 2 learn ruby the hard way ex25

 

I decided to park the problem of ‘non-breaking’ spaces here for now and try and solve my error message an easier way. I am relatively new to coding so the next solution for finding ‘non-breaking’ spaces, fixing the preferences or default key assignments in Sublime Text editor, did not seem like the easiest way to solve my problem.

Googling the exercise itself

The next thing I did was google ‘Ex25 learn Ruby the hard way’ to see if anyone else was having the same issues as I was. I found a blog with the exercise typed out. I compared our files word for word on my screen.

I could not SEE any difference between our files (indicating the hidden non-breaking spaces may be what is causing my error).

However I needed to rule out the idea there was a typo I couldn’t spot somewhere, so I typed out the whole file again. Figuring this was a quicker way to get to the solution.

My second file worked when I ran it in the terminal. No error message.

Here is the second file:

Script for exercise 25 learn ruby the hard way. no errors

I was intrigued where I went wrong with the first file still, so I compared them line for line.

Comparing the working script to the one with an error message

Compared them on my screen and noticed two differences which I fixed one at a time.

exercise 25 of learn ruby hard way. Errors

1.  When the earlier functions were called in later ones eg.

def ex25.print_first_and_last(sentence)

words = ex25.break_word ..

The ex25.break_word function looked like it had not been recognised in the error script (one on the right) whereas the Ex25. appeared blue in the other script (left).

The most obvious reason I could come up with  was that the ‘e’ wasn’t capitalised. So I changed all Ex25’s in the broken script to a capitalised e.

exercise 25 of learning ruby the hard way, broken script

 

I ran the script but still got the same error message:

ex25.rb:2:in `<main>’: undefined local variable or method `ex25' for main:Object (NameError)
2. The next easy fix I noticed was the file name and the function name in the broken script were the same but in my new script I had named the file EX25b.rb.

Maybe it was this difference in naming which was responsible for the error?

Nope ..

ex25.rb:2:in `<main>’: undefined local variable or method `ex25' for main:Object (NameError)

Had I read the whole of the exercise in Learning Ruby the Hard Way I would have seen this wasn’t the answer:

“The Ex25 module doesn’t have to be in a file named ex25.rb. Try putting it in a new file with a random name then import that file and see how you still have Ex25 available.”

So I decided to go back to the first solution, non-breaking space as I had now exhausted the easy options and couldn’t for the life of me  see any difference between the error or the correct script.

Highlight invisible characters in my text editor- Part 2 

I read how to do this here.

1.  Open the ‘preferences’ within Sublime text editor & select ‘key bindings’.

Preferences, key bindings within Sublime text editor 2

 

 

 

 

 

 

2.   Insert into the left side, the ‘user’ tab the following code:

{

"keys": ["alt+space"],
"command": "insert_snippet",
"args": {"contents": " "}

}


User tab of key binding sublime text editor

code inserted sublime text editor changing key bindings to show up alt + space bar on macs

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3.   Saved then re-opened the original (broken 🙁 ) file.

Sure enough there was the accidental Alt and space bar non-breaking space:

Alt and Space bar error on a mac and sublime editor 2

 

 

HALLELUJAH .. I thought.. I have finally fixed my old script…….

I ran it again and I STILL had the same error message!

Here is where I probably should have thought:

“I got it correct once and managed to work through the exercise and complete it. I will just call it a day and not worry about the file which is returning an error message”.

But I am too curious / stubborn to settle for just allowing the error to hang over my first script.

I ran irb in the terminal.

I ran the file I had got correct again & the file with the error message:

Error message in terminal. Incorrect Ex25 of learning Ruby the hard way

I tried to work out what was the difference between the two files.

Maybe it was the directories they were saved in?

I check and sure enough they were saved in different directories.

So I saved the error file in the same directory as the file that worked…. STILL the error message!!

I could see no other difference so I ….

Copied and pasted the text from the working file to the error file.

Then something terrible happened!

BOTH the files stopped working!!!!

The same error message appeared for the first file and now the working file was returning ‘false’ when I ‘required’ it with irb:

Ex25 script from learn ruby the hard way returning false in the terminal

Possible cause of this problem:

Too many files with the same or similar name in the same directory?

I deleted all but one… And like magic ..

IT WORKED !!!

I ran the working script for Ex25 in the terminal and followed the instructions on how to use irb to call it’s functions.

Here are my results and my explanation of what is happening:

The correct script for Ex25

Script for exercise 25 learn ruby the hard way. no errors

Running the script in command line ‘irb’

Ex25 in the terminal correct

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I have labeled the points where I had to think a bit about how it was working. Here is my explanation:

1.   Prints ‘wait’  because the function is acting on the ‘words’ array which is not sorted. The sorted array is called ‘sorted_words’.

2.   ‘Words’ array has had the first and last (“all’ and ‘wait’ ) values shifted off  in the print function.

3.  Calling on the ‘sorted_words’ array, not the ‘words’ array which has the missing values. Therefore ‘all’ is still in the array.

4….Seems to be missing from the picture … So I clearly deemed it irrelevant then therefore i will do the same again now..

5.  Using the original ‘sentence’ variable and passing this through the function. It is breaking this sentence variable into an array every time it encounters a space. Then using Ex25.sort_words function to sort this array of words.

6.  It is taking the original variable ‘sentence’, breaking it into an array of words then printing the first and last value of that array.

 

So we have now come to the end of my struggling with exercise 25 of Learn Ruby the Hard way. I hope you have enjoyed and found useful  my higgledy piggldy problem solving which eventually resulted in me beating the error messages given by running my script.  Please do contact me if you are by a slim chance reading this & need any help understanding it.

Enjoy, 🙂

How to Run A Ruby File In Terminal | On A Mac

Bash: “command not found”

Where is my Ruby file and how have i forgotten how to run a .rb file in terminal already?

Why is bash not finding and loading my ruby file

After having taken a few days off programming and learning Ruby to do some freelance marketing work something terrible seems to have happened. I have forgotten the most simple of terminal commands … How to run a Ruby file.

So in getting myself quickly up to scratch again I thought I would write a quick guide for everyone who is getting started (or started again in my case) with learning Ruby and Terminal.

Now, if you are a complete beginner, you may be thinking:

“What is ‘Terminal’ & why are you telling me to use it? I thought I was supposed to be using ‘Command Line’? “

 

Most Ruby scripts do not have graphical user interfaces then they are ran using the command line or command prompt. The command line or prompt as far as I am aware, can only be accessed though the terminal.

How To Find The Terminal On A Mac 

1. Click on the search icon on the top right hand corner of your screen. The Spotlight search bar will then appear.

spotlight search button on a mac - how to use it to find terminal

 

 

 

 

 

2. Type ‘Terminal’ into the search bar.

3. The terminal will pop up.

Alternatively:

1. Click on ‘Finder’ icon in the dock.

finder icon in the mac doc.

 

 

 

 

 

 

 

2. Go to the ‘Applications’ folder on the right hand hand side.

3. Search in this folder for the Terminal.

Creating Your Ruby File 

At this point I am going to assume you have been learning ruby so have written a few ruby documents before. However if not follow the simple steps below:

1. Download or open your text editor. I use  Sublime text editor, which is a good one for beginners like myself.

2. Create a ruby file by typing into your text editor:

puts “Hello Wold”

3. Save this file as ex1.rb – the important part of this is the .rb this must be at the end of any file for your computer to recognise it as a ruby document.

Installing Ruby To Your Mac

On a Mac Ruby should be pre-installed. Check this by typing into the terminal:

ruby -v            (the space after ruby before ‘-‘ is important)

You should get a message similar to:

     ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-darwin16]

2.4.1 may not be the same number you will see as the pre-installed ruby does not tend to be the latest edition. I advise updating your ruby and checking you are running the latest version. How to do that can be found in these guides:

This is the guide I used for installing Ruby & Rails.

This is a simple guide for Ruby  – For beginners stop just before the installation of a database as that isn’t necessary for you for now.

Running Your Ruby File 

When you open your terminal you should find some script already there. It will most likely contain information on your computer and username then be followed with your prompt.

The prompt is usually a single character: $ or #.

1st | Make sure you are in the folder that your .rb file is saved in. To do this input:

pwd (print working directory)

to show the folder you are in.

I save all my .rb files in a folder I have named “Ruby work”. This is usually not the folder my command line starts in so I change it to this folder (or directory) using the command:

 cd (change directory)

I type into the command line:           cd Ruby work

2nd | (Optional) Check the your .rb file is in the folder (directory) you have changed to by typing:

ls (list directory)

into your command line. This will give you the full list of all the files in the folder.

3rd | Run your ruby file by typing into your command line:

ruby ex1.rb 

Do not forget to type in ‘ruby’ before your file name. This is because you need to tell the terminal that you are wanting to use the Ruby programming framework to run your file.

If you have used the example .rb file you should see the following script appear in your terminal:

Hello world.

Getting An Error Message?

why can't i run a ruby file in my terminal

 

If you are getting an error message, something along the lines of:

syntax error, unexpected keyword_end, expecting end-of-input

that means there is an issue with your code in your .rb file, not the terminal or the running of the file itself.

How To Stop Terminal Running Your Script

If you have gone wrong somewhere you may need to stop the terminal or go back up to where you started. You can do this simply by closing and re-opening the terminal.

Or you can force a quit “kill” by pressing:

“Ctrl” & “C” at the same time.

 

That is all for me for now. Hope this helped you get started or get back to running ruby files within your terminal. If you have any questions while learning ruby then send me a message.

Thanks for read 🙂

How to Compress Images in Bulk | Optimising Images for the Web

One of the main culprits slowing down your website load time can be your image size.

The speed your website loads is one of the most important factors for SEO. It effects how Google ranks your site. This is because user experience is reduced and frustrated if your website takes a long time to load. Google and the other search engines want to deliver the best possible user experience at all times so will penalise slow loading pages. The slower your site load speed the more likely your site will rank lower.

As a rule of thumb – it should not take longer than 4 seconds for your page to load.

Not only will Google downgrade a slow page, so will your users and you will suffer from a very high bounce rate if your load time creeps over the 4 second rule. This means you will lose valuable customers.

As a photographer, I know too well that a good user experience is also more likely to happen if you have great high quality images on your site.

The best solution for user experience and SEO is therefore a combination of a fast page load time and high quality images. But how do you achieve this? Make sure all images are optimised and compressed to the perfect size. I will walk you through exactly how to do this in this article.

I would usually use Photoshop to compress my images one by one. However, there are quicker options if you need to compress and resize images in bulk. A better tool to use for this is XnConvert.

For me the best way to learn is to first understand what is going on and why. So first, I will walk you through some basics of image compression.

What is an Image?

 

There are two basic types of image files: Bitmaps & Vectors.

example of the difference between Vector and bitmap image

Bitmap Images

Bitmap image files are assortments of many coloured pixels. A pixels is is the smallest controllable element of a picture when it is on a screen.

Most photographs, especially high resolution ones, are Bitmaps.

Bitmaps are generally speaking the only images which need to be compressed.

Think of a bitmap image like a mosaic. As long as this image isn’t enlarged or zoomed in on too much then the image appears as it should, smooth and grainless. But when you zoom in too much you can see the individual pixels.

example of a bitmap image. grainy image

Vector Images

Vector image files are sets of co-ordinates which plot out the shapes, lines and colours which appear in a particular position on an image.

They cannot accurately capture variation, texture and tone which is needed to make up a photograph.

They can be re-produced at any size and they don’t lose their quality as they just apply the co-ordinate data to a different scale.

 

vector image example

What are the different types of image compression?

 

There are two types of image compression; Lossy and Lossless.

Lossy Image Compression

Lossy compression throws away from an image information the human eye does not notice.

It uses complex algorithms to determine what is the best data (Pixels) to discard to maintain the same viewing effect.

Examples: JPG, GIF

How exactly does this compression work?

I will use JPEG Image compression as an example to explain this.

JPEG compression splits the image into blocks, applies compression to each block using a discrete cosine transform operation. These blocks are assembled together, like pixels, to form the image.

This is basically the removal of colour information and brightness in areas of the picture where it will be least visible through the human eye. Information is shed from the image. This is why sometimes using JPEG compression can give the image a patchy or blocky look.

Lossless Image Compression

Lossless image compression is a compression algorithm which allows the original image data to be completely and perfectly constructed from the compressed data.

It retains all the original data so the file size is significantly larger than lossy image compression.

Lossless images still remain quite large so are not typically as useful for web compression. The exception is when you are doing this one by one and using something like Photoshop where you can manually reduce the number of pixels.

Examples: PNG, PSD, TIF, EPS.

An Example of a PNG compressed image

An example of an image i have compressed as a PNG file.

Neither of these are the same as file compression which reduces size by grouping any repetitive data together. This works for any type of file but is not suitable for images which you need to display on the web. These files are saved as zip or gzip.

 

Now you have an understanding of  what is going on when images are compressed, let’s move on to how you can compress images to increase your page load time and keep the quality of your images high.

In which way should I compress my Image?

 

JPEG is generally thought of as the best solution for compressing images needed for the web.

You can compress an image by altering one or all of the following:

1. Size

2. Dots Per Inches (DPI)

3. Compression Type –Lossy or lossless image compression

4. File Type

1. Size

Changing the size changes the height and width of the image.

This therefore alters the height and width of the image on the site so is not the best option if it already fit the area as you want. It is also not recommended if you want to keep the image responsive (so that it changes its size with the size of the screen so it still appears at the same ratios).

The ratios that I usually prefer are:

1920 pixels (px) x 1200px when I want the image to look it’s best.

1280px x 1024px for most images

800px x 600px for the smallest and quickest loading image. (This works best for mobile intensive sites)

image compression. optimising image size screenshot

If you have an image where you want to keep the dimensions as they are you can use the chrome plugin Measurelt, to measure which size you need to upload the image (pixels).

2. Dots Per Inch (DPI)

The number of dots per inch is essentially the amount of information per square inch. It is basically the number of pixels per inch. (It is not called pixels per inch because it is an old term left over from the print era.)

The rules of thumb here are:

300dpi is a good size to use for high resolution printing, such as banners and massive advertisements.

150dpi is a good size for A4 size printing.

75dpi is a good size for most websites or applications. Mobile can go even smaller but if you want your site across desktop too then it is best to stick at 75.

3. Compression Type

The compression type means whether you are going to compress an image using a lossy or lossless compression method.

Choosing which one you should use also helps you decide on the file type, as typically they relate to a certain type of compression method. It also depends on which tool you want to use to do the compressions as they all have their own preferred methods.

4. File Type

This is where PNG and JPEG and the types of file compression apply. It is related to the above (compression type).

Two Examples of image change type:

1. PNG (Portable Network Graphics) – Lossless file format

PNG are typically bitmap images.

The most common place I have encountered PNG is when I edit a JPEG or RAW photograph in Photoshop and then export the edited picture at a compressed size in PNG format.

This type of compression works best for simple colour images, images with hard lines, as it is not a vector image.

PNG photographs straight from Photoshop will typically need to be compressed more for the web.

To the human eye at website level, there is little difference between a JPEG image and a PNG image. This is an example of a JPEG image.

To the human eye at website level, there is little difference between a JPEG image and a PNG image. This is an example of a PNG image.

2. JPEG(Joint Photographic Experts Group) – Lossy file format

JPEG are typically vector images.

These type of vector images can be used for complex-colour photographs. The most common place I have encountered JPEG images are when shooting photographs on a digital camera.

JPEG photographs straight from a camera will typically need to be compressed more for the web.

When saving a JPEG you can choose quality or compression. A smaller and more compressed file will lose more quality so you need to decide on the level of trade off. You can play around with these ratios to find the best balance between image qualities and file size.

To the human eye at website level, there is little difference between a JPEG image and a PNG image. This is an example of a PNG image.

This is an example of a PNG image taken on the same camera as the previous JPEG example.

Now you have an understanding of ways we can reduce an image size I will walk you through how to do this with xnConvert.

How to decide which images to compress

 

Typically, you would be able to see the size of an image before you upload it or you know you have a set of high quality images you wish to publish on the web.

If you don’t know which images you have already uploaded to your site which are causing a slow page load time you can use one of the following to find out:

1. Google Page Speed Insights

2. GTMetrix.com

I mainly use page speed for image optimisation as it will actually compress the images for you. You can use this to find the optimised images:

google pagespeed insights tool. image optimisation

 

Click on ‘show how’ to fix and it will give you the file paths of the images you need to optimise & how much you need to reduce them by.

How to compress multiple images with xnConvert (on both a Mac and Pc)

 

1.  Import the files you want to compress.

If you don’t have these files on your pc but you know which ones you want to compress, then you can download them from your C-panel.

If you don’t know which files you need to compress use ‘Google Page Speed Insights to find which ones it suggests.

screenshot of xnconvert importing images

2.  Choose your compression type. – Known in xnconvert as ‘Actions’

 

A. Size

screenshot of xnconvert resizing images for optimising page speed

screenshot of xnconvert resizing images 2 for optimising page speed

B. Set DPI

 

screenshot of xnconvert set DPI for optimising page speed

C. Compression format is not available to choose from here as the tool automatically does it for you

screenshot of xnconvert file format for optimising page speed

D. Select your file type

Here I will select JPEG because I like the ability to choose the ideal mix of size and quality.

 

Output > file format (Jpeg) > Settings

 

E. Remove meta data from the image.

screenshot of xnconvert clean metadata optimising page speed

This gets rid of any un-necessary information and thus reduces the file size.

Save these images to your computer. It is very important here to NAME THEM THE SAME AS YOUR OLD UNCOMPRESSED IMAGES. This will make it a lot easier to replace them on your site.

Then you are good to upload these images.

1. Login to your Cpanel

cpanel login screenshot

2.  Open up ‘File Manager’

file manager screenshot in cpanel

3. Find the folders containing the images which needed to be compressed. Open these up.

If you are not sure how to find these files. They are usually within ‘public html folders’ (this is the root folder where all WP files are kept.) then ‘wp-content’.

You can find the exact file location then from the image URL Google Page Speed Insights gave you.
file manager screenshot cpanel

4. Select ‘Upload’

upload of file manager in cpanel screenshot

Tick ‘overwrite existing files’.

screenshot showing uploading images in your cpanel.

Then ‘select file’. Select the images you have compressed and want to upload.

image upload in cpanel when image optimisation

Then click ‘go back to …’.

When you go back these should automatically have replaced your old large files. This is why it is important to name them the exact same as the old folder.

How to replace your images with the compressed version

 

You can do this two ways. Either one by one on your WordPress site, or in bulk within Cpanel.

I will walk you through the second of these options as it is far quicker when you are replacing more than one image.

How to check the images are loading and look correct on your website

 

To view the results of your site with images optimised you have to either clear your browser caching or view in an incognito window (Chrome) or private window (Firefox). Otherwise it may take a while for your browser to pick up the changes.

The best way to clear your browser caching is with ‘hard reset’ for your site, as opposed to clearing all of your internet caching.

How to ‘hard reset’:

1. Enable inspector mode

More Tools > Developer Tools > Chrome Inspector Mode

how to hard reset in inspector mode screenshot

When you see the inspector window appear right click on the refresh button. Then the below will appear. Click the “Empty Cache and hard reload’.

how to hard reset when in inspector mode. screenshot

Once this is complete it is best to check with the Google Page Speed Insights Tool that all the images are compressed and optimised.

Some final words

Understanding what an image is and how it is compressed should help you to make a tailored decision for how to best optimise your site. The above steps, I believe are the quickest and best way to increase your page speed while maintaining the desired quality of your images. If you follow them you should have a page load speed of below 4 seconds and images good enough to deliver a great all round user experience. This great user experience will in turn help your SEO score and ensure Google and other search engines ranks you higher.

 

Additional – Side Note on WordPress Plugins for Image Optimisation

Optimising your images and page speed this way should hopefully mean you would not have to use word press plugins. The reason I would stay away from plugins is because they can crash your entire site even some time after you have installed them.

However, if you do want to optimise further with WordPress plugins then I would highly recommend you do two things before installing anything.

  1. Backup your site at the server side.
  2. Ensure you have ftp access as it is best to delete the faulty plugins within ftp.