I used next/image before and worked great, but never knew how the optimization worked.
Now I am learning on optimizing images in Html5 and Css3 with the usage of <picture> and <source>. I am a bit confused if I could combine these with next/image or if next image itself takes care loading images depending on the device width.
Related
I'm building my own portfolio from scratch. There are a lot of high-quality images that I want to include but I don't know how to do it without slowing down the site or sacrificing too much image resolution.
I created my wireframes in Figma but when I exported the images, the quality got reduced significantly. If I export them 2x or 3x, the resolution gets better but then it's a tradeoff with speed. I'm pretty new to front-end, trying to code my own website as a way to learn to code so please help. My questions are:
What is a good practice to optimize images for the web?
How to know if your image is too big? What is the typical size of an optimized image?
What are some tips/tricks/resources that I can further look into?
Thanks a bunch 🤓
Take a look into lazy loading images, it loads in a lower quality version at the start and then uses JavaScript to show the full quality when the user reaches that point of your website.
Here is some reference from google going into more depth :
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
There are a few things you can do with high quality images:
Lazy Loading: using JavaScript the images loads once the user scrolls into view to that part of your website. The benefit is it doesn't load resources that aren't needed, meaning quicker load times and more efficient page loading.
More about it here: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
Progressive Loading (like how Medium does it):
You load in a really low-quality image and then progressively load in higher versions of that image over time. This has the benefit of showing the user something will show here eventually.
More about it here:
https://jmperezperez.com/medium-image-progressive-loading-placeholder/
Alternatively file formats:
Consider using alternatively file formats like WebP. Although be careful with browser support, but you can set a fallback of JPEG or PNG
More about it here:
https://developers.google.com/speed/webp/
Other things to note:
Good/standard practice is make sure to compress your images. If it is on the web then 72 DPI resolution (not like 300 for print), RGB colour format and make sure to use the right file format such as PNG for icons or transparent backgrounds and JPEG for more detailed pictures. Where possible use SVG over PNG and JPEG for vector based graphics.
In terms of sizing a common mistake is people put in a 4000 x 4000 size image into say a 600 x 600 image frame so make sure your images aren't overly sized for that space.
Currently, Google recommends that the photo should be about 200kb so I know that this is really not enough :) I am also involved in photography. I have have a website prepared so that it is indexed and has even 80 pictures per page and the site is very fast. At https://developers.google.com/speed/pagespeed/insights/ it's 100/100 and it's indexed by google;) I use several sizes of the same image depending on the screen width as well.
I'm using IntersectionObserver with which I only load those pictures that are visible on the screen for this page to work very fast.
Below is an example of how one photo looks for different screen widths.
<picture>
<source data-srcset="./images/lwow/576/IMG_0114.jpg" media="(max-width: 576px)">
<source data-srcset="./images/lwow/768/IMG_0114.jpg" media="(max-width: 768px)">
<source data-srcset="./images/lwow/992/IMG_0114.jpg" media="(max-width: 992px)">
<source data-srcset="./images/lwow/1200/IMG_0114.jpg" media="(max-width: 1200px)">
<img data-src="./images/lwow/1200/IMG_0114.jpg">
<noscript><img src="./images/lwow/1200/IMG_0114.jpg"></noscript>
</picture>
Here is the link to the whole code https://github.com/tomik23/photoBlog
PS. A very important photo exported from photoshop is optimized using https://tinyjpg.com/
Unfortunately, photoshop is not suitable for photo optimization.
For my needs, I prepared a biblical to generate several photos at once in different resolutions and format and is called sharp-images on my githab
I like markdown. I use it in combination with Template Toolkit, and basically I don't have to write any html. My webpages are static, having only the js snippet that Google analytics uses. I would mostly like to keep it that way. I have zero javascript experience.
I can do some degree of simple page layout using a handful of classes applied to DIVs.
So this
<DIV class=picr3>
![Shelterbelt-12][2]
Planting a shelterbelt, or any tree project...
***
</DIV>
[2]: /Images/Shelterbelt/Shelterbelt-12.jpg
is all the html I need to use to have an image sized to width 30% of the Content div floated to the right. The system isn't perfect, but it resizes reasonably well, and since the page is static it caches well, and is fast to deliver.
More important to me: I can spend time writing content, and very little tweaking layout.
The problem: If I serve an nice desktop image to a mobile phone, download times are high. If I serve an image of reduced resolution to make phone access quick, it looks like crap on a desktop.
In Html we now have the element, combined with the srcset and size attributes. This turns what used to be a simple img tag into this:
<picture>
<source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw"
srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w">
<source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw, 50vw"
srcset="stick-figure.png 416w, stick-figure-hd.png 416w">
<img src="stick-original.png" alt="Human">
</picture>
At this point, I'm looking at having to roll my own solution much along this line:
Replace <DIV> with <div> On my implementation of Markdown, being between lower case tags means that the content of that tag is not Markdown processed.
Come up with a standard naming convention, say whateverimage-L.jpg for the large version, -M.jpg for the medium version and -S. jpg for the small version.
Pre process the resulting markdown files to generate the full element from the embedded markdown. I think this is within my limited perl programming capabilities.
Gotchas?
This wheel has been invented already?
Better ways to approach this? Should I bite the bullet and do this with a javascript snippet?
Some other solution I've missing in my wandering of 'a maze of twisty passages, all different' that is the internet?
Note to moderators: This may be a better fit for webmasters.SE. Seemed it was more program-y. If you feel it should be over there, please move it.
I am trying to change/art direct an image based on device and screen sizes — not just change the resolution of the image.
I am using the <picture> element, and it is working fine when I resize browsers on my desktop, but is not working on mobile devices.
The code currently reads:
<picture>
<source media="(min-width: 950px)" srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home.png">
<img src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”>
</picture>
I understand that <picture> is not supported on all platforms, so I also tried srcset, as follows:
<img srcset="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png 500w,
http://phillipsperfections.com/images/PhillipsPerfections_Home.png 950w"
sizes="100vw”
src="http://phillipsperfections.com/images/PhillipsPerfections_Home_500.png" alt=“image”>
I want the image to always be 100% width, and to switch to a different image when viewing below 950px.
I am referencing code from here http://alistapart.com/article/using-responsive-images-now#section3, but am I missing something? Can someone point me in the right direction?
My working site is http://phillipsperfections.com/. You should be able to view source for all of the code.
Thanks so much!
Because the two versions contain different visual content, you are indeed “art-directing”, and should use the <picture> element (and not srcset) to switch between the two versions of your image.
(If the two versions were identical, scaled-up-and-down versions of each other, srcset would be the way to go).
Your <picture> markup looks correct; what mobile browser are you not seeing the expected version in? <picture> support is actually pretty good these days; here’s a current support matrix.
If you need the art direction to work in older browsers, you’ll need to use Picturefill — and inspecting your site, it looks like you are! But with some extra quotes which are preventing the script from loading:
<script src="“http://phillipsperfections.com/js/picturefill.js"" async=""></script>
If you change that to:
<script src="http://phillipsperfections.com/js/picturefill.js" async></script>
Do you see the desired behavior in the mobile browser that wasn’t showing it to you before?
As far as I can tell, the srcset and sizes attributes focus more on applying a suitably scaled image for the device’s size and resolution.
There appears to be no facility to use these attributes to select an alternative image based on the screen size, such as one cropped or oriented differently.
Is this a correct understanding of the situation? Does that mean we will have to wait for the picture element to be widely supported for this task?
You are correct that srcset and sizes are only there to provide different resolution alternatives to the "same" image - there's no guaranty which resource will be picked.
If you want to provide cropped or proportionally different alternatives that are guarantied to match your responsive breakpoints, then <picture> is what you're looking for.
As far as support goes, <picture> is fully supported in Chrome and Firefox, soon to be supported in MS Edge, and not yet supported in Safari 9.
In the mean time, you could use picturefill to add that support to non-supporting browsers.
Personally, I have used the w-descriptors and srcset to display a variety of images based on the width of the available space.
It might seem rather crude but it works for me - I edit the image so that it becomes "art-directed" for a number of common breakpoints - turning it into effectively a number of different images.
Then, based on the size of the agent's screen, the browser will almost always choose the image which I have previously determined to be the most suitable.
For my approach, I did not use size, picture or any other property.
A code as simple as this appears to work:
<img srcset="room-and-person.jpg 3200w, person-face-only.jpg 1600w" src="image.jpg" alt="an image" />
I have a very basic HTML website with images displayed with the following code:
<center><img src="style/images/istress.jpg" height="400" width="400" alt="photo by Kristin" class="attachment" /></center>
Is it possible to also optimize the images for mobile? Currently they are stretched/skewed when I visit the site via Safari mobile browser. Not sure if I'm able to set another size with just HTML.
Use the GD library to provide multiple sizes, even on the fly if you want to be fruity :)
There are several methods of optimizing image sizes from dynamic resizing to heavy compression and I will leave this to you to investigate, good link for some light reading is:
http://salman-w.blogspot.co.uk/2008/10/resize-images-using-phpgd-library.html
If you are not massively technically capable you could use http://www.imgix.com/ which I have used on a few occasions. Quite reliable too.