Website Images Distorted

Hello. I have a WordPress site setup at iron-oakfitness.com. I’m not sure what’s causing the error, but my images are all distorted on my page. When I view from my phone, everything displays properly. Can anyone help? Thank you.

Hi, rstaad. Welcome to the forums.

Please start by validating your HTML. At the present time, it shows 11 errors, most of which are significant and could be contributing to a problem.
https://validator.w3.org/nu/

I’m not sure what you mean by “distorted”. I do not see “distortion” but I do see different sized images overlaying one another in a “slider”. You may need to post a screenshot or two to be sure we understand the trouble. Please mention the browsers and mobile devices you are using.

I agree with @ronpat they do not seem distorted but positioned incorrectly.

I noticed the page is slow to load the first time and there are a lot of white areas and the social links are incorrectly positioned.

Thanks for the response ronpat. I purchased this template which I’ve found very hard to navigate in WordPress. Unfortunately, I have minimal HTML and CSS knowledge. I did look at the 11 errors you’re referring to but I’m not sure how to best approach fixing these.

When I say “distorted,” I mean pixelated (not sharp). On my screen I don’t see any images overlaying one another in the slider. I’m using Safari and Chrome as well as Safari on my iPhone. I also noticed that on my iPad, the home page does not appear to be responsive to the format.

Thanks Rubble. I just mentioned in my response to ronpat, I’m pretty new to HTML and CSS and this is a purchased template for WordPress. Would you mind explaining what you mean by the images being “positioned incorrectly”?

I too noticed that the pages load slowly. I’ve attempted to research this and resolve issues for this but am still stuck.

As for the social links being incorrectly positioned, I noticed that as well but also don’t know what to do to fix this.

Thank you for your time and help.

Your problems are due to image optimisation, size and resolution.
The images in the slider are not sharp because they have insufficient resolution. They are only 1100 pixels wide, but are being displayed larger than that on a desktop screen.

The page is slow because some images have too high resolution and enormous filesizes.
Namely the two small images of ladies exercising in your screen shot at the bottom of the slider.
funny_stretching.jpg is 9.2MB and woman-with-kettlebell.jpg is 4MB.

So the images in the slider need bigger versions to appear clear and the other two images need to be reduced in size to be faster.

3 Likes

I do not use Wordpress and assumed the two women images were not supposed to be overlapping the slideshow.

According to https://tools.pingdom.com/#!/eh9ieP/www.iron-oakfitness.com you have 24 style sheets and 49 JavaScript files and I would say this is not very good. Along with the large images @SamA74 mentioned gave me nearly a 5 second load time.

With the link @ronpat provided you just need to work your way though the list; for instance you have two description meta tags and one needs removing and you have a <\p> in the wrong place.

There used to be a plugin for firefox called html tidy that used to be good for finding errors in the html. I find thi information provided by using the F12 button in IE and Firefox not as useful.

1 Like

Thanks for all the help! Sorry for the delay in responding. I have work and school full-time. Anyway, I’m new to WordPress and purchased the template. When you say that 24 style sheets and 49 JavaScript files is a bad thing, is that simply for load time?

I’ll definitely checkout HTML tidy.

A lot of websites seem to be getting a bit bloated these days with lots of graphics and JavaScripts and to be honest in a lot cases it do not matter as most people have the bandwidth and speed to cope with. Although if they are using up their data allowance on a mobile phone they may not be very happy. Load time has an effect; if a page takes to long to load unless they want to see it for some specific reason they may move on. Below is a quote I found on the web.

  1. World Wide Wait: a.k.a Loading Speed Problem. According to Kissmetrics, 47 percent of visitors expect a website to load in less than 2 seconds, and 40 percent of visitors will leave the website if the loading process takes more than 3 seconds.

Your main page took about 5 seconds to load for me using high speed fibre although I am in the UK. After it had loaded once it was a bit quicker the second time due to some items being in my PC cache.

Image size is a classic mistake for the beginner as the do not realise if they have a large file size image but display it smaller on a webpage the whole of the image is downloaded. It is only reduced by the browser in image size on the webpage and not the actual file size.
As @SamA74 your woman-with-kettlebell.jpg is a 4.0MB image 5562x2892px and you are displaying it on your page about 400px wide which would be about 40KB so you could save 3.96MB on the one image.

Even if you resize the source image to twice that to account for retina display, you should be able to shave off a considerable amount of weight.

The other factor, 24 CSS and 49 JavaScript files, may or may not be the weight as much as the number of requests. AFAIK most modern browsers are able to make a few requests at the same time. But when there are more, they need to make more requests. Similar to weight, it may not make a noticeable difference for those with a fast transfer, but for others it will. IMHO if files can be combined without too much trouble it’s a good idea to do so.

Thanks @Rubble. I’m having a hard time figuring out how to determine what size images to use and how best to resize them. I’ve seen many different approaches to what people think is best. What is your process? I tried to resize the image “woman-with-kettlebell.jpg” within WordPress but it appears to not have changed. I can see how this would definitely speed things up. Thanks again.

Thanks @Mittineague. So, I guess I’m confused about resizing for display and resizing for image size. I get that if the file quality isn’t large enough that when it shows on a larger screen size, it will be grainy. But, how do you best determine what is a “quality” image size, and then, how best to resize it?

You will need a graphics/paint program to re-size, like Photoshop or Gimp, though simpler programs can do it, MS Paint at a push.
The actual size in pixels should be the same as it is displayed on the page for normal screens. So it it’s 400px wide, make it 400px wide. If you want to cater for retina displays, double that, make it 800px wide.
Then on save, bump up the compression as much as you dare. Some programs give a preview, so you can see how much it will degrade the quality.

This is where I have doubts about my resizing and quality decisions.

Neither my acuity nor my sense of what is “acceptable” are as good as they could be.

I fear that what looks good to me will look pixelated / blurry to those more discerning. So I usually try to err on the side of “not reduced quite as much” and hope that it’s a good balance.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.