Merge branch 'image_component' of https://github.com/ClickHouse/clickhouse-docs into image_component

Author: Blargian

docs/_snippets/_launch_sql_console.md

@@ -1,5 +1,7 @@
 import cloud_connect_to_sql_console from '@site/static/images/_snippets/cloud-connect-to-sql-console.png';
 import createservice8 from '@site/static/images/_snippets/createservice8.png';
+import Image from '@theme/IdealImage';
+
 
 :::tip SQL console
 If you need a SQL client connection, your ClickHouse Cloud service has an associated web based SQL console; expand **Connect to SQL console** below for details.
@@ -10,10 +12,10 @@ If you need a SQL client connection, your ClickHouse Cloud service has an associ
 
 From your ClickHouse Cloud services list, click on a service.
 
-<img src={cloud_connect_to_sql_console} class="image" alt="Connect to SQL Console" />
+<Image img={cloud_connect_to_sql_console}  alt="Connect to SQL Console" size="lg" force/>
 
 This will redirect you to the SQL console.
 
-<img src={createservice8} class="image" alt="SQL Console" />
+<Image img={createservice8}  alt="SQL Console" size="lg" force/>
 
 </details>

docs/intro.md

@@ -5,9 +5,10 @@ description: 'ClickHouse® is a column-oriented SQL database management system (
 title: 'What is ClickHouse?'
 ---
 
-import RowOrientedExample from '@site/static/images/column-oriented-example-query.png';
-import RowOriented from '@site/static/images/row-oriented.gif';
-import ColumnOriented from '@site/static/images/column-oriented.gif';
+import column_example from '@site/static/images/column-oriented-example-query.png';
+import row_orientated from '@site/static/images/row-oriented.gif';
+import column_orientated from '@site/static/images/column-oriented.gif';
+import Image from '@theme/IdealImage';
 
 ClickHouse® is a high-performance, column-oriented SQL database management system (DBMS) for online analytical processing (OLAP). It is available as both an [open-source software](https://github.com/ClickHouse/ClickHouse) and a [cloud offering](https://clickhouse.com/cloud).
 
@@ -47,22 +48,22 @@ LIMIT 8;
 
 You can [run this query on the ClickHouse SQL Playground](https://sql.clickhouse.com?query=U0VMRUNUIE1vYmlsZVBob25lTW9kZWwsIENPVU5UKCkgQVMgYyAKRlJPTSBtZXRyaWNhLmhpdHMgCldIRVJFIAogICAgICBSZWdpb25JRCA9IDIyOSAKICBBTkQgRXZlbnREYXRlID49ICcyMDEzLTA3LTAxJyAKICBBTkQgRXZlbnREYXRlIDw9ICcyMDEzLTA3LTMxJyAKICBBTkQgTW9iaWxlUGhvbmUgIT0gMCAKICBBTkQgTW9iaWxlUGhvbmVNb2RlbCBub3QgaW4gWycnLCAnaVBhZCddIApHUk9VUCBCWSBNb2JpbGVQaG9uZU1vZGVsCk9SREVSIEJZIGMgREVTQyAKTElNSVQgODs&chart=eyJ0eXBlIjoicGllIiwiY29uZmlnIjp7InhheGlzIjoiTW9iaWxlUGhvbmVNb2RlbCIsInlheGlzIjoiYyJ9fQ&run_query=true) that selects and filters [just a few out of over 100](https://sql.clickhouse.com/?query=U0VMRUNUIG5hbWUKRlJPTSBzeXN0ZW0uY29sdW1ucwpXSEVSRSBkYXRhYmFzZSA9ICdtZXRyaWNhJyBBTkQgdGFibGUgPSAnaGl0cyc7&tab=results&run_query=true) existing columns, returning the result within milliseconds:
 
-<img src={RowOrientedExample} alt="Example query in a column-oriented database" />
+<Image img={column_example} alt="Example query in a column-oriented database" size="lg"/>
 
 As you can see in the stats section in the above diagram, the query processed 100 million rows in 92 milliseconds, a throughput of approximately 300 million rows or just under 7 GB per second.
 
 **Row-oriented DBMS**
 
 In a row-oriented database, even though the query above only processes a few out of the existing columns, the system still needs to load the data from other existing columns from disk to memory. The reason for that is that data is stored on disk in chunks called [blocks](https://en.wikipedia.org/wiki/Block_(data_storage)) (usually fixed sizes, e.g., 4 KB or 8 KB). Blocks are the smallest units of data read from disk to memory. When an application or database requests data, the operating system’s disk I/O subsystem reads the required blocks from the disk. Even if only part of a block is needed, the entire block is read into memory (this is due to disk and file system design):
 
-<img src={RowOriented} alt="Row-oriented database structure" />
+<Image img={row_orientated} alt="Row-oriented database structure" size="lg"/>
 
 **Column-oriented DBMS**
 
 Because the values of each column are stored sequentially one after the other on disk, no unnecessary data is loaded when the query from above is run.
 Because the block-wise storage and transfer from disk to memory is aligned with the data access pattern of analytical queries, only the columns required for a query are read from disk, avoiding unnecessary I/O for unused data. This is [much faster](https://benchmark.clickhouse.com/) compared to row-based storage, where entire rows (including irrelevant columns) are read:
 
-<img src={ColumnOriented} alt="Column-oriented database structure" />
+<Image img={column_orientated} alt="Column-oriented database structure" size="lg"/>
 
 ## Data Replication and Integrity {#data-replication-and-integrity}
 

src/theme/IdealImage/index.tsx

@@ -105,9 +105,10 @@ export default function IdealImage(
     alt: string;
     background?: "white" | "black";
     border?: boolean;
+    force?: boolean;
   },
 ): ReactNode {
-  const { img, size, alt, background, border, ...propsRest } = props;
+  const { img, size, alt, background, border, force, ...propsRest } = props;
 
   // In dev env just use regular img with original file
   if (typeof img === "string" || "default" in img) {
@@ -176,6 +177,24 @@ export default function IdealImage(
     marginBottom: "16px",
   };
 
+  const img_component = force ? (
+    <img width={currentImage.width ?? 100} alt={alt} src={currentImage.path} />
+  ) : (
+    <ReactIdealImage
+      {...propsRest}
+      height={currentImage.height ?? 100}
+      alt={alt}
+      width={currentImage.width ?? 100}
+      placeholder={{ lqip: img.preSrc }}
+      src={currentImage.path}
+      srcSet={filteredSet.map((image) => ({
+        ...image,
+        src: image.path,
+      }))}
+      style={imageStyles}
+    />
+  );
+
   return (
     <div style={containerStyles}>
       {/* Zoomed Image */}
@@ -207,19 +226,7 @@ export default function IdealImage(
           visibility: isZoomed ? "hidden" : "visible",
         }}
       >
-        <ReactIdealImage
-          {...propsRest}
-          height={currentImage.height ?? 100}
-          alt={alt}
-          width={currentImage.width ?? 100}
-          placeholder={{ lqip: img.preSrc }}
-          src={currentImage.path}
-          srcSet={filteredSet.map((image) => ({
-            ...image,
-            src: image.path,
-          }))}
-          style={imageStyles}
-        />
+        {img_component}
       </div>
     </div>
   );