Avatar sven.grossenbacher asked

Yootheme PRO Image compression (srcset) - not working for me...

Hi,

I develop a new website with Yootheme Pro.

Now srcset does not seem to work - it always loads the full size image I uploaded no matter what viewport.

** I followed your guidelines**:

Set the width and height in pixels (e.g. 600). Setting just one value preserves the original proportions. The image is resized and cropped automatically and where possible, high resolution images will be auto-generated. Therefore, images for upload should be as large as possible.

My workflow
I create my background header image in Photoshop
I save it as a .jpg file optimized for web at it's full size of 2560px by 1709px
I upload it to my site
I specify the width and height of the background image in the image settings of the section (2560 x 1709)
Now I check the different viewports in the console.
No matter what viewport (mobile, desktop, tablet or phone) I check it always loads the same full size background image which is the full size image I uploaded at 2560 by 1709px. And I can clear the browser cache and builder cache it makes no difference.

But Sacha commnented in another support question:

So, you have to set a width and height to generate srcset images. Also upload the image in a larger size. That's it. If you inspect the image in the frontend you will notice srcset images are set.

If I check the background image in the conosle and no srcset image is set - it always loads the original one....

Also
After checking Google Page Speed and realizing that I could save 24 % with my header image, I downloaded the optimized image offered by Google with a size of 971 kb
I saved it in my image folder
I delete the old background image on the server
I upload the new one 971 kb
I choose the image as my section background image
I clear Cache in the Builder
I reloaded the website
I check the newly created image in the cache folder - Big surprise Yootheme Pro just created an image of 1.17MB
It is bigger than the optimized image I just uploaded

In short


1.) It seems that Yootheme Pro does not crop, resize, auto generate and save the original image into various images that will be used depending on the viewport.
a) Why ist srcset attribute not properly working? I think it should work out of the box as I read.

2.) When I optimize an image to lets say 971kb and then upload it - why is YoothemPro recalculating it to a bigger image of 1.17MB - that doesn't make sense to me

Thanks for your help.

Update

Thanks for your answer but it does not help - as your Support Member Sacha clearly states in two support threads:
First one:

So, you have to set a width and height to generate srcset images. Also upload the image in a larger size. That's it. If you inspect the image in the frontend you will notice srcset images are set.

Second one

Morgan Gustaffson writes:
8. Cannot optimize images for different devices
We cannot select different images for different devices.

Sacha answers:
8. Solved ✓
YOOtheme Pro already comes with srcset support out of the box. So all image you are adding are automatically available in different resolutions. Marked solved, as long as you don't support for the picture element? We can add this easily...

So I do not know what I understand wrong. According to Sacha the attribute srcset and size works out of the box.

But you say it does not - sorry but I do not know what I could not understand as Sacha is very clear and straight forward. So if he says it works it should work or what is he referring to?

When I started developing this site I chose Yootheme Pro because of Sacha's statement that srcset works and that all images I upload are available in different sizes - now I have developed half of the site and you tell me it is not working? Sorry but this brings me into a lot of trouble.

I cannot believe that Sacha says it srcset works but it doesn't...

Update

Hi, thanks but no it does not help at all.

I started developing a new site and chose Yootheme Pro Theme, as according to your support member Sacha srcset attribute works out of the box and my client needs fast loading times for images in all devices and that is what I promised him...

Now when having done almost the whole site you tell me it does not work and maybe later you might come up with a solution? Sorry but what do you expect me to tell my client? Especially after reading those clear statements of Sacha.

Please help me out here as I am really in trouble here and do not know what to do.

And srcset sizes attribute is supported by all up to date browsers already - check here

Update
Also my other images which are not background images on the front page, load the full size image and srcset is not working there neither there is no media queries telling the browser to take which picture at what size - also there is only one image (the original) in the cache folder of those images - so it does not work there either. Please check the four images on the site (...home-left.jpg) they always load the full size image instead of a scaled one. Simply check the console or have a look at Google Page Speed developer tool - it tells me I could save 97% in size of this image...

Update
Ok thanks for your input. I went and I did what you suggested but my Image sizes are still not perfect in mobile view and very bad in desktop view.

According to Google Page Speed they should be optimized. Now either Google Page Speed is completely wrong or there is a problem in your code. I think srcset/size does not take into account if an image is displayed stack or parallel in the grid .

  1. For example the three teaser images:
    Google Page Speed Desktop View: Industry 4.0 Consulting (94% reduction), Infrastructure (94% reduction), Software (94% reduction) .

This probably happens because in the image settings I chose are: width 900px and height 500px but:
In desktop view the images are next to each other (Parallel) and their max size is 374px by 207px
In mobile view the images are on top of eachother (Stack) and their max size is 900px by 500px (so that is correct - but it could still compress them up to 22% more and when uploading the optimizdd images that Google offers me. It then recalculates them puts them in the cache folder at a bigger size again - so I have no chance to optimize them as Yootheme Pro makes them bigger again...)

So how can I optimize the images? I mean this is far from good and far from Sacha's statement: ... all image you are adding are automatically available in different resolutions**. Marked solved, as long as you don't support for the picture element? We can add this easily...

Or what did he mean by: ...as logn as you don't support for the picture element - we can add this easily?

Thanks

Update
Hi,
Thanks but.... I asked the support question over ten days ago and you keep telling me that your developer will look into the problem - yes thanks but when?

1.) If your software calculates small images into big ones then can you please fix it it is not the way it should work. I optimize images in PS or download them directly from Google then upload them and they are re calculated into bigger ones...your developer confirmed that and still doesn't change it?

2.) Also I have never had as bad image optimization scores with any website I created in Warp 6 or Warp7 but with Yoothem Pro it's like moving back in time and not forward... - as you see I could save 95% with some images and in none of my Warp website this was the case. If people read what Sacha wrote in various Support questions they will start building a website relying that things work the way they should work - but it seems they don't - I don't find this very trustworthy and am quite disappointed that no solution is given after 11 days...

Sorry I am upset but I have a client asking when we can go online? And the only thing I can say is I don't know when the image compression will be fixed as Yootheme does not respond or responds but does not give me any clue on when they will help me fix the problem.

So please come up with a solution to the problem as now 11 days after my initial question I still don't have a solution - not even a time frame of when this will be solved.

Kind regards

  • General Question
  • UIkit
  • YOOtheme Pro

Edited

4 Answers

0

Avatar philipp Yootheme answered

Hi Sven,
thanks for your detailed feedback. Regarding your first problem. The description might be a little misleading but we are not resizing your image unless you add a wished width or height in the input fields. So the images is resized and cropped ( via CSS ) so that it doesn't expand above your container or the website. But currently it is not stored in different sizes.
You can cache your image in a different size then the original when you give the builder a width or height, which should be used for resizing the image in the cache. So for example if you know the image is shown within a container, which has a max. width of 1200px you can set the width to 1200px, so that the image will be downscaled with PHP and stored in the cache folder. This image will then be used instead of the original image size, but also for every viewport.

I think this might be a good feature to add a option to give different sizes for different viewports, so that the user can decide if the image will be resized into 3 images, which then will be displayed depending on the viewport, but this is currently not possible.

Taking a look into your second topic, this is really odd. We have to check this, since this really doesn't make any sense. Thanks for reporting this, we will take a look, why this is happening and how to avoid such a behavior.

Kind Regards
Philipp

0

Avatar philipp Yootheme answered

Hi Sven,
I talked about this with Sascha since I might got it wrong myself.
Srcset is working when you add an image to your website via the <img> tag. So when you have a gallery or the image within the post. Since the background image is build with the CSS property background-image the srcset can be applied to this. There are some alternatives coming up, but are not yet supported by all the browser ( for example image-set ) .

So when using images on your website the srcset works out of the box as long as the images are not set via the background-image CSS attribute, since here the browsers itself doesn't support to choose from different images sizes to find the most appropriate one.

Hope this makes it more clear why this occurs :)

Kind Regards
Philipp

0

Avatar philipp Yootheme answered

Hi Sven,
the srcset in the case of the 3 images works that way that you define a width you want to display that image, than YOOtheme pro generates 3 images. One with the width you defined, this will be used by default. One with the size of 80% of your wished size, this will be used as a slow internet fallback, if the browser supports it. And one with the doubled size for Retina displays.

In your case you might want to set the width to something around 900px since this is the largest way the images are displayed. Now the builder generates a image with this width and one with the doubled and one with 80% so that browsers can select the ones they think fit the best. iPhones will take the double sized one, since they will try to show the image with the max quality on a retina display which has a doubled density, while smartphones with a density of 1 will take the 900px version.

Since you have set the width to auto it provides the image in the full size, so that mostliky this will always be picked, but you see the 2048px width version as well which is the 80% version in that case.

Kind Regards
Philipp

0

Avatar philipp Yootheme answered

Hi Sven,
no the code actually can't take in account if the image is stacked or full width, since neither does the browser knows this on page load nor does the server. Since this is client sided code and might change ( for example when there is a JavaScript animation ) the browser selects the image according to its own width and the density.

Google Page Speed none the less tells you that this can be optimized since they are analyzing the result as a static page and here they just see that the image is larger then the container holding it. So when using a CMS and a responsive website from this point you can optimize these images anymore. As I said above we will take a look into the problem that the image gets larger when it is cached, the first thoughts of the devs have been, that Google uses a more efficient decoding algorithm for the images, which is getting lost when our decoder caches the image again. This is a thing we will work, since this is as you said a thing that can easily speed up the customers website.

Kind Regards
Philipp

Know someone who can answer? Share a link to this question via email or twitter.