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...

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?

Update

Also my other images which are not background images on the front page, load the full size image. 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.

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...)

Thanks

Update

1.) If Yootheme Pro calculates small images into big ones then this seems just wrong and should be fixed I believe - also a time frame would be nice - as you tell me; your developer confirmed that behavior and still doesn't change it?

2.) I think this could all be solved with the attribute sizes.
An option in the builder would be nice to select the width and height of each image depending on the viewport.
When I know I have 3 images aligned horizontal in desktop view - but stack in Tablet or Phone I could then specify the cached images I want the browser to choose depending on the viewport...

Kind regards

  • General Question
  • UIkit
  • YOOtheme Pro

Edited

6 Answers

1

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

1

Avatar micha.welter.42 answered

Hey, i read the whole threat. But now i am wondering how i should set up all of my images correctly.

My Workflow:

  • produce images via adoby illustrator/photoshop, save as "optimized for web" -> JPG/PNG etc. + quali 40-80% content dependen. + actual container sizes.

Should i keep doing that this way or upload at maximum Quali + DPI + resolution and set the hight/width value for each image so yPro generates the pictures in his cache ?

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 owgu answered

remove the starting slash from the image path.... so it reads images/yootheme/myimage.jpg

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