-
What are the best image sizes for for popup & inline galleries?
-
Is code below where I replace images and if so what beside data-title and data-description what do I need to keep?
<a href="https://images.unsplash.com/photo-1554795808-3231c32711cf?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Blueberries" data-description="They grow in a forest. Pick them up and bake a pie."><img src="https://images.unsplash.com/photo-1554795808-3231c32711cf?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ"></a>
-
My personal opinion. With internet speeds going up, there is not so much benefit in serving many different image sizes. Keep thumbnails at x 2 the displayed size to look good on retina. And large images not larger than 200KB - 300KB, again serving x 2 sizes.
-
Change SRCs, HREFs, data-title and data-descriptions. Keep the <a …>
structure.
1 Like
Don’t images require a certain proportion like square, 3x4 for landscape and portrait sizes? It looks like these all have a large amount of background color around the apple, pear, other fruit.
The shape doesn’t matter, they are displayed with object-fit. Of course, you can use CSS to change sizes, shapes any way you want. Style is there just as a starting point.
1 Like
I don’t agree with your personal opinion! And Google doesn’t as well! Using multiple images with different “Art Directions” sizes and file extensions offers a lot of advantages compare to using just one image. The only disadvantage is that it cost you a lot more time. But when you use a cloud service it’s all done automatically. And plugins like Farkas Lazy Sizes make it easy too.https://github.com/aFarkas/lazysizes
-
I prefer to see good quality images on my 5k iMac screen and no 2x images that look blurry!
-
The fact that the internet is faster doesn’t mean that there aren’t locations with slow internet.
-
By only serving the proper image size and extension jpg and webp (that works on every browser now with the last update of Big Sur) you have faster loading times on mobile no matter if the internet is faster/slower.
-
Creating images with art directions means much more creativity with designing the website.
-
SEO advantage, Google measures your website speed and according to the results gives you a ranking: https://developers.google.com/web/updates/2018/07/search-ads-speed
https://developers.google.com/web/fundamentals/design-and-ux/responsive/images
https://imagekit.io/blog/improve-google-pagespeed-insights-score-for-images/
-
By optimizing your website and using good responsive images practices you save energy and bandwidth on your server.
-
And most important it’s fun to do!
Replacing href= with img src in top line is wrong. What should I do?
<a <img src="img_design/DocDesign764x900.jpg"> data-title="Orange" data-description="Want some orange juice?"><img src="img_design/DocDesign764x900.jpg"></a> data-title="Orange" data-description="Want some orange juice?"> <img src="img_design/DocDesign764x900.jpg">
<a href="https://images.unsplash.com/photo-1528825871115-3581a5387919?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Banana" data-description="Peel a banana for a quick snack."><img src="img_design/TuxCatRedChair764x900.jpg"></a>
@AllMediaLab that’s why I said it’s my personal opinion 
Responsive images are great when you can get them with low effort - for example by postprocessing on some hosting services or with a CMS like WP.
Hi @kat,
the HTML code should be:
<a href="img_design/DocDesign764x900.jpg" data-title="Orange" data-description="Want some orange juice?">
<img src="img_design/DocDesign[THUMBNAIL SIZE].jpg">
</a>
The a href should be the URL of the full size image and the img src should be the URL of its thumbnail.