Crea formati di immagine con qualità diverse durante il caricamento

wordpress.stackexchange https://wordpress.stackexchange.com/questions/163844

Domanda

Sto cercando di trovare una soluzione in cui i formati di immagine generati coprono entrambi gli aspetti reattivi e ad alta risoluzione quando caricano un nuovo elemento nell'amministratore WP. Ho messo insieme un insieme di formati che dovrebbero soddisfare questi requisiti,

2560 x 1600 Retina Desktop ('Largex2', personalizzato)
1280 x 800 Desktop (grande)
1920 x 1200 Tablet Retina ('Metalx2', personalizzato)
960 x 600 Tablet + Retina Mobile (Medium)
480 x 300 Mobile (miniatura)

Il mio problema è nella qualità dell'immagine per le dimensioni maggiori. L'esportazione delle immagini da Photoshop a un'impostazione di qualità di alta o molto alta produrrà risultati equa per le dimensioni predefinite, ma per quanto riguarda quelle personalizzate? Quelli preferirei all'esportazione a un ambiente medio o basso per mantenere una dimensione del file ragionevole.

Il mio pensiero è - sarebbe possibile prendere un'immagine davvero grande ad alta qualità, caricarla, quindi impostare in modo che le dimensioni maggiori siano generate ad una qualità molto più bassa?

Qualsiasi aiuto è apprezzato! Per favore non indirizzarmi a qualsiasi plugin, voglio costruire la mia soluzione per questo.

È stato utile?

Soluzione

1) Una soluzione alternativa estendendo la classe WP_Image_Editor_GD

Il problema è come accedere alle dimensioni dell'immagine prima di modificare la qualità dell'intermediazione jpeg immagini.

Nota che image_resize() Function è deprecata .

Possiamo utilizzare il filtro jpeg_quality dal metodo del get_quality pubblico della classe WP_Image_Editor astratta: 

$quality = apply_filters( 'jpeg_quality', $quality, 'image_resize' );
.

o il filtro wp_editor_set_quality.

Ecco un'idea come impostare la qualità dell'immagine in base alla dimensione dell'immagine (larghezza / altezza): 

/**
 * Set image (jpeg) quality based on the image size (width/height)
 * @see http://wordpress.stackexchange.com/a/165241/26350
 */
add_filter( 'wpse_make_image_arguments', function( $arguments, $filename, $size, $function ) 
{   
    // Only target jpeg cases, i.e. with the quality set in $arguments[2]       
    if( ! isset( $size['height'] ) || ! isset( $size['width'] ) || ! isset( $arguments[2] ) )
        return $arguments;

    // Modify this part to your needs:
    if( $size['height'] <= 150  && $size['width'] <= 150 )
        $arguments[2] = 2; // very low quality for easy testing

    return $arguments;
}, 10, 4 );
.

Dove abbiamo esteso la classe WP_Image_Editor_GD: 

/**
 * Extend the WP_Image_Editor_GD to add the custom wpse_make_image_arguments filter.
 * @see http://wordpress.stackexchange.com/a/165241/26350
 */
add_filter( 'wp_image_editors', function( $editors ) 
{
    // Note that the WP_Image_Editor_GD and WP_Image_Editor_Imagick classes
    // are included within this filter. So let's do the same for our extended class.

    // Our extended class that overrides the WP_Image_Editor_GD::make_image() method

    if( ! class_exists( 'WPSE_Image_Editor_GD' ) )
    {   
        class WPSE_Image_Editor_GD extends WP_Image_Editor_GD
        {
            protected function make_image( $filename, $function, $arguments ) 
            {
                // Add a custom filter      
                $arguments = apply_filters( 'wpse_make_image_arguments', $arguments, $filename, $this->size, $function );

                // Parent method
                return parent::make_image( $filename, $function, $arguments );
            }
        }
    }

    // Prepend the extended class to the array of image editors:    
    array_unshift( $editors, 'WPSE_Image_Editor_GD' );

    return $editors;
} );
.

Dove abbiamo introdotto il filtro personalizzato wpse_make_image_arguments.

In questo modo possiamo modificare le impostazioni di qualità, Prima I file intermedi vengono salvati.

Ecco un esempio:

Esempio

PS: Non ho controllato il caso quando viene utilizzata la libreria imaccick , ma immagino che potremmo fare qualcosa di simile estendendo la classe WP_Image_Editor_Imagick. < / P >.

2) Aggiornamento - Imposta la qualità JPEG per nome della dimensione dell'immagine

Ecco un'altra versione in cui impostiamo la qualità JPEG per nome della dimensione dell'immagine: 

/**
 * Extend the WP_Image_Editor_GD to set quality per image size name.
 * 
 * @see http://wordpress.stackexchange.com/a/165241/26350
 */
add_filter( 'wp_image_editors', function( $editors ) 
{
    // Note that the WP_Image_Editor_GD and WP_Image_Editor_Imagick classes
    // are included within this filter. So let's do the same for our extended class.

    // Our extended class that overrides the WP_Image_Editor_GD::_resize() method
    if( ! class_exists( 'WPSE2_Image_Editor_GD' ) )
    {   
        class WPSE2_Image_Editor_GD extends WP_Image_Editor_GD
        {
            protected function _resize( $max_w, $max_h, $crop = false )
            {
                $qualities = apply_filters( 'wpse_jpeg_qualities', [] );
                $default_quality = (int) apply_filters( 'wpse_default_jpeg_quality', 82 );                              
                $sizes = wp_get_additional_image_sizes();
                $this->set_quality( $default_quality );         
                foreach( (array) $qualities as $name => $quality )
                {
                    if( 
                        isset( $sizes[$name] ) 
                        && (int)  $sizes[$name]['width']  === (int)  $max_w
                        && (int)  $sizes[$name]['height'] === (int)  $max_h
                        && (bool) $sizes[$name]['crop']   === (bool) $crop  
                    )   
                        $this->set_quality( $quality );                 
                }

                // Parent method
                return parent::_resize( $max_w, $max_h, $crop );
            }
        }
    }

    // Prepend the extended class to the array of image editors:    
    array_unshift( $editors, 'WPSE2_Image_Editor_GD' );

    return $editors;
} );
.

Ho notato che gli argomenti del coltura possono essere 0, falsi o vuoti, quindi facciamo alcuni typecasting per essere sicuri.

Qui abbiamo introdotto i seguenti nuovi filtri: 

add_filter( 'wpse_jpeg_qualities', function( $qualities )
{ 
    return [ 'hello-image' => 2, 'medium' => 2, 'large' => 2 ];
} );
.

e 

add_filter( 'wpse_default_jpeg_quality', function( $quality )
{ 
    return 82;
} );
.

che può essere regolarmente regolato alle tue esigenze!

Altri suggerimenti

Non posso commentare, devi postare insieme con un'altra versione.

Il problema (i):

im non shure se il Aggiornamento 2) Imposta la qualità JPEG per nome della dimensione dell'immagine nella risposta accettata è completa. wp_get_additional_image_sizes() restituisce global $_wp_additional_image_sizes e non contiene informazioni sulle dimensioni predefinite come medio, grande o miniatura.

Questo potrebbe non funzionare nel filtro: 'LARGE'=> 2

A partire da https://codex.wordpress.org/function_reference/get_intermediate_image_sizes spiega con Codice personalizzato per recuperare tutte le dimensioni con una funzione personalizzata.

Sono giusto?

In secondo luogo, l'idea di filtro diffrent "dimensioni" per nome è difficile. _resize( $max_w, $max_h, $crop = false ) Comprens Comprendere e analizzare la larghezza, l'altezza e il valore della ritaglio corrispondenti e ogni corrispondenza supponiamo per abbinare un nome. Ma in molti casi il nome sarà "un altro" nome.

Un'impostazione dell'immagine "media" che ha un'impostazione "Shop_Product" uguale "visita" solo "questa funzione di esse. Quindi non sapremo se è dimensione "media" o dimensione "shop_product" che viene filtrata. Perché, gli obiettivi qui sono solo un raccolto tecnico di un'immagine.

L'idea con Aggiorna 2) è un handeling più logico, ma ho paura che l'architecure techncal sia lì. Per analizzare tutte le dimensioni dell'immagine registrata prima di costruire il filtro, diventa più sviluppo per rendere la speculazione, l'intenzione restituisce il programma di immagine di qualità corretto sul tema corrente.

.

Tutti i nomi delle dimensioni con le uguali impostazioni condivideranno la stessa nuova qualità di Condividono la stessa immagine sul server.

Allora, se si attende ancora al Aggiorna 2) Penso che sia necessario chiamare un'altra funzione per popolare la variabile $sizes e analizzare da var_dump () il generacoDetagCode per le impostazioni uguali. L'approccio in 1) Una soluzione alternativa di ... è più logica / semantica. Abbiamo risolto questo con lo stesso metodo di estensione, ma usando invece un filtro dinamico: 

add_filter('wp_image_editors', function($editors){

    if(!class_exists('ENTEX_Image_Editor_GD')){   
        class ENTEX_Image_Editor_GD extends WP_Image_Editor_GD {
            private $wp_quality = null;
            protected function _resize($max_w, $max_h, $crop = false){
                $condition = ($crop ? 'true' : 'false');
                if($this->wp_quality === null) $this->wp_quality = $this->get_quality();
                $quality = apply_filters('wp_editor_set_quality_'. $max_w .'x'. $max_h .'_'. $condition, $this->wp_quality);                              
                $this->set_quality((int) $quality);
                return parent::_resize( $max_w, $max_h, $crop );
            }
        }
    }    
    array_unshift($editors, 'ENTEX_Image_Editor_GD');
    return $editors;
});
.

Per filtrare ogni singola dimensione dell'immagine, quindi utilizziamo: 

add_filter('wp_editor_set_quality_160x160_true', function($quality){
    return 96;
});
.

Che cosa è anche Diffrent da questa versione estesa è che stiamo usando / popola la versione $_wp_additional_image_sizes come valore predefinito.

Ecco alcuni altri esempi di filtri personalizzati: 

function high_quality_on_medium_images(){
    $in = 'medium';
    $max_w = get_option($in.'_size_w');
    $max_h = get_option($in.'_size_h');
    $crop = get_option($in.'_crop');
    $condition = ($crop ? 'true' : 'false');
    add_filter('wp_editor_set_quality_'. $max_w .'x'. $max_h .'_'. $condition, 'my_theme_high_quality_images', 10, 1);
}
add_action('after_setup_theme', 'high_quality_on_medium_images', 99);

function my_theme_high_quality_images($quality){
    return (int) 82;
}
.

Sviluppatori Attenzione

    .
  • Realizza i filtri Shure dopo la configurazione delle immagini del tema.
  • Non avvolgere all'interno add_filter('jpeg_quality' ... THEN AJAX Call, Front End, Remotato
    Le immagini pubblicate non mordono.

Come accennato, il valore di ritaglio potrebbe essere 0 o falso, è necessario convertire (int) o (bool) in una stringa con is_admin()

Sviluppatori a tema Attenzione

La compressione predefinita del WP è piuttosto progressiva. I valori tra $condition = ($crop ? 'true' : 'false'); e 80 potrebbero restituire un'enorme differenza o Nessun risultato visibile. Un valore di ComRession come 99, probabilmente restituisce un file più grande su "più piccola dimensione" 800 px immagini, quindi il grande 3000 originale PX versione dimensionata.

Dopo molti anni abbiamo trovato un numero magico di 96, il file size diventa più piccolo ma non riesci a vedere la diffrenia tra una compressione del valore 100.

Immagini di Photoshop di alta qualità Immagini del negozio preparate, più grandi quindi 800px va bene con Wordpress Default 82. Ma iPhone "grande" e-mail di posta elettronica ha registrato davvero un valore di 96 dimensioni su piccole dimensioni come miniature. Diventano "ammorbidire la sfocatura" sulle compressioni di WordPres.

.

Lower-do will-do con queste soluzioni argomenti se non si pianifica il Scenari per il tuo progetto, utenti o temi.

una riflessione finale

Sono davvero delusi a WordPress che questo importante problema è trascurato nella priorità dello sviluppo, poiché le immagini sono più importanti per essere un onlo unico efficace.

wy non possiamo solo ottenere un filtro nel posto giusto che può essere utilizzato per la compressione individuale? Si preoccupano di "cambiare il nome" su wp_editor_set_quality, e 100 è ora deprecato. Perché non ritenere che questo avvizzò fino in fondo e semplicemente rimuovere il add_filter('jpeg_quality' ... controlla solo il metodo una volta menzionato da @Birgire.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a wordpress.stackexchange
scroll top