• info@bizmate.biz

Author Archive

Optimise images for web publishing, improve your user experience and Google pagespeed rating.

Your website speed can hugely be affected if you are not taking care of optimising your web images. Optimisation suggestions are provided if you run a test on pagespeed, the google tool to asses your website speed, usability and more.

Running a pagespeed test is as easy as visiting the page and entering your website address. Also lightspeed can be integrated in your CI pipeline if you have the technical and knowledge resources to run these test, but I will write a post about lightspeed integration in another article.

When testing on your site you will get some suggestions on what images size might be if optimised. Also pagespeed provides other suggestions about lazy loading off-screen images but this article will focus on the the use of the convert command to generate optimised images.

As show on https://developers.google.com/speed/docs/insights/OptimizeImages convert can be used on your machine for instance to optimise JPGs as such

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_optimised.jpg

To avoid manually running the command with each single photo I have published a small script that uses convert to optimise jpg images present in your current folder.

To run the optimisation you can

  1. git clone the repository `git clone git@github.com:bizmate/bash-essentials.git ~/bash-essentials`
  2. cd the folder with your last photoshoot or products folder
  3. run `~/bash-essentials/bin/web-image-optimiser.sh` <- notice you can place the bash script anywhere in your machine as long as you call it when you are inside the images folder

The result will yield new images with the _optimised suffix in their name.

An example of an optimised vs original image

Sicilian flavour original flour image

Sicilian flavour original flour image 41 Kb

Original link to non optimised image and without our website optimisation -> http://www.bizmate.biz/wp-content/uploads/2020/10/IMG_1291_800px.jpg

Sicilian flavour optimised for web flour image

Sicilian flavour optimised for web flour image is only 21 kB compared to the 41kB of the original image.

Original link to optimised image and without our website optimisation -> http://www.bizmate.biz/wp-content/uploads/2020/10/IMG_1291_800px_optimised.jpg

As you can see above this optimisation can make a massive difference. We have seen size reduction of at least 50% in our images and although it might be lower at times it is still a great optimisation.

And can you see any difference between the images?


GitLab Clone Private Repository with Access Token

When you are hosting private code, for instance for a reusable component, on Gitlab you will not be able to clone it unless you have access or are authenticated with the GitLab backend and are authorised to the repository.

Access tokens are a great way to allow an alternative way to clone or add your project as a dependency to a parent project. For example you can use tokens as part of your Continuous Integration pipeline to build, test and deploy your project.

If you add a project in your composer.json ( composer is the de facto package manager most used in PHP) , such as

composer.phar require "bizmate/my-private-package:2.*"

You will see something like

Could not fetch https://gitlab.com/api/v4/projects/bizmate%2Fmy-private-package/repository/archive.zip?sha=..., enter your gitlab.com credentials to access private repos
A token will be created and stored in "/home/composer/.composer/auth.json", your password will never be stored
To revoke access to this token you can visit gitlab.com/profile/applications
Bad credentials.
You can also manually create a personal token at https://gitlab.com/profile/personal_access_tokens
Add it using "composer config --global --auth gitlab-token.gitlab.com <token>"

Using username and password credentials is not a great approach as they are critical information and also because if you have 2FA enabled it might not work. So I created a personal access token and I tried adding it through the composer command but this did not work somehow. This might be due to the complexity also of running a development environment in docker but indeed I still found a simpler way to get around this.

Just add your access token to your git configuration, as per command below.

git config --global gitlab.accesstoken {TOKEN_VALUE}

The above will work straight away and you will be able to add your project in composer straight away without adding any information in its auth.json file.