Images in Wordpess –

/ WORDPRESS, wordpress - more cheats / 21 minutes of reading

Image Sizes Explained

https://rudrastyh.com/wordpress/image-sizes.html


  1. Home


  2. Blog


  3. WordPress

Image Sizes Explained

Welcome to the most detailed tutorial about image sizes in WordPress. I hope you will find answers to all your questions here ?


/11 comments

When you upload a picture to your WordPress website, its copies – images with additional sizes will be created. Why do we need them? Because we don’t use the same size image everywhere on the site:

  • in posts,
  • in portfolio,
  • in popups,
  • as post thumbnails on archive pages,
  • in widgets,
  • in administration area etc;

So, for example WordPress allows you to use full size image on posts pages and 150×150 (for example) images on archive pages.
But wait ✋ – keep in mind that the more registered image sizes you have, the more files will be on your website and more time will be needed to process images during upload.

Default WordPress Image Sizes#

WordPress supports several image sizes by default. You can find and change them in administration area in “Settings > Media”.

Default image sizes in WordPress
Default image sizes in WordPress

So, for example you can change WordPress thumbnail size on this page.
What if you don’t use them and do not want WordPress to generate a copy for each of these sizes. You can insert the following hook into your theme functions.php.
But always keep in mind that if your WordPress theme receives updates, then better use a child theme or a custom plugin.

add_filter('intermediate_image_sizes', 'misha_turn_off_default_sizes');
 
function misha_turn_off_default_sizes( $default_image_sizes) {
 
    unset( $default_image_sizes['thumbnail']); // turn off thumbnail size
    unset( $default_image_sizes['medium']); // turn off medium size
    unset( $default_image_sizes['large']); // turn off large size
 
    return $default_image_sizes;
 
}

medium_large#

The medium_large image size appeared in WordPress 4.4 together with responsive images feature. It has fixed width 768 and proportional height.
You can deactivate medium_large size as simple as with this code:

add_filter('intermediate_image_sizes', 'misha_deactivate_medium_large');
 
function misha_deactivate_medium_large( $default_image_sizes ){
 
    $default_image_sizes['medium_large'];
    return $default_image_sizes;
 
}

How to Get All Image Sizes?#

Sometimes you have to find out what is the list of available image sizes on the website. Unfortunately there is no common way to do it for both default and custom images sizes, so:

  • If you need the list of default image sizes, you can use get_intermediate_image_sizes(), which returns an array with default image sizes, example: 
    print_r( get_intermediate_image_sizes() );
/*
 Array ( [0] => thumbnail [1] => medium [2] => medium_large [3] => large )
 */
  • If you have to list registered image sizes, you get them from $_wp_additional_image_sizes global variable, and I can teel you more, you can also get image dimensions from there, example: 
    global $_wp_additional_image_sizes;
print_r( $_wp_additional_image_sizes );
/*
Array
(
    [my-image-size-name] => Array
        (
            [width] => 400
            [height] => 400
            [crop] => 1
        )
 
    [twentyseventeen-featured-image] => Array
        (
            [width] => 2000
            [height] => 1200
            [crop] => 1
        )
)
*/

Functions

It is easy enough to use WP image sizes in administration area – all you have to do is to select an image size you need from the dropdown. Let’s better make a look at functions then.

the_post_thumbnail()#

Top 1 in my list, because I use it more often than anything else.

the_post_thumbnail( $size = 'thumbnail', $attr = '' );

Please note, that this function prints an <img> tag, not a URL.

$size
Here is what you can use as a parameter value:

  • image size identifier (name) – medium, custom etc, by default thumbnail, 
    // prints the featured image, size large of a current post in the loop
the_post_thumbnail( 'large' );
  • custom size array( width, height ), example: 
    the_post_thumbnail( array( 100, 100 ) );

    If you use it, the most appropriate image size will be displayed.

  • you can pass full value to this parameter and an original image will be displayed.
$attr
You can pass any HTML attributes here as an array, you can even rewrite src attribute! ?

the_post_thumbnail( 'medium', array( 'class' => 'my-image', 'data-id' => 1000 ) );

get_the_post_thumbnail()#

This function is very similar to the_post_thumbnail(), the difference is that:

  • The first get_the_post_thumbnail() is a post ID, everything else is the same,
  • It returns an image, not prints it.

Example:

echo get_the_post_thumbnail( get_the_ID(), 'medium' );

wp_get_attachment_image_src()#

The function allows to get an image URL.

wp_get_attachment_image_src( $attachment_id, $size = 'thumbnail' );

Please note, that an attachment ID is not a post ID. But you can easily get it, for example if you need a featured image ID, you can use get_post_thumbnail_id() function.
Example:

$image_array = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
echo $image_array[0];

About the $size parameter and a size array read a little above.

How to Add your Custom Image Sizes#

This process is very simple and consists of two steps. The first step is required.

add_image_size()#

To register an image size in WordPress you can use this function in your current theme functions.php or in a child theme functions.php or in a custom plugin.

add_image_size( $size_name, $width = 0, $height = 0, $crop = false );
$size_name
You can not use reserved image size names, here they are: thumb, thumbnail, post-thumbnail, medium, medium_large, large, full.
$width
Width in pixels, set 0 – unlimited width.
$height
Height in pixels, set 0 – unlimited height, example:

add_image_size( 'fixedwidth500', 500, 0 ); // or just skip the third parameter
$crop
Earlier this parameter could accept could accept only false or true but now it is much more extended, so here are the possible values:

Value Description
false (default) The image won’t be cropped, just resized for your custom dimension
true The image will be resized and cropped exactly by provided resolution, the central part of the image will be used.
array( position_X, position_Y ) position_X accepts:

  • center
  • left
  • right

position_Y accepts:

  • center
  • top
  • bottom
Value Description

Let’s make a look at the example:

add_image_size( 'my-image-size-name', 200, 200, array( 'left', 'top' ) );

To keep the things simple I decided to use a square size in this example. So, it is easy to say, that if the original image is horizontal, the left part of the image will remain, but the right part will be cropped, and the same I can say about vertical images – the bottom part of the image will be cropped.
It is also possible to make manual cropping using “Manual Image Crop” plugin.
But do not create a lot of image sizes as well:

  • the more image sizes you create — the more files will be in your uploads folder,
  • and the more time will need to upload an image to your site.

How to Add your Custom Image Size to Media Uploader and Gutenberg#

When you insert images to widgets and posts, WordPress (3.5+) allows you to choose what image size to use:

custom image size in wordpress media uploader dropdown
custom image size in wordpress media uploader dropdown

As you can see, it is possible to add you custom size there:

add_filter('image_size_names_choose', 'misha_new_image_sizes');
 
function misha_new_image_sizes($sizes) {
    $addsizes = array(
        "my-image-size-name" => 'Misha size' // "image size name" => "Label (anything)"
    );
    $newsizes = array_merge( $sizes, $addsizes );
    return $newsizes;
}

The cool thing is that this hook also works for Gutenberg image block.

How to Regenerate Images after Changing their Sizes or Changing a Theme#

Perhaps you know the situation when after changing add_image_size() parameters or after changing your website theme WordPress does not generate image sizes automatically and images with old resolutions are still displayed on the site.
What should you do in this situation? If there are only 2-3 pictures in your uploads folder, you can simply reupload them. But what to do if there are 2-3 thousands of images?
There is two ways to solve this situation – with plugins and with code:

Regenerate Thumbnails with Plugins

Ok, I can recommend you two simple plugins:

  • Ajax Thumbnail Rebuild
  • Force Regenerate Thumbnail

Each of them has its own advantages and disadvantages, so maybe for different situations you can choose what plugin more fits for you.

Regenerate Thumbnails Programmatically

Here I just want to show you the code which allows to regenerate images, how you will use it – it is your choice.

$attachment_id = 5; // pass your attachment ID here
 
$path = get_attached_file( $attachment_id );
$meta = wp_generate_attachment_metadata( $attachment_id, $path );
wp_update_attachment_metadata( $attachment_id, $meta );

How to Create Certain Image Size Thumbnails for Custom Post Types Only#

So, let’s imagine that your website has 10 registered custom post types, and each of them use 2-3 image sizes on the website pages. It is easy to understand that when we upload any picture on the website WordPress creates 20-30 copies of it!
There is no way to use add_image_size() for a custom post type but here is a small piece of code that solves this problem. This code tells WordPress when it have to create a certain resolution copy of the picture and when it doesn’t.
Both intermediate_image_sizes and intermediate_image_sizes_advanced hooks are OK for this task. A super simple example below, after you insert the code to your functions.php file thumbnails my-image-size-name won’t be created for images, uploaded from custom post type page.

add_filter( 'intermediate_image_sizes_advanced', function( $sizes ){
 
    if( isset( $_REQUEST['post_id'] ) && 'page' == get_post_type($_REQUEST['post_id'] ) ) {
        unset( $sizes['my-image-size-name'] );
    }
 
    return $sizes;
 
} );

A little bit more complicated example, but it is also correct:

/*
 * this hook will be fired while you uploading a picture
 */
add_filter( 'intermediate_image_sizes', 'misha_reduce_image_sizes' );
 
function misha_reduce_image_sizes( $sizes ){
    /*
     * $sizes - all image sizes array Array ( [0] => thumbnail [1] => medium [2] => large [3] => post-thumbnail )
     * get_post_type() to get post type
     */
    $type = get_post_type($_REQUEST['post_id']); // $_REQUEST['post_id'] post id the image uploads to
 
    foreach( $sizes as $key => $value ){
 
        /*
         * use switch if there are a lot of post types
         */
        if( $type == 'page' ) {
            if( $value == 'regionfeatured' ){ // turn off 'regionfeatured' for pages
                    unset( $sizes[$key] );
                }
        } else if ( $type == 'region' ) {
            if( !in_array( $value, array('regionfeatured','misha335') ) ){ // for regions turn off everyting except 'regionfeatured' and 'misha335'
                    unset( $sizes[$key] );
                }
        } else {
            if( $value != 'thumbnail' ){ // turn off everything except thumbnail
                    unset( $sizes[$key] );
                }
        }
    }
    return $sizes;
}

More about attachments in WordPress

Misha Rudrastyh
Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 11 yrs of experience.
Need some custom developer help? Let me know

Follow Misha

Image Sizing Information

The Simple Guide to WordPress Image Sizes

Using the right images in the right size is important for the look and performance of your website — the two things that will have the biggest impact on whether your business, blog, or portfolio is a success.

In this post, we’ll explain how WordPress generates image sizes and how to edit those sizes, and add custom image sizes for a slick, visually stunning website.

WordPress Images Formats

Before we get into discussing WordPress image sizes, it’s important to know about formats.

The two most common image formats used on online are JPEG and PNG.

Because of its smaller file size and high quality for photos and images with lots of colors, JPEG is the preferred format in the majority of cases.

PNG works better with limited color images such as icon graphics and line drawings.

Choosing the right format for your image matters because it affects the quality of the image and speed of your site.

Picking the Right Image Format

The basic rule for choosing the right format is JPEG for photos, PNG for graphics.

Nice and simple.

If your image is packed with colors and has different textures and gradients, save it as a JPEG. If it’s a logo, text or has flat colors, save it as a PNG.

What happens if you choose the wrong format?

To the naked eye, nothing much. You can save a photo as a PNG or a graphic as a JPEG and not be able to tell the difference.

It’s when compression is used that problems start to arise.

The Importance of Image Compression

Every image that you upload to your website should be compressed to reduce its overall size without affecting its quality. If it isn’t it will harm the speed of your website, which impacts user experience and causes frustrated visitors to abandon your web page.

When a user visits your site, their device has to download images so that they’re visible. The larger the file size, the longer it takes for an image file to download, slowing your entire website down.

According to Neil Patel, 47% of people expect your website to load in less than 2 seconds. And 40% will abandon it if it takes longer than 3 seconds. Speed is also important to SEO. Google uses loading times as a factor when ranking pages in its search engine. The slower the page, the poorer it will perform in search results.

Image compression finds the balance between file size and quality to improve user experience.

Now, if you compress the same photo as a JPEG and as a PNG, the quality isn’t likely to be that noticeable. You’ll maybe spot a bit of graininess up close on the PNG, but nothing that would put you off using it. However, the JPEG will be considerably smaller in size than the PNG. So you go with the JPEG.

PNG vs JPG image file size
PNG vs JPG image file size

If you compress the same graphic as a JPEG and PNG, the quality is noticeable. The JPEG will be the smaller file in size, but the PNG will be the much sharper image. That’s because JPEG compression works well for photos but not for graphics. As you can see:

PNG vs JPG image quality on the web
PNG vs JPG image quality on the web

Compress every image. Photos as JPEGs, graphics as PNGs.

WordPress Image Sizes Explained

The size of your image in pixels is every bit as important as its file size.

Design matters as much as speed when it comes to user experience. If the image size isn’t right it will either by blurry and pixelated, throw other elements on the page out of line, or cause unnecessary sideways scrolling.

Fortunately, WordPress has a way of processing images to prevent such problems.

How WordPress Processes Images

Whenever you upload a new image, WordPress generates three additional versions of it in different sizes: thumbnail, medium, and large. Your original image remains as a full-size option.

The reason it does this is to a) to make your life easier so you don’t have to keep resizing images manually, and b) to ensure the most optimal image is available for different locations.

For example, the image used in a blog post thumbnail on your homepage will be smaller than the image needed for the blog post header.

WordPress Image Dimensions

The predetermined image sizes that WordPress uses are:

  • Thumbnail size (150px square)
  • Medium size (maximum 300px width and height)
  • Large size (maximum 1024px width and height)
  • Full size (full/original image size you uploaded)

Changing WordPress Default Image Sizes

The image sizes that WordPress creates aren’t set in stone. If the default settings don’t fit with what you need, you can easily edit the dimensions.

  • Navigate to your WordPress admin dashboard
  • Go to Settings – Media
  • In Media Settings, edit the width and height dimensions to suit your values
  • Click Save Changes to confirm

Changing Default Images Sizes in Visual Composer

To keep things simple, Visual Composer uses the default WordPress media image sizes in content elements that use images. Editing the default sizes from your Media Settings will also change them in the Website Builder, so you’ve no need to mess around with code.

One perk of using Visual Composer is the smart image optimization functionality. If you customize your image to a random size, Visual Composer will resize it using PHP instead of just downscaling it. This helps you keep your file sizes smaller.

Background images that aren’t related to content elements like feature descriptions can be edited in Design Options. From here, you customize your image, upload multiple images, choose different background types, and reposition an image to suit your design. Check out this guide on how to move a background image.

The fact that our themes are responsive means that the image sizes you do choose will automatically resize to suit the device being used to view your website. You can instantly check your site layout on the most popular device types in desktop, tablet landscape, and portrait, and mobile landscape and portrait so you don’t need to worry about running into design issues when your site is live.

Recommended Image Sizes for WordPress Content

If you decide that the image sizes WordPress automatically generates when uploading new media don’t fit with what you need, here are some recommended sizes for content to look at its best on any device.

  • Blog posts: 1200 x 630px
  • Hero images (full screen images): 2880 x 1500px
  • Landscape feature image: 900 x 1200px
  • Portrait feature image: 1200 x 900
  • Fullscreen slideshow: 2800 x 1500px
  • Gallery images: 1500px x auto width

Adding Custom WordPress Image Sizes

The three default WordPress image sizes will cover you in most situations, but what happens if you need custom images for, say, a new widget you’ve added to your site?

In this case, you’ll need to add your own custom image sizes, which means editing the code of your site.

Note: Whenever you’re editing the code of your website, create a backup file and child theme first.

You can add custom image sizes to your website’s code in two steps.

Step 1.

  1. From your WordPress dashboard, go to Appearance – Editor and edit the functions.php file.
  2. Copy the following code and paste it into the file.
    1. add_theme_support( ‘your-image’);
    add_theme_support( 'your-image');

    Replace ‘your-image’ with whatever custom image you want to add. For example, ‘post-thumbnails’ or ‘pop-up-banners’

  3. Click Save and the add_image-size () function will be enabled.

  4. Add your custom images and sizes using this format:

    1. add_image_size( ‘post-thumbnail size’, 800, 350 );
    add_image_size( 'post-thumbnail size', 800, 350 );

    You can change ‘post-thumbnail’ to whichever image you want to add. The numbers 800 and 350 in this example are the height and the width of your image respectively. Edit them to suit.

Step 2.

Once you’ve added the new image sizes, the next step is to get them to display them in your theme. This involves adding some code to the post loop where you want to show your file.

Copy and paste the following code into your theme file before the end of the loop:

Replace ‘your-image-size’ for your image — e.g. ‘post-thumbnail-size’. When that’s done, you’ll see your image size listed as an option when you upload new images to your media library.

Step 3.

Unfortunately, the addition of the code doesn’t alter existing images. To update those so that they match your new dimensions, you’ll need help from a plugin. And WordPress certainly has no shortage of those.

The best one for this job is Regenerate Thumbnails. It’s free and takes care of all the heavy lifting.

  • From your WordPress dashboard go to Plugins – Add New and search for ‘Regenerate Thumbnails’. The one you’re looking for is by Alex Mills.
  • Install and activate the plugin
  • Go to Tools – Regen. Thumbnails and click Regenerate Thumbnails

That’s it. All of your existing images will be automatically resized to match newly uploaded ones.

WordPress Image Size Plugins

As Visual Composer is a plugin that you add to the backend WordPress to design a custom website, you’re free to install other plugins to run alongside it. Just like you would if you were using a default WordPress theme.

We’ve already spoken about Regenerate Thumbnails, but here are some we’d recommend for compressing images to improve site speed and performance.

  • Imagify by WP Rocket offer three levels of image compression — Normal, Aggressive and Ultra — to reduce the size of images without losing quality (Aggressive offers the best balance of compression and quality). It also lets you store original images in a separate folder — handy if anything goes wrong.
  • ShortPixel is simple to use a plugin that lets you compress images with minimum fuss. If you’re a photographer or use high-quality imagery for your products or services, the plugin’s glossy feature delivers compression with no risk of compromising quality.
  • Resize Image After Upload is made by the team behind ShortPixel and designed to let you easily change image sizes for uploaded media. You can set the height and width to suit and choose to compress the image at the same time. The plugin only works on newly uploaded images, but it can save time going back and forth to the WordPress settings.
  • Compress JPEG & PNG Images by TinyPNG (one of the best web tools for image compression) is simple to use and ready to go out of the box. You can upload images for compression individually or set the plugin to automatically compress, so you don’t have to worry about large files making their way onto your site.
  • Imsanity by Exactly WWW automatically resizes bulk image uploads so that they’re at the optimal size for a browser. You can select sizes for images uploaded to pages and posts, images uploaded to the Media Library, and images uploaded to headers, backgrounds, logos, and widgets. You can also convert images from BMP and PNG to JPEG and select image quality settings. If you rely heavily on media and upload multiple images a week, Imsanity will save you a ton of time.

Wrap Up

For most tasks in building and editing your website, WordPress default image sizes will meet your needs. If the design of your site requires different image sizes, use the info in this post to change the dimensions in Media Settings and your site’s code. Regardless of image size or how many times you edit settings, Visual Composer will work seamlessly with your choices, allowing you to easily drag-and-drop images into your content.

Export SVG from Illustrator to web

https://www.sitepoint.com/crash-course-optimizing-and-exporting-svgs-in-adobe-illustrator

  • make sure file is RGB
  • Naming

    Illustrator Layers and Layers Groups names are used as IDs for SVG groups


    Illustrator Symbols names are used as IDs for SVG symbols


    Illustrator Graphic Styles names are used as CSS classes


  • Simplify your shapes whenever possible

    • Use Primary SVG shapes instead of SVG paths whenever possible
    • Simplify your paths

      Object > Path > Simplify… command or Warp Tool.
    • Decide whether to convert text to paths
      In SVG graphics, text is a standalone element and as such it is searchable, accessible, and easily re-editable. This is a valuable quality for text to have. However, if you want to guarantee your text looks exactly the way you designed it everywhere, your end-user will need to have access to the correct fonts. This means choosing a common fonts — which limits your creativity — or providing a web font.
    • Use ‘SVG filters’ in preference to Illustrator or Photoshop Filter Effects

      Illustrator offers a set of SVG Filters that are applied live in the browser (Effect > SVG Filters). While Illustrator or Photoshop Effects are always permanently ‘baked into’ your raster images embedded inside the SVG, SVG filters can be changed or removed at any time with a few keystrokes.


      You can also create re-usable filters and/or edit them via Apply SVG Filter dialog.
  • Fit artboard to drawing

    If you want your SVG to be displayed predictably, it’s good habit to always to trim your artboard to the drawing before. The artboard dimensions are the dimensions of the exported SVG viewport, and any white space in the artboard will be generated as white space inside the viewport.




    Depending on situation you can use Object > Artboards > Fit to Artwork Bounds or Object > Artboards > Fit to Selected Art

  • Exporting SVG in Illustrator

    Styling / Font / Images / Object IDs / Decimal / Minify / Show Code





    • Styling
      There are three way to style your SVG and they are presented in the first dropdown list.

      1. The first is to use internal CSS (i.e. a
Scroll to Top