El siguiente snippet para WordPress te permite generar una tabla que muestra las imágenes de tu sitio que tienen un peso mayor a 100 KB. Esta funcionalidad es especialmente útil para administradores de sitios web que desean optimizar la velocidad de carga de sus páginas, ya que las imágenes grandes pueden afectar negativamente el rendimiento del sitio.
¿Cómo funciona?
Consulta a la base de datos: El snippet comienza haciendo una consulta a la base de datos de WordPress para obtener todas las imágenes (attachments) que están registradas en el sitio.
Filtrado de imágenes: Una vez obtenidas las imágenes, el código filtra aquellas que tienen un peso mayor a 100 KB.
Ordenamiento y limitación: Las imágenes filtradas se ordenan por peso en orden descendente y se limita la salida a las primeras 50 imágenes.
Generación de la tabla: Finalmente, el snippet genera una tabla HTML que muestra una miniatura de cada imagen, su nombre, dimensiones y peso.
Casos de uso del snippet
Optimización del sitio: Si estás buscando mejorar la velocidad de carga de tu sitio web, este snippet te ayudará a identificar rápidamente las imágenes que pueden necesitar optimización o compresión.
Auditoría de contenido: Si eres un administrador de contenido y deseas asegurarte de que todas las imágenes cargadas en el sitio cumplen con ciertos estándares de tamaño, este snippet te será de gran utilidad.
Implementación
Para implementar este snippet en tu sitio WordPress, simplemente copia y pega el código en el archivo functions.php de tu tema o en un plugin personalizado. Una vez hecho esto, podrás usar el shortcode [img_mas_100k] en cualquier entrada o página para mostrar la tabla de imágenes.
Conclusión
Este snippet es una herramienta poderosa para aquellos que buscan optimizar y auditar el contenido de su sitio web en WordPress. Al identificar y actuar sobre las imágenes grandes, puedes mejorar significativamente la experiencia del usuario y la velocidad de carga de tu sitio.
function generar_tabla_imagenes_mas_100k() {
global $wpdb;
// Obtener las imágenes con peso mayor a 100 KB
$query = "
SELECT p.*, pm.meta_value as filesize
FROM {$wpdb->prefix}posts p
INNER JOIN {$wpdb->prefix}postmeta pm ON (p.ID = pm.post_id)
WHERE p.post_type = 'attachment'
AND p.post_mime_type LIKE 'image/%'
AND pm.meta_key = '_wp_attached_file'
AND (pm.meta_value IS NOT NULL AND pm.meta_value <> '')
";
$images = $wpdb->get_results($query);
// Filtrar y ordenar las imágenes por peso
$filtered_images = array();
foreach ($images as $image) {
$image_path = get_attached_file($image->ID);
$image_size_kb = round(filesize($image_path) / 1024);
if ($image_size_kb > 100) {
$filtered_images[] = array(
'ID' => $image->ID,
'url' => wp_get_attachment_url($image->ID),
'title' => $image->post_title,
'width' => getimagesize($image_path)[0],
'height' => getimagesize($image_path)[1],
'size_kb' => $image_size_kb
);
}
}
// Ordenar las imágenes por peso descendente
usort($filtered_images, function($a, $b) {
return $b['size_kb'] - $a['size_kb'];
});
$count = count($filtered_images); // Contador de imágenes con peso mayor a 100 KB
// Obtener solo las primeras 50 imágenes
$filtered_images = array_slice($filtered_images, 0, 50);
// Generar la tabla
$table = '<table>';
$table .= '<thead><tr><th>Imagen</th><th>Nombre</th><th>Dimensiones (px)</th><th>Peso (KB)</th></tr></thead>';
$table .= '<tbody>';
foreach ($filtered_images as $image) {
$table .= '<tr>';
$table .= '<td><a href="' . esc_url(admin_url('post.php?post=' . $image['ID'] . '&action=edit')) . '" target="_blank"><img style="width:100px" src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['title']) . '" /></a></td>';
$table .= '<td>' . esc_html($image['title']) . '</td>';
$table .= '<td>' . esc_html($image['width']) . 'x' . esc_html($image['height']) . '</td>';
$table .= '<td>' . esc_html($image['size_kb']) . '</td>';
$table .= '</tr>';
}
$table .= '</tbody>';
$table .= '</table>';
// Generar el texto con el total de imágenes que pesan más de 100 KB
$total_text = $count . ' Imágenes con peso mayor a 100 KB';
// Limitar el contador a 50 si hay más de 50 imágenes
if ($count > 50) {
$count = 50;
}
// Salida
$output = '';
// Agregar el texto con el total de imágenes
$output .= '<p>' . esc_html($total_text) . ' - Mostrando 50 imagenes</p>';
// Agregar la tabla de imágenes
$output .= $table;
return $output;
}
// Función para agregar el shortcode 425 Imágenes con peso mayor a 100 KB - Mostrando 50 imagenes
| Imagen | Nombre | Dimensiones (px) | Peso (KB) |
|---|---|---|---|
 | video | 512x512 | 2259 |
 | fondo-diseno-web-valencia-1_adobe_express | x | 1144 |
 | load1 | 800x600 | 932 |
 | los-errores-más-comunes-en-la-configuración-de-una-tienda-online-y-cómo-evitarlos_optimized | 1792x1024 | 755 |
 | freepik__enhance__59216 | 2048x1064 | 708 |
 | los-plugins-para-wordpress-más-utilizados-en-nuestros-proyectos_optimized | 1792x1024 | 672 |
 | 5-razones-por-las-que-tu-negocio-necesita-una-página-web-_optimized | 1792x1024 | 671 |
 | diseño-web-para-promocionar-tus-servicios-de-fontanería-en-valencia_optimized | 1792x1024 | 620 |
 | diseño-web-para-destacar-tu-negocio-de-peluquería-en-valencia_optimized | 1792x1024 | 592 |
 | mantenimiento web wordpress | 1792x1024 | 518 |
 | cursos | 1920x1280 | 463 |
 | diseño web para dentistas en valencia | 2560x2053 | 447 |
 | macbook-606763_1920 | 1920x1275 | 432 |
 | DALL·E 2024-04-02 22.50.36 - Design a futuristic banner for a cookie policy panel featuring a stylized, digital web cookie with a bite taken out of it. This cookie should dominate | 1792x1024 | 390 |
 | cucocan_entrada | 1920x660 | 386 |
 | portada | 2560x1708 | 384 |
 | ejemplo | 1144x1277 | 380 |
 | DALL·E 2024-04-02 23.05.58 - Design a futuristic and abstract banner for a 'Legal Texts' page, symbolizing the creation and management of legal documents in the digital age. The i | 1792x1024 | 378 |
 | negocio-check | 1697x960 | 376 |
 | contacto.jpg | 1920x1280 | 370 |
 | dineño web en la comunidad valenciana | 1920x1280 | 364 |
 | rocket2 | 441x430 | 362 |
 | cucocanweb | 2560x1921 | 358 |
 | DALL·E 2024-04-02 23.06.26 - Design a banner for a 'Legal Texts' page, incorporating white icons of law symbols—such as scales of justice, a gavel, and legal documents—set against | 1792x1024 | 356 |
 | knolling midjourney | 1456x816 | 353 |
 | animation_300_lacbg5ae | 300x300 | 346 |
 | diseño web valencia | 412x675 | 337 |
 | slide2a | 2000x1101 | 337 |
 | DALL·E 2024-04-02 22.44.21 - Create a new version of the futuristic contact form banner, closely following the design elements of the previous creation, with an emphasis on the us | 1792x1024 | 336 |
 | DALL·E 2024-04-02 22.41.38 - Create a futuristic contact form banner featuring a white, dashed, wavy line that travels across a digital, abstract background. This line symbolizes | 1792x1024 | 332 |
 | woman-robot,-cosmic-impressionism | 1000x1000 | 322 |
 | woman-robot,-pop-art-revival | 1000x1000 | 316 |
 | web empresas de construcción | 1280x853 | 305 |
 | contacto | 1800x986 | 304 |
 | woman-robot,-1990s-point-and-click-16bit-adventure-game | 1000x1000 | 295 |
 | la-máquina-del-branding,-mucho-más-qué-una-academia_optimized | 1792x1024 | 295 |
 | tile | 1000x1000 | 290 |
 | diseno web valencia generacionweb wordpress (28) | 1792x1024 | 289 |
 | ¿Necesitas mantenimiento web con Wordpress? | 2048x1365 | 287 |
 | woman-robot,-neon-pop-art | 1000x1000 | 283 |
 | diseno web valencia generacionweb wordpress (16) | 1792x1024 | 282 |
 | diseno web valencia generacionweb wordpress (30) | 1792x1024 | 282 |
 | woman-robot,-digital-graffiti | 1000x1000 | 277 |
 | diseno web valencia generacionweb wordpress (26) | 1792x1024 | 277 |
 | diseno web valencia generacionweb wordpress (24) | 1792x1024 | 276 |
 | Páginas web para clínicas dentales en Valencia | 1280x853 | 272 |
 | diseno web valencia generacionweb wordpress (20) | 1792x1024 | 271 |
 | diseno web valencia generacionweb wordpress (21) | 1792x1024 | 269 |
 | analiza-tu-competencia | 2560x1394 | 268 |
 | ux | 1792x1024 | 268 |
