hello, did anybody figure out how to use webp imag...
# supporta
Antonio Bonanno
07/30/2021, 2:53 PMhello, did anybody figure out how to use webp images instead of jpg ones in solidus?
👍 1
v
Vitaliy Adamkov
07/30/2021, 3:50 PMhi, yep, for catalog only though:
Copy code
= link_to url do
%picture
%source{srcset: asset_path(webp_source), type: 'image/webp'}
= image_tag source, itemprop: 'image', alt: product.image_alta
Antonio Bonanno
07/31/2021, 11:16 AMthanks, that’s already helpful, catalog is probably the slowest
Antonio Bonanno
08/02/2021, 10:32 AM@Vitaliy Adamkov how did you handle generation of images?
v
Vitaliy Adamkov
08/02/2021, 10:50 AM Copy code
Spree::Image.class_eval do
self::THUMBNAIL_EXTENSIONS = [:jpg, :webp]
self::THUMBNAIL_SIZES = {
mini: '48x48>', # thumbs under image
small: '100x100>', # images on category view
product: '240x240>', # full product image
large: '600x600>', # light box image
zoom: '1x1<', # zoom image, no resize
sided: '176x233>', # sided's style image
sided_big: '287x' # sided's style image (big)
}.to_a
attachment_definitions[:attachment].merge!(
styles: Spree::Image::THUMBNAIL_EXTENSIONS
.product(Spree::Image::THUMBNAIL_SIZES)
.map do |extension, (style, size)|
_style = extension == :jpg ? style : "#{style}_#{extension}".to_sym
[
_style,
[size, extension]
]
end.to_h,
default_url: 'noimage/:style.:extension',
url: '/spree/products/:id/:style/:basename.:extension',
path: ':rails_root/public/spree/products/:id/:style/:basename.:extension'
)
...Vitaliy Adamkov
08/02/2021, 10:51 AM Copy code
...
self::CONVERT_OPTIONS = {
sided: '-size %s xc:white +swap -gravity center -composite',
sided_big: '-gravity center -crop %s +repage'
}
attachment_definitions[:attachment].merge!(
{
convert_options: {
sided: Spree::Image::CONVERT_OPTIONS[:sided] % '176x233',
sided_big: [
Spree::Image::CONVERT_OPTIONS[:sided_big] % '287x430+0+0',
Spree::Image::CONVERT_OPTIONS[:sided] % '287x430'
].join(' '),
sided_webp: Spree::Image::CONVERT_OPTIONS[:sided] % '176x233',
sided_big_webp: [
Spree::Image::CONVERT_OPTIONS[:sided_big] % '287x430+0+0',
Spree::Image::CONVERT_OPTIONS[:sided] % '287x430'
].join(' '),
zoom: '-auto-orient -colorspace sRGB -quality 100 -define jpeg:extent=1Mb -define jpeg:dct-method=float -strip',
zoom_webp: '-auto-orient -colorspace sRGB -define webp:target-size=512kb -strip',
all: '-strip -auto-orient -colorspace sRGB'
}
}
)
...2 Views