refact: optimize images

README.md

@@ -73,7 +73,7 @@ This command will create a new markdown file in the `content/blog` directory wit
 title = ''
 description = ''
 author = ''
-date = date of creation
+date = 2022-08-29T00:00:00+00:00
 draft = true
 tags = ['']
 slug = ''
@@ -87,10 +87,15 @@ You can see your blog post in `http://localhost:1313/blog/your-post-slug`
 ### Images
 For adding images, you can use the `assets/images` directory.
 
-### Image optmization
+### Image in md files
 For optimizing images in markdown files use image shortcode: \
-`{{< image  url="/images/image.png" optimize="1000x webp q50">}}`
+`{{<image  url="/images/image.png" title="image title" class="">}}` \
+for class parameter check [tailwindcss](https://tailwindcss.com/) or just leave it empty
 
+### Image in html files
+For optimizing images in html files use image shortcode: \
+`{{partial "image.html" (dict "src" "images/image.png" "alt" "image title" "class" "")}}` \
+for class parameter check [tailwindcss](https://tailwindcss.com/) or just leave it empty
 
 ### Static assets
 For adding static assets, you can use the `static` directory.
@@ -138,12 +143,6 @@ First you need Install [yarn](https://yarnpkg.com/).
   yarn run htmlproofer
   ```
 
-- Remove all metadata from PNG images using [ExifTool](https://exiftool.org/):
-
-  ```bash
-  yarn run exif
-  ```
-
 ## Markdown
 
 Markdown is a lightweight markup language that uses plain text formatting syntax to convert text into HTML,

content/blog/2022-10-30-dev-meeting.md

@@ -19,7 +19,8 @@ with team members from different time zones joining to discuss key aspects of th
 The meeting started in memory of [Mahsa Amini](https://en.wikipedia.org/wiki/Death_of_Mahsa_Amini).
 We in the Pactus family stand in solidarity with courageous people who are fighting for equality, equity and freedom in Iran.
 
-![Woman Life Freedom](/images/women-life-freedom.png)
+{{< image url="/images/women-life-freedom.png" title="Woman Life Freedom" >}}
+
 
 ### Launching Block explorer
 

content/blog/2023-05-08-release-0-10-0.md

@@ -23,7 +23,7 @@ that allows users to interact with the blockchain without the need to sync the e
 The main update in this version allows users to set up multiple validators in one node.
 Users can set up to 32 validators in a single node, and each validator can stake up to 1,000 coins.
 
-![Multi validators](/images/multi-validators.png)
+{{< image url="/images/multi-validators.png" title="Multi validators" class="" >}}
 
 ## Download
 

content/blog/2023-05-29-release-0-11-0.md

@@ -29,7 +29,7 @@ Another significant update is that sending a [Bond transaction](https://docs.pac
 is now more user-friendly.
 Users no longer need to set the validator public key if they want to bond Test PAC coins to their validators.
 
-![Bond transaction dialog](/images/bond-transaction-dialog.png)
+{{< image url="/images/bond-transaction-dialog.png" title="Bond transaction dialog" class="" >}}
 
 ## Download
 

content/blog/2023-06-19-release-0-12-0.md

@@ -24,7 +24,8 @@ This version is focused on improving the sync time to make it faster.
 This is achieved by implementing a caching mechanism that executes transactions more quickly and
 improves the calculation of total power (stake) of the blockchain in a more effective way.
 
-![Syncing progress](/images/syncing-progress.png)
+{{< image url="/images/syncing-progress.png" title="Syncing progress" class="" >}}
+
 
 ## Download
 

content/blog/2023-07-01-release-0-13-0.md

@@ -24,7 +24,7 @@ Users can now restore the `default_wallet` during the node initialization.
 If users have a backup of the seed phrase (mnemonic) for the `default_wallet`,
 they can now restore it and re-initialize the node.
 
-![Restore mode](/images/restore-mode.png)
+{{< image url="/images/restore-mode.png" title="Restore mode" class="" >}}
 
 ## Download
 

content/blog/2023-08-01-testnet-1-concluded.md

@@ -32,18 +32,19 @@ The size of the blockchain is about 300 megabytes.
 About 300,000 coins were staked during this period, it was almost 50% of the total generated coins.
 It shows that users, even in Testnet, tend to stake their coins.
 
-![Staking chart](/images/staked-coins.png)
+{{< image url="/images/staked-coins.png" title="Staking chart" class="" >}}
 
 We were able to extract the confirmation time of transactions.
 More than 97% of transactions were confirmed in just one block after submission.
 This indicates that the transaction pool and broadcasting models are working fine.
 
-![Transaction confirmation chart](/images/transaction-confirmation.png)
+{{< image url="/images/transaction-confirmation.png" title="Transaction confirmation chart" class="" >}}
+
 
 Based on logs from one of the validators, the time for creating a block is about 3 seconds in normal cases.
 More than 97% of blocks are committed in the first rounds.
 
-![Consensus round chart](/images/consensus-round.png)
+{{< image url="/images/consensus-round.png" title="Consensus round chart" class="" >}}
 
 ## Major updates
 

content/blog/2023-09-04-introduction-to-pips.md

@@ -48,4 +48,4 @@ Without approval from Pactus Laboratory team, changes won't be approved and adde
 For a complete list of Pactus Improvement Proposals, visit [this link](https://pips.pactus.org/).
 The corresponding GitHub repository is accessible [here](https://github.com/pactus-project/piPs/).
 
-![PIPs repository on Github](/images/repository.png)
+{{< image url="/images/repository.png" title="PIPs repository on Github" class="" >}}

content/blog/2023-09-28-how-sspos-works-in-simple-word.md

@@ -22,7 +22,7 @@ Pactus Blockchain uses the SSPoS (Solid State Proof of State) which is a new con
 To explain how it works let's start with explaining one of the first and simplest
 consensus mechanisms (or if you already know them, just jump into the last part named SSPoS).
 
-![Solid State Proof of Stake](/images/SSPoS.png)
+{{< image url="/images/SSPoS.png" title="Solid State Proof of Stake" class="" >}}
 
 ## PoW (Proof of Work)
 

content/blog/2023-10-15-release-0-15-0.md

@@ -18,7 +18,7 @@ is suitable for both beginners and experienced users.
 It also includes a command-line interface (CLI) for advanced users and wallet software
 that allows users to interact with the blockchain without the need to sync the entire blockchain.
 
-![Splash screen](/images/splash-screen.png)
+{{< image url="/images/splash-screen.png" title="Splash screen" class="" >}}
 
 ## Download
 

content/blog/2023-10-29-release-0-16-0.md

@@ -24,7 +24,7 @@ This version allows users to create new addresses for both validators and accoun
 The networking module has been improved, and users can now set limits on the number of connections.
 A random crash on the agreement protocol has been fixed in this version.
 
-![New address dialog](/images/new-address-dialog.png)
+{{< image url="/images/new-address-dialog.png" title="New address dialog" class="" >}}
 
 ## Download
 

content/blog/2024-01-11-release-0-20-0.md

@@ -24,7 +24,8 @@ that allows users to interact with the blockchain without the need to sync the e
 
 The new GUI application enables users to easily Unbond and Withdraw their validator's stake.
 
-![Withdraw dialog](/images/withdraw-dialog.png)
+{{< image url="/images/withdraw-dialog.png" title="Withdraw dialog" class="" >}}
+
 
 ### Improving Network Connectivity
 

hugo.toml

@@ -72,3 +72,9 @@ relativeURLs = true
       hardWraps = false
       unsafe = true
       xhtml = false
+[imaging]
+  [imaging.exif]
+    disableDate = false
+    disableLatLong = false
+    excludeFields = ''
+    includeFields = ''

layouts/about/roadmap.html

@@ -28,7 +28,7 @@ <h1 class="text-5xl font-bold mt-10 text-neutral-50 flex z-10">
     </a>
   </div>
     <div class="w-full text-right relative bottom-[1.06em]" style="text-align: -webkit-right;">
-      <img src="/images/gate2.png" alt="" class="relative max-w-[81%]" />
+      {{partial "image.html" (dict "src" "/images/gate2.png" "alt" "" "class" "relative max-w-[81%]")}}
     </div>
     <div class="relative">
       <ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">

layouts/blog/index.html

@@ -38,10 +38,7 @@ <h1 class="text-neutral-50 font-bold text-xl">Latest Posts</h1>
       <div class="bg-[#242535] p-5 rounded-xl">
         <div class="block relative overflow-hidden group">
           <a href="{{ .Permalink }}">
-            {{ $image := resources.Get .Params.image }}
-            {{ $resized := $image.Resize "600x webp q30" }}
-            <img src="{{ $resized.RelPermalink }}" loading="lazy" alt="Optimized Image" class="w-full object-cover rounded-xl h-56">
-
+            {{partial "image.html" (dict "src" .Params.image "alt" .Title "class" "w-full object-cover rounded-xl h-56")}}
             <div
               class="absolute rounded-xl transition-all delay-75 inset-0 group-hover:bg-gradient-to-br group-hover:from-[#fff]/40 group-hover:to-transparent">
             </div>

layouts/index.html

@@ -1,6 +1,6 @@
 {{ define "title" }}{{ .Title }}{{ end }}
 {{ define "main" }}
-<img src="/images/landing-top-bg1.png" alt="" class="min-w-full absolute -top-10" loading="eager"/>
+{{partial "image.html" (dict "src" "/images/landing-top-bg1.png" "alt" "" "class" "min-w-full absolute -top-10")}}
 <section class="z-10 relative flex flex-col min-h-full flex-grow" style="position: relative;">
   <div class="flex-grow">
     <div class="text-center px-5 md:px-0 z-20 pt-[10rem] md:pt-[15rem] bg-transparent">
@@ -426,12 +426,9 @@ <h3 class="fn__gradient_title text-2xl"><span class="prefix"></span><span data-f
                 {{ range first 10 (where .Site.RegularPages "Type" "blog") }}
                 <div class="swiper-slide">
                   <div class="container mx-auto">
-                    {{ $image := resources.Get .Params.image }}
-                    {{ $resized := $image.Resize "600x webp q30" }}
                     <div
                       class="w-full p-10 bg-[#14161D] rounded-2xl shadow-xl shadow-[#0B0B0F] flex flex-col md:flex-row items-start md:items-center gap-3">
-                      <img data-src="{{ $resized.Permalink }}" loading="lazy"
-                        class="lazy w-full md:w-1/4 h-auto md:h-48 object-cover rounded-2xl mb-4 md:mb-0">
+                        {{partial "image.html" (dict "src" .Params.image "alt" .Title "class" "w-full md:w-1/4 h-auto md:h-48 object-cover rounded-2xl mb-4 md:mb-0")}}
                       <div class="flex-1">
                         <h1 class="text-2xl font-bold text-neutral-50">
                           {{ .Title }}
@@ -460,15 +457,12 @@ <h6 class="font-medium text-sm mt-2">
             <div class="">
               {{ range first 3 (where .Site.RegularPages "Type" "blog") }}
               {{$link := .Permalink}}
-              {{ $image := resources.Get .Params.image }}
-              {{ $resized := $image.Resize "600x webp q30" }}
               <div class="swiper-slide">
                 <div class="container mx-auto">
                   <div
                     class="w-full p-10 bg-[#14161D] rounded-2xl shadow-xl shadow-[#0B0B0F] flex flex-col items-start gap-3">
                     <a href="{{$link}}" class="w-full">
-                      <img src="{{ $resized.Permalink }}" loading="lazy" alt="{{ .Title }}"
-                        class="w-full h-auto md:h-48 object-cover rounded-2xl mb-4 md:mb-0">
+                      {{partial "image.html" (dict "src" .Params.image "alt" .Title "class" "w-full h-auto md:h-48 object-cover rounded-2xl mb-4 md:mb-0")}}
                     </a>
                     <div class="flex-1">
                       <h1 class="text-2xl font-bold text-neutral-50">

layouts/partials/footer.html

@@ -1,5 +1,5 @@
 <div class="relative w-full top-[51px]">
-    <img src="/images/pactus-robot.png" alt="" class="w-20 lg:w-[150px] absolute bottom-0 left-10 z-10 lg:left-56" />
+    {{partial "image.html" (dict "src" "/images/pactus-robot.png" "alt" "" "class" "w-20 lg:w-[150px] absolute bottom-0 left-10 z-10 lg:left-56")}}
 </div>
 <div class="relative w-full text-center top-[26px]" style="text-align: -webkit-center;">
     <button class="button-go-to-top z-20" onclick="gototop()">

layouts/partials/image.html

@@ -0,0 +1,3 @@
+{{ $image := resources.Get .src }}
+{{ $resized := $image.Resize (printf "%dx webp q60" $image.Width) }}
+<img src="{{$resized.Permalink}}" alt="{{.alt}}" class="{{.class}}" loading="lazy"/>

layouts/shortcodes/download_links.html

@@ -6,7 +6,8 @@ <h4 class="font-bold lg:text-2xl text-lg text-neutral-50">
       </h4>
       <p class="mt-5 text-neutral-50">{{ T "dict.download.download_gui" }}</p>
       <div class="w-full text-center" style="text-align: -webkit-center;">
-        <img src="/images/pactus-gui.png" class="mt-5 w-full" alt="" />
+        {{partial "image.html" (dict "src" "/images/pactus-gui.png" "alt" "" "class" "mt-5 w-full")}}
+
       </div>
     </a>
     <a href="#cli" class="p-5 border border-neutral-400 rounded-xl hover:bg-[#000] cursor-pointer no-underline" id="cli-btn">
@@ -15,7 +16,7 @@ <h4 class="font-bold lg:text-2xl text-lg text-neutral-50">
       </h4>
       <p class="mt-5 text-neutral-50">{{ T "dict.download.download_cli" }}</p>
       <div class="w-full text-center" style="text-align: -webkit-center;">
-        <img src="/images/pactus-cli.png" class="lg:mt-[76px] mt-5 w-full" alt="" />
+        {{partial "image.html" (dict "src" "/images/pactus-cli.png" "alt" "" "class" "lg:mt-[31px] mt-5 w-full")}}
       </div>
     </a>
   </div>

layouts/shortcodes/image.html

@@ -1,3 +1,3 @@
 {{ $image := resources.Get (.Get "url") }}
-{{ $resized := $image.Resize (.Get "optimize") }}
-{{ $resized.RelPermalink }}
+{{ $resized := $image.Resize (printf "%dx webp q70" $image.Width) }}
+<img src='{{ $resized.RelPermalink }}' alt='{{ .Get "alt" }}' class='{{ .Get "class" }}' width="{{$image.Width}}" height="{{$image.Height}}"/>

static/css/main.css

@@ -6597,8 +6597,8 @@ html {
     margin-left: 0px;
   }
 
-  .lg\:mt-\[76px\] {
-    margin-top: 76px;
+  .lg\:mt-\[31px\] {
+    margin-top: 31px;
   }
 
   .lg\:block {