estilo y faltaba dos graficas

Author: agarnung

_posts/2025-01-19-DOPvsOOP.md

@@ -263,66 +263,85 @@ Mostly, the results align with what was experienced before; careful structuring
 ### Compiler customization
 Let’s be more austere. In the following, we will enable some [compiler flags](https://caiorss.github.io/C-Cpp-Notes/compiler-flags-options.html) for the g++ (GCC) compiler and analyze whether the graphs vary significantly or not. We are using ```Qt 6.8.1``` and specifying the flags in the ```.pro``` file via the ```QMAKE_CXXFLAGS`` variable.
 
-1. With no flags:
-![podium_comparison_ms_1](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_1.png)
-![podium_comparison_ticks_1](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_1.png)
+#### 1. With no flags:
+<div style="display: flex; justify-content: space-between;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_1.png" alt="podium_comparison_ms_1" style="flex: 1; max-width: 48%;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_1.png" alt="podium_comparison_ticks_1" style="flex: 1; max-width: 48%;">
+</div>
 
-2. No optimization:
+#### 2. No optimization:
 ```.pro
 QMAKE_CXXFLAGS += O0
 ```
 Faster compilation time and better for debugging.
-![podium_comparison_ms_2](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_2.png)
-![podium_comparison_ticks_2](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_2.png)
+<div style="display: flex; justify-content: space-between;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_2.png" alt="podium_comparison_ms_2" style="flex: 1; max-width: 48%;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_2.png" alt="podium_comparison_ticks_2" style="flex: 1; max-width: 48%;">
+</div>
 
-3. O2 optimization:
+#### 3. O2 optimization:
 ```.pro
 QMAKE_CXXFLAGS += O2
 ```
 High level of optimization. Slower compilation time, better for releasing.
-![podium_comparison_ms_3](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_3.png)
-![podium_comparison_ticks_3](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_3.png)
+<div style="display: flex; justify-content: space-between;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_3.png" alt="podium_comparison_ms_3" style="flex: 1; max-width: 48%;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_3.png" alt="podium_comparison_ticks_3" style="flex: 1; max-width: 48%;">
+</div>
 
-4. O3 optimization:
+#### 4. O3 optimization:
 ```.pro
 QMAKE_CXXFLAGS += O3
 ```
 Higher (most aggressive) level of optimization. Slower compilation time, better for releasing.
-![podium_comparison_ms_4](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_4.png)
-![podium_comparison_ticks_4](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_4.png)
+<div style="display: flex; justify-content: space-between;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_4.png" alt="podium_comparison_ms_4" style="flex: 1; max-width: 48%;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_4.png" alt="podium_comparison_ticks_4" style="flex: 1; max-width: 48%;">
+</div>
 
-5. No optimization, march native:
+#### 5. No optimization, march native:
 ```.pro
 QMAKE_CXXFLAGS += -march=native
 ```
 To utilize all specific characteristics of your CPU hardware.
-![podium_comparison_ms_5](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_5.png)
-![podium_comparison_ticks_5](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_5.png)
+<div style="display: flex; justify-content: space-between;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_5.png" alt="podium_comparison_ms_5" style="flex: 1; max-width: 48%;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_5.png" alt="podium_comparison_ticks_5" style="flex: 1; max-width: 48%;">
+</div>
 
-6. O3 optimization, march native:
+#### 6. O3 optimization, march native:
 ```.pro
 QMAKE_CXXFLAGS += -O3 -march=native
 ```
-![podium_comparison_ms_6](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_6.png)
-![podium_comparison_ticks_6](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_6.png)
+<div style="display: flex; justify-content: space-between;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_6.png" alt="podium_comparison_ms_6" style="flex: 1; max-width: 48%;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_6.png" alt="podium_comparison_ticks_6" style="flex: 1; max-width: 48%;">
+</div>
 
-7. Vectorizing:
+#### 7. Vectorizing:
 ```.pro
 QMAKE_CXXFLAGS += -ftree-vectorize -mavx -mavx2 -msse4.2
 ```
 Leveraging advanced parallel processing with SIMD (AVX and AVX2) capabilities.
-![podium_comparison_ms_7](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_7.png)
-![podium_comparison_ticks_7](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_7.png)
+<div style="display: flex; justify-content: space-between;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_7.png" alt="podium_comparison_ms_7" style="flex: 1; max-width: 48%;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_7.png" alt="podium_comparison_ticks_7" style="flex: 1; max-width: 48%;">
+</div>
 
-8. All for one and one for all:
+#### 8. All for one and one for all:
 ```.pro
 QMAKE_CXXFLAGS += -O3 -march=native -funroll-loops -fomit-frame-pointer -finline-functions -ftree-vectorize -mavx -mavx2 -msse4.2
 ```
 ```-funroll-loops```: Optimizes loops by unrolling them, which can speed up repetitive iterations.
+
 ```-fomit-frame-pointer```: Removes the frame pointer register to optimize register usage.
+
 ```-finline-functions```: Forces the inlining of small functions, improving performance.
-![podium_comparison_ms_8](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_8.png)
-![podium_comparison_ticks_8](../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_8.png)
+
+<div style="display: flex; justify-content: space-between;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ms_8.png" alt="podium_comparison_ms_8" style="flex: 1; max-width: 48%;">
+  <img src="../assets/blog_images/2025-01-19-DOPvsOOP/podium_comparison_ticks_8.png" alt="podium_comparison_ticks_8" style="flex: 1; max-width: 48%;">
+</div>
 
 ### Conclusion
 Modern CPUs access memory in blocks (typically 8 bytes or more). If the data is properly aligned in memory, access is faster because it can load and store the data in a single memory cycle. If the data is not properly aligned, the CPU may have to perform more memory accesses, which introduces performance penalties due to the need to correct the alignment at runtime.