My slider images not loading plus favicon.ico no longer showing

My website is not performing well. It appears to be crashing. Images on my slider not loading, and this error started 48 hours ago. The images keep appearing and disappearing at will. ALSO my favicon.ico not showing in the address bar. Could ypou Please put an end to this problem

  • Predrag Dubajic

    Hi Prince Obi,

    Hope you're doing well :slight_smile:

    I checked your site and the page size is huge, it's over 60 MB, your images on that page take 63MB on their own, which is really a lot.

    You have images in there that are way over the size needed based on their holder and that's one of the things that making the site so large.

    All of that can have heavy impact on your server and cause loading issues so it's highly suggested to take care of this and it should get your images loading properly as well.

    Here are couple of examples, your logo image is 2382x2131 while the logo holder is only 48x43 pixels, in WHO WE ARE section your holders are 320x240 while the images loaded in there 2824x2118, and all the other images on your homepage are having same issue, they are at least 5 times bigger than they need to be.

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Prince Obi,

    Unfortunately this is not something that Smush can do for you because we're talking about image dimensions here.

    How WordPress works is that it has couple of it's own thumbnail sizes predefined and then the themes and plugins can defined more sizes if they are using specific image size.
    What happens when you upload a image on your site it will upload the original image and create copies for each of that defined thumbnail, so you will end up with smaller images that can be used.

    Thing with page builders, like Divi has, is that it allows you use original sized images instead of using the thumbnails.
    So even though those images are optimized their dimensions are wrong for what you need them.

    You will need to resize the images you are using in order to create smaller versions for your logo, slider, WHO ARE WE section etc.

    You can do this by editing the image directly in Media > Library panel.

    Just note that if you're using same image in multiple places that you don't resize it so it's too small.
    In that case you should upload same image with different name in order to use smaller size where needed.

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Prince Obi ,

    Could you please tell me the tool i can use to resize them in the media library. How can i do it as am totally new to this

    WordPress comes with basic image editor and it has resize option in there as well.
    When you go to your media library, click on the image you want to resize, click on "Edit more details", then on "Edit Image" and you will see image scale field on the right side, check this short video for more detailed explanation:
    https://monosnap.com/file/GPMldtqWsbY7uHmw03CkdkPiaZRkmH

    Just note that if you're using same image in multiple places that you don't resize it so it's too small.
    In that case you should upload same image with different name in order to use smaller size where needed

    When you do the above process your image will be resized and there will be no more that large image that you had before, let me explain a bit more with a certain scenario.

    Let's say that you have IMAGE1 that's used on your homepage slider and it requires large image, something like 1920x500 for example.
    Now, if you have that same image on another page on your site but there it's a lot smaller, for example 200x100, if you resized this image from WP then you will no longer have 1920x500 image and the small one will be stretched instead and it will look bad.

    So what you will want to do is have to same images but with different names, for example IMAGE1 and IMAGE2, now you will leave your IMAGE1 at the original size and use that for your slider, but go to WP image editor and resize IMAGE2 which you will use on different part on your site where you want to have smaller image.

    Hope this clears things up a bit and let us know if you have any followup questions :slight_smile:

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Prince Obi,

    your emphasis of keeping the original large images is only on the images on my slider. What of other images on my same home page? Shall i leave them at the original
    size or i should upload them and resize? In a nutshell, is it only images in the slider i should leave at
    original size, and resize the rest as image 2 and use every other place in my website?

    I referred to slider just as an example, you are actually having this issue with each image on your site, pretty much each image added with Divi image element will have this issue.
    I have attached couple of screenshots below where you can see how large are the differences between loaded images and their size on page.

    Again, in the sample screenshot, i saw the resize at 200 X 249 pixels.
    My question: Does it mean that every resize will be the above dimension,

    This was just an example resize, and when you do this it will affect only that current image, it will not affect rest of them so you will need to change them one by one.

    or how do i determine the dimension/aspect ratio of each image holder to resize?

    You can use browser inspector tool to find the needed sizes, that's what's shown in my attached screenshot.
    You can read more about Chrome inspector here:
    https://developer.chrome.com/devtools
    There's actually no need to determine aspect ratio, you can see from my video that the height was adjusted on its own when I entered desired width in order to keep the same aspect ratio.

    And if i have to use this image in 5 other places in my website, does it mean i will upload it those 5 times and resize or one time resize can do, and i start using it?

    If you have one image that you are using in different places but the sizes are the same or similar then there's no need to add new ones, this is only needed if you have really big difference between the sizes.

    The above screenshot is how my edit page appears, quite different from the screenshot you sent me, which states: EDIT MEDIA. What am i not getting right please?

    I'll add another response below since this one is packed with screenshots already :slight_smile:

  • Predrag Dubajic

    Hi Prince Obi,

    So my width i can use for that image is 782 pixels? Am I right?

    If you are referring to the image I used as an example in my previous comment that image actually has holder on home page of 320x240 pixels, as you can see here:

    Secondly, my media library is no longer showing EDIT MEDIA at so am finding it difficult to scale my images. I saw it two days ago but cant see it again. Please help. I dont really know what is going wrong with my website.

    I can still see the link in your media library and I can also see the Edit Image button on your screenshot so you can click on that as well in order to edit your image.

    I would suggest disabling some of your plugins since you have two caching and two security plugins in there, when you have such plugins with similar functionalities they can conflict with each other and cause issues on site.

    Best regards,
    Predrag

  • jeff arnold

    Hello Prince Obi

    You can optimize your website with google page speed optimization tool
    https://developers.google.com/speed/pagespeed/insights/

    Here you can enter your website url and see the result as do you need to fix, Google page speed tools also give you optimized images, css, js files so you can upload it into your website folder.
    Please keep backup for your website before doing.

    It will optimize your website and after that there will be no error appear with image size etc.

  • Prince Obi

    2. Again, with the https://developers.google.com/speed/pagespeed/insights/ does it mean I do not any longer need to manually edit and scale down my images? Will the tool automatically scale down my images for me?
    3. How do i upload it to my website folder
    4. If the answer to my question #2 is no, can you give me step by step on how you did the editing as am not getting the result you are giving. My process is:
    (a) click the customize and control google chrome icon on top right
    (b) more tools
    (c) developer tools
    (d) right-click the image
    (e) inspect
    to see the dimension but i end up not getting it right.
    Please help me

  • Adam Czajczyk

    Hello Prince Obi,

    The PageSpeed Insight that Jeff Arnold suggested is a good tool but I think in this case it would add more complication to the process: it would "optimize" the site but then you'd need to download optimized resources from it, upload it manually to the site via FTP to the correct locations and make sure that it didn't "mess up" (it can only check the site "from outside" so it doesn't know all the relationships and dependencies).

    If I may suggest something, I would recommend sticking to the way Predrag explained.

    That being said, take a look at this video please:

    http://take.ms/WF0fj

    As you can see there, I'm checking the image on the homepage right above the "The Wide White Net" box. What I did was I right-clicked (in Chrome browser) directly on that image and used "Inspect" option. That showed up a console filled with code with one line highlighted. Take a closer look at that moment on the video, please.

    You will notice that there's a small "popup" right over this highlighted line that shows a thumbnail of the image and says: "300 x 225 pixels (Natural 2824 x 2118 pixels)". This means that this image real size is 2824 x 2118 pixels but it's displayed on the site in this place as 300 x 225 pixels. So, it had been dynamically scaled via browser.

    That 300 x 225 pixels is your "target" : dimensions you want to use while scaling the image via Media Library.

    If you take another look at the video (the same moment) you will also see that right below the cursor pointer there's a small "tooltip" showing an URL (address) of the image that we're examining there; you'll see a file name there.

    So, knowing these two things (the file name and the "target dimensions") you would want to go to "Media Library" in your site's back-end, find that image on the list and then - depending on whether you got a "list view" set or a "grid view" set - click on the "Edit" link under the image file name or just on the image itself. Then in a window that opens click on "Edit more details" link and use "edit image" button there which will give you an option to "Scale Image" (where you put your "target dimensions" that you found before). Then click "Scale" and "update" and it's done.

    This procedure would be repeated for other images. Once this is all sorted, you would want to check "Media -> Smush" page and run re-check images to see if it reports that they need smushing again. If yes, use "bulk smush" option.

    All this together will significantly reduce your site's size, as a result speeding it up and reducing server load.

    Kind regards,
    Adam

  • Adam Czajczyk

    Hello Prince Obi,

    Mine is always different from yours. I followed exactly your process, and got 557 X 418 instead of 300 X 225. Am using Macbook Pro. Is there an app I need to install on my device that will correct this, if this is an error.

    No, that means that your theme was created that way - it's responsive and it "adjusts itself" depending on a device's screen size. Therefore when viewing on different devices there might be different results. I should take that into account, I'm sorry I didn't.

    So, how to deal with it? It's, unfortunately, not that easy without, rewriting the theme. That would, however, mean quite a serious custom development. But we're only trying to make the site "lighter" so it would load faster and wouldn't have so much impact on server resources. In that case we can take a sort of "shortcut".

    I don't know whether you're using a 13- or 15.3-inch version but native screen resolution for both of them is not that much different if you consider it in context of standard website. For both these devices it's big enough so we could consider it a "reference". Therefore, just ignore the results that I'm getting and stick to yours - just resize images according to whatever sizes you see there. On smaller screens they'll still be scaled down by the browser but they'll maintain aspect ration anyway. Savings on file sizes will be good enough anyway.

    Moreover, i noticed that the images are exactly as they are on my homepage, while in my case, they appear vertical, lining up on top of one another. Please what can be wrong?

    This is a different issue that seems to be related more to how the theme is coded/structured rather than to images themselves. I suggest dealing with the initial issue of this thread first and then we could get back to that one later in a separate ticket. That would let us assist you more efficiently.

    But seeing that its the same smushed image that you are getting a different result and the images well aligned as they are on my home page shows smushing has nothing to do with the bad result am getting. Is there an app i need to install here to correct it?

    You're right, smushing isn't causing this and you don't need/there's no app for this. Let's for now stick to the initial problem and once that's solved we'll be able to better deal with these image alignments.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Prince Obi,

    No, you're not doing it wrong. I checked your site and was able to replicate this behavior there too. This shouldn't be happening and images should be scaled instantly (well, almost instantly, it could take a couple of seconds each).

    What's happening looks to me, most probably, caused by some code conflict on this particular site. Therefore, a full theme/conflict test will be required. In order to perform it, please follow this flowchart:

    https://premium.wpmudev.org/wp-content/uploads/2015/09/Support-Process-Support-Process.gif

    This procedure should let you identify the main culprit (e.g. some plugin that's causing the issue) and we could then troubleshoot it further.

    Let us know here about test results, please.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.