Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

Acabado Image Standard Sizes For Use In Your Blog

As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

Acabado, unlike a great many themes has some very specific image sizes which will work within the display of things like featured images. In addition the needs for the Hero on the homepage, Logo, and FavIcon are specific sizes which won’t allow upload and selection without being the right size.

When you get images from online stock areas they will most likely be a size which may not work right off with Acabado and you will need to shift their scale and setup to function well within Acabado. I have a guide here on how to make all the images crisp and sharper on your entire site.

Acabado Primary Site Images

This is the main landing page for your site and is where you will have a lot of images displayed. To ensure you keep as fast of loading speed you want to make sure these are properly sized and optimized for display.

Site Logo – 480px x 240px

The site logo is a rectangle of space available at the top of the website. Within Acabado this is a fixed size box which allows only a specific size of image to occupy the space.

Acabado Logo Hint Text
Acabado Logo Hint Text

As you may see from my site this is possible to manipulate if you understand how to force the change in resolution. Here is my logo guide on helping you look at logo changes.

Favorite Icon – 40px x 40px

The favorite icon is the image that displays when someone favorites your website or when a tab is open in tabbed browsing as a reference to the page contained.

Almost any size will work in themes as long as it is in ratio to itself, unlike others though Acabado is specifically coded to only allow you to select an image up to 40 pixels by 40 pixels.

Homepage Images

The homepage offers two specific images to configure and the are the hero (main CTA) and the featured tiles which allows for up to 6 targeted posts or pages that you want to get users over and onto.

Hero Image – 1200px x 400px

This image is a specific resolution to display on top of your homepage blogroll and sidebar. This is meant as a main CTA, or Call To Action, for your website and should be the one post you would want EVERYONE to see.

This image has some limitations as the size is fixed at 1200×400 pixels and needs to be EXACT, 401 or 399 pixels for example will not be allowed to be uploaded nor selected from the media gallery.

The featured tiles appear to be best situated with a 3:2 image ratio which will allow you to upload and show the entire image. This scale allows for images to fit the container that displays them, if you deviate you will have parts of your image cut off.

Example 3:2 Ratio Sizes

  • 1200×800 – My Preference For AcabadoTheme.com
  • 1024×768 – Good mid-range solution for those looking to shave a few more kb off their image sizes.
  • 800×600 – Getting to where these may start to look less sharp and more pixelated.

Blog Posts

These are your main content that people will be reading and scrolling through. What you want to look for is that the featured image works across all the places properly (recent posts, blog archives, etc)

Featured Images – 1200px x 800px

This size is a perfect sweet spot to allow images to work in featured images in places like the [ Recent Blogs ] on the homepage along with on the blog post should you choose to have them on the post as well.

This also allows for these images to be used without editing on the Featured Tiles on the homepage. This makes your images able to be used for more than one purpose each should you want to change up the tiles.

Images Within Posts

This is a full-width image for your post area and by shortening the height you make the picture impactful without obscuring and slowing the reading for the users. The content width area is approximately 768px, so any image contained within the blog over 768px will just be rescaled to fit.

My choice is why I keep these at 1200×800 to allow them to be useful all over the website in multiple spaces without needing to make more images.

Bottom Line

These are all just guidelines but they will work on each blog perfectly as they are sized for the blocks and for the space to be utilized. Changing from this resolution will change how they are pressed into the containers inside Acabado.

Please feel free to leave a comment below if you know of other perfect image sizes and I will add them to the list.

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

32 thoughts on “Acabado Image Standard Sizes For Use In Your Blog

  1. These say 1200px, but in 2 of the tutorial videos, @Jim said to change the shortpixel plugin setting to 950 and 927, or something weird.

    Hero Image – 1200px x 400px
    Homepage Tiles – 1200px x 800px

    If I upload a 1600px wide image, will it get scaled down to 950px and then back up to 1200px, losing quality?

    1. I understand thats what he said, but I am running the resolution the theme is optimized to display and I don’t lose real estate of the picture. I understand what he said and it does work, it just doesn’t look as clear or nice when displayed you can also have edges cut.If you tellit to cut the image to 950px you just lose everything over 950.

      1. I think I’m going to put the setting to 1200px just to make sure it’s not scaling up an already scaled down image.

        Glad the comments are working, and thank you!

  2. For some reason, I keep having some sort of padding to the right of every image I post. The featured image works fine with no padding.

    But the image inside of the post all has a right-hand side padding. I took a look to see if it was something I set or did, but can’t seem to find anything that indicated it was me.

    Need a little help

    1. Do you see the same look on this site? If not you may have CSS which is stacking further down then you expected. Do you post your site in your videos? I haven’t watched the last 2 yet.

      1. Hey Josh,

        I don’t share the site on my Youtube channel, but I can send it over to you for you to look at if possible.

        The images on this site are NOT the same, as your images are showing up the full width. Mine applies the full width to the featured image, but then the rest in the posts all have padding to the right of the image (causing it to look offset)

        1. Heres a link to the images,

          https://drive.google.com/open?id=1HYo9EcIMOXBdBVuxEZCCvD3wokv5SPQr

          1st image = featured image
          2ns image= in post

          1. So I would wonder, what is the settings in Gutenberg for the image, is it 100%, if so is the image width under 768 or so pixels? If so then it may be that it is a pixel issue.

            I do the images on here at 1200×800 to make sure I give them enough width to fit.

            Let me know and love the channel btw

      2. Thanks, Josh and glad you love the channel. I try to make it useful info even though I’m still learning myself lol.

        Settings in Gutenburg is set to 100% YES and the image is 768 pixels wide and 500 pixels high.

        I’ve tested doing them at 1200 pixels wide and still the same problem. It seems like theres some sort of padding causing the issue.

        I am still using x theme as a child theme. would that cause the issue if I had the wrong image settings there?

        1. It could but it would more appear something would be adding padding to all images as featured are pulled and posted differently than an in article. Email me and I would love to see how far the rabbit hole goes with something overriding the style.

          The only other thing would be if you had custom css in the customized when xtheme was installed as it may still be in effect even though it is inaccessible. You would have to bounce over to the theme to gain access back currently though.

          1. Great il email you now Josh.

            It’s definitely not CSS on the X theme as I already reinstalled it and cleared the pre-existing CSS that I had in there.

  3. Hi Josh,
    I only have 7 articles published at the moment.
    I have made the full-sized image at the top of the blog bost 950 x 630 and the featured images (generally the same image) as 400 x 300.
    Are these okay or do you recommend I change them? I think I got these sizes from the 60 Steps.

    1. If you are running Acabado I would suggest 1200×800 as that is the resolution which looks clean and matches well for featured image displays. If you have originals then I would say at least change featured images, in post use whatever is needed to convey the reason for the image. GL!

      1. So just to confirm Josh, the size 1200 x 800 is for BOTH the large image at the top of each blog post AND the featured image? Just got me wondering why the course says to make the featured image 400 x 300 but I take it 1200 x 800 is best for both in the Acabado theme without slowing down loading the posts?

        So in my WP settings, in the ‘resize image after upload’ I need to change the max image dimensions to 1200 x 800?

        Do I also keep my JPEG compression level at 90?

        Also, what do you mean by ‘Images Within Posts’ – 768px x 256px. So the images I have been inserting in my posts have been the same size as the one at the top, is this not correct?

        Thanks Josh!

        1. Well featured images when displayed on the recent blog and when you are looking at a category blogroll itself this is done at a 3:2 ratio, so any image size which follows this will work. The thing is that 1200×800 can look very crisp while not causing any issues in speed (I have tested numerous hosts and have 120+ posts on here currently). I would recommend changing the shortpixel settings to 1200×800 as that means you can then use that image almost anywhere in the site including the featured tiles on the front page later if you need. Within posts means the actual blog width is 768px so there is no need for a wider image and you can choose to save file size there to allow all the posts to still load fast, especially if you add 10+ images in a post.

  4. Josh, many thanks mate as you can see I’m an IT numpty!!

    Okay so I understand the large image at the top of each blog post can be the same as featured images in Acabado – that’s great as it saves uploading a second image into the library and making it smaller as per the images part of the 60 Steps!

    I’ve now altered my WP media setting to large 1200 x 800 (I have medium set to 1024 x 768 and thumbnail 150 x 150) AND my short pixel settings to resize image upload to maximum
    1200 x 800 and also on the Shortpixel Plugin Settings to 1200 x 800.

    And the other images I place within the posts (except the main one at the top) you recommend they are 768px x 256px for faster loading?
    Sharon

  5. Hi Joshua,

    thanks for the great content on this website. I have a question regarding the Acobado Theme.

    Normally, when you insert an image (thumbnail) for your blog article, this image will also appear larger at the beginning of the article. I just created a blog article and added a thumbnail, but when I post the article and want to look at it, there is no image at the beginning of the post. I don’t see the thumbnail at the beginning of your articles on your website either. What could be the reason for this or where can I set this?

    Thanks for your help!

    1. Because it is a setting in the Acabado Settings (about 5- sections down as a check mark) I dont like having images there and rather you can all get to the content faster.

      win, win.

      Show Featured Images
      If checked, featured images will appear at the top of individual blog posts.

  6. Hi. How can I make home page recent post images window bigger so my image doesn’t get cut from sides?
    I want them to be 1200 by 630 so when I share the link, the whole image shows up on Facebook and LinkedIn and image does not get cut from sides on the home page.
    Thanks.

      1. Hey Josh,

        I’m also having the same problem as Deepak. The post images that appear on our blog page are cropped slightly on all sides. This has happened since we’ve tried to rectify the image size to please Google’s AMP image size requirements.

        Can you elaborate on this: “it is possible to skew the feature image size”. How do I skew the image to avoid being cropped?

        Thank you!

        1. Why are you using AMP is my first question as in todays world with Acabado AMP isnt going to move the needle for you, to be brutally honest. I would recommend removing that instead of bending wills for 99.99% of people you are adding in a headache for no purpose unless you are aiming to be news service.

          Otherwise, you have to then tweak the css regarding the images used, this would be pure CSS you can check through the front end and find a ratio which works for your image size as I do not know AMP.

  7. Hi,

    Just wondering if you ever found a solution to the featured image padding as discussed with user Leon Angus in this comments thread? I’m running into the same issue on Acabado, feature images are resized (blank space on the right) as if there were some padding implemented in the CSS.

    Thanks,
    James

    1. without a url it is hard to look and see, none of my Acabado sites has the same issue so it would be nice to see what you have applied on an image.

  8. Hello, put acabado on my website yesterday, Because of that my featured pictures was not really sharp I am changing them to a bigger size. But on my home page I got only old pictures( I tried clear cache, restart PC…) but on my recent post are already a new one. Any idea why? thx

  9. “This site was… how do you say it? Relevant!! Finally I’ve found something that helped me. Cheers!”

  10. I have a question : how can i do to change the post featured image size? it comes in 300×300 and that is a not cool size. i would prefer some bigger size.

    thanks
    Oscar

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content